{% extends 'order_contract/add_option/add_option_base.html' %}
{% load staticfiles %}
{% block extrastyle %}
<link rel="stylesheet" href="{% static 'order_contract/css/addOption.css' %}">
{% endblock extrastyle %}

{% block step_image %}
        <ul class="carouselList">
            <a href="{% url 'simulation:extend_mapping:index' order_id %}"><li>1. 디자인 제안</li></a>
            <a href="{% url 'order_contract:option_index' order_id %}"><li class="active">2. 추가옵션</li></a>
            <li>3. 공급가격</li>
            <li>4. 계약서 작성</li>
        </ul>
{% endblock step_image %}
{% block content %}
    <article>
        <ul class="contentTab">
        {% for category in option_main_category %}
            <li data-option-id='{{ category.id }}'><span>{{ category.name }}</span></li>
        {% endfor %}
        </ul>
        <ul class="modelWrap">
        {% include 'order_contract/add_option/final_set_list.html' %}
        </ul>
        <div class="Tab_container">
            <div class="tab_content">
                <ul class="innerTab">
                    {% include 'order_contract/add_option/favorite_set_list.html' %}
                </ul>
                <div class="innertab_container">
                    <div class="innertab_content">
                        <div class="etcTabWrap">
                            <ul class="etcTab">
                                {% include 'order_contract/add_option/option_item_list.html' %}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </article>
{% endblock content%}
{% block step_btn %}
    <div class="step_btn">
        <div class="pre_step_btn"><a href="{% url 'simulation:extend_mapping:index' order_id %}"><img src="{% static 'order_contract/images/arrow_left.png' %}"></a></div>
        <div class="rotate_btn"><img src="{% static 'order_contract/images/rotate.png' %}"></div>
        <div class="next_step_btn"><a href="{% url 'order_contract:estimate_index' order_id %}"><img src="{% static 'order_contract/images/arrow_right.png' %}"></a></div>
    </div>
{% endblock step_btn %}
{% block modal %}
    <div class="Modalmask"></div>
    <div class="ModelModalWrap">
        <div class="closebtn"><img src="{% static 'order_contract/images/closeIcon.png' %}"></div>
        <div class="mainModelWrap"></div>
        <div class="favoriteContent">
            {% include 'order_contract/add_option/favorite_set_list.html' %}
        </div>
    </div>
{% endblock modal %}

{% block extrascript %}
<script src="{% static 'order_contract/js/addOption.js' %}"></script>
<script src="{% static 'order_contract/js/viewer.js' %}"></script>
<script>
    var order_id = {{ order_id }};

    function addOptionTabWidth(){
        var liWidth;

        var width = $('.contentTab li').width();
        var count = $('.contentTab li').size();

        liWidth = (width * count) + count;

        $('.contentTab').css('width',liWidth);
    }
    addOptionTabWidth();
</script>
{% endblock extrascript %}

</body>
</html>