<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{/mobile/layout/detailLayout}">
<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/mobile/reservation_progress.css">
</th:block>
<th:block layout:fragment="layout_top_script">
    <script>
        let muAppContentId = "[[${param.muAppContentId}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
<div class="content_box">
    <h3>방문 일시를 선택해주세요</h3>
    <div class="calender">
        <div class="calender_header">
            <button class="nav_btn prev"><img src="/image/mobile/datepicker.svg" alt="datepicker"/></button>
            <div class="ym_box">
                <span class="year"></span>년
                <span class="month"></span>월
            </div>
            <button class="nav_btn next"><img src="/image/mobile/datepicker.svg" alt="datepicker"/></button>
        </div>
        <div class="calender_main">
            <div class="days">
                <p>일</p>
                <p>월</p>
                <p>화</p>
                <p>수</p>
                <p>목</p>
                <p>금</p>
                <p>토</p>
            </div>
            <div class="dates"></div>
        </div>
    </div>
    <div class="times"></div>
</div>
<div class="content_box">
    <h3>진료를 선택해주세요</h3>
    <ul class="clinic_list">
        <li class="first"><button>쁘띠</button></li>
        <li><button>피부</button></li>
        <li><button>비만</button></li>
        <li><button>상담</button></li>
    </ul>
    <ul class="reservation_list">
<!--        <li class="first">-->
<!--            <input type="checkbox" id="checkbox1" name="reservation_list"/>-->
<!--            <label for="checkbox1">보톡스</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox2" name="reservation_list"/>-->
<!--            <label for="checkbox2">필러</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox3" name="reservation_list"/>-->
<!--            <label for="checkbox3">콜라겐볼륨(스컬트라)</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox4" name="reservation_list"/>-->
<!--            <label for="checkbox4">콜라겐볼륨(엘란쎄)</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox5" name="reservation_list"/>-->
<!--            <label for="checkbox5">윤곽 메쉬다V주사</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox6" name="reservation_list"/>-->
<!--            <label for="checkbox6">실리프팅</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox7" name="reservation_list"/>-->
<!--            <label for="checkbox7">리쥬란</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox8" name="reservation_list"/>-->
<!--            <label for="checkbox8">샤넬주사</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox9" name="reservation_list"/>-->
<!--            <label for="checkbox9">상담(초진)</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox10" name="reservation_list"/>-->
<!--            <label for="checkbox10">상담(재진)</label>-->
<!--        </li>-->
<!--        <li>-->
<!--            <input type="checkbox" id="checkbox11" name="reservation_list"/>-->
<!--            <label for="checkbox11">리쥬란 + 물광(리쥬란HB)</label>-->
<!--        </li>-->
    </ul>
</div>
<div class="button_box">
    <button class="next_btn" disabled>다음</button>
</div>
<script>

</script>
<form id="eventForm" onsubmit="return false;"></form>
</th:block>
<th:block layout:fragment="layout_script">
    <script src="/js/mobile/reservation/insertReservation.js"></script>
</th:block>
</html>