{% load staticfiles %}
<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Smart 사이즈 추천 시스템</title>
        <link rel="apple-touch-icon" href="{% static 'measurement/size_recommend/images/Aicon.png' %}" /><!--아이폰 바로가기 아이콘--><!--권장-->
        <link rel="shortcut icon" href="{% static 'measurement/size_recommend/images/Aicon.png' %}" /><!--안드로이드폰 바로가기 아이콘--><!--권장-->
        <link rel="stylesheet" type="text/css" href="{% static 'measurement/size_recommend/css/size_common.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'measurement/size_recommend/css/slick.css' %}">
        <link rel="stylesheet" type="text/css" href="{% static 'base/css/jquery-confirm.min.css' %}">
</head>
<body>
	<div class="sizeWrap">
	    <article>
	    	<div class="sub2MenuWrap">
	    		<ul class="sub2TypeBtn">
	    			{% if winter_formal %}
                    <a href="{% url 'measurement:size_recommend:get_size_recommend' kindergartener_id 'winter' 'formal' %}"><li class="{{ winterformal }}"><span>동복 정복</span></li></a>
                    {% endif %}
                    {% if winter_training %}
	    			<a href="{% url 'measurement:size_recommend:get_size_recommend' kindergartener_id 'winter' 'training' %}"><li class="{{ wintertraining }}"><span>동복 체육복</span></li></a>
                    {% endif %}
                    {% if summer_formal %}
	    			<a href="{% url 'measurement:size_recommend:get_size_recommend' kindergartener_id 'summer' 'formal' %}"><li class="{{ summerformal }}"><span>하복 정복</span></li></a>
                    {% endif %}
                    {% if summer_training %}
	    			<a href="{% url 'measurement:size_recommend:get_size_recommend' kindergartener_id 'summer' 'training' %}"><li class="{{ summertraining }}"><span>하복 체육복</span></li></a>
                    {% endif %}
	    		</ul>
	    	</div>
	    	<div class="jacketOnOffWrap">
	    		<div class="jacketOnOff">
			        <p>자켓 on/off</p>
			        <div class="list-toggle" onclick="sizeRecommend.jacketOnOffEvent();"><input id="jacketToggleCheck" type="checkbox" checked="checked"><label class="label-success"></label></div>
		        </div>
		    </div>
            <p class="size_recommend_text">"사이즈 선택 시 모델을 클릭하세요"</p>
	    	<div class="sub2ModelList">
                {% if normal_size %}
                <div class="slick-slide {{ normal_size.selected }}" onclick="sizeRecommend.selectSize({{ normal_size.id }});">
                    <input type="hidden" id="normalSizeImageIndex" value="{{ normal_size.id }}">
                    <img src="{{ normal_size.front_image.url }}" id="normalSizeImage">
                    <div class="checked">
                        {% if normal_size.selected %}<img src="{% static 'base/image/star_c.png' %}">{% else %}<img src="{% static 'base/image/star_n.png' %}">{% endif %}
                    </div>
                    <p class="sub2ModelText">추천사이즈</p>
                    <p class="sub2ModelSize">{{ normal_size.current_size }}</p>
                </div>
                {% endif %}
                {% if one_up_size %}
                <div class="slick-slide {{ one_up_size.selected }}" onclick="sizeRecommend.selectSize({{ one_up_size.id }});">
                    <input type="hidden" id="oneUpSizeImageIndex" value="{{ one_up_size.id }}">
                    <img src="{{ one_up_size.front_image.url }}" id="oneUpSizeImage">
                    <div class="checked">
                        {% if one_up_size.selected %}<img src="{% static 'base/image/star_c.png' %}">{% else %}<img src="{% static 'base/image/star_n.png' %}">{% endif %}
                    </div>
                    <p class="sub2ModelText">한사이즈</p>
                    <p class="sub2ModelSize">{{ one_up_size.current_size }}</p>
                </div>
                {% endif %}
                {% if two_up_size %}
                <div class="slick-slide {{ two_up_size.selected }}" onclick="sizeRecommend.selectSize({{ two_up_size.id }});">
                    <input type="hidden" id="twoUpSizeImageIndex" value="{{ two_up_size.id }}">
                    <img src="{{ two_up_size.front_image.url }}" id="twoUpSizeImage">
                    <div class="checked">
                        {% if two_up_size.selected %}<img src="{% static 'base/image/star_c.png' %}">{% else %}<img src="{% static 'base/image/star_n.png' %}">{% endif %}
                    </div>
                    <p class="sub2ModelText">두사이즈</p>
                    <p class="sub2ModelSize">{{ two_up_size.current_size }}</p>
                </div>
                {% endif %}
            </div>
	    	<div class="sub2Btn">
	    		<div class="nextBtn">
                    <a href="#">
                        <img src="{% static 'measurement/size_recommend/images/BtnNext.png' %}" onclick="sizeRecommend.selectedAllCheck();">
                    </a>
                </div>
                <div class="preBtn">
                    <a href="{% url 'measurement:size_recommend:selected_couple_list' kindergartener_id %}">
                        <img src="{% static 'measurement/size_recommend/images/BtnPre.png' %}">
                    </a>
                </div>
                <div class="rotateBtn">
                	<img src="{% static 'measurement/size_recommend/images/rotate_brown.png' %}" onclick="sizeRecommend.frontOnOffEvent();">
                </div>
	    	</div>
	    </article>
    </div>
    <input type="hidden" id="season" value="{{ season }}">
    <input type="hidden" id="style" value="{{ style }}">
    <input type="hidden" id="kindergartenerIndex" value="{{ kindergartener_id }}">

 <script src="{% static 'measurement/size_recommend/js/jquery-1.12.3.min.js' %}"></script>
 <script src="{% static 'measurement/size_recommend/js/slick.min.js' %}"></script>
 <script src="{% static 'measurement/size_recommend/js/common.js' %}"></script>
 <script src="{% static 'measurement/size_recommend/js/size_recommend.js' %}"></script>
 <script src="{% static 'base/js/jquery-confirm.min.js' %}"></script>
 <script>
    $(document).ready(function(){
   		if($(window).width() <= 414){
   			$('.sub2ModelList').slick();
   		}
	});
 </script>
 </body>
</html>