{include file='./header_sp.inc.html' title=$title css=$css_files js=$js_files tpl=$tpl_files}
    <input type="hidden" id="HtlId" value="{$htl_id}">
    <input type="hidden" id="course_id" value="{$course_id}">
    <input type="hidden" id="others_id" value="{$others_id}">
    <input type="hidden" id="use_date" value="{$use_date}">
    <input type="hidden" id="time_id" value="{$time_id}">
    <input type="hidden" id="has_course" value="{$has_course}">

    <input type="hidden" id="no_max" value="0">
    <input type="hidden" id="Lang" value="{$lang}">
    <input type="hidden" id="NoCharge" value="{$lang_list.NoCharge}">

    <div data-role="header" style="overflow-x: hidden">
      <h2 class="content-head">{$other_name}　{$lang_list.ReservationSeat} <span style="float:right; padding-right: 20px;">◯ {$lang_list.UnselectedSeat}</span></h2>
    </div>
    <div class="sp_canvas_top"  style="word-break: keep-all;">
        <div class="sp_canvas_top__first">
            <div>
                <label>{$use_date}（{$day_of_week}）</label>
                <label id="time_start">{$time_start}</label>
            </div>
        </div>
        <!-- 2018/12/18 Nhu edit start -->
        <div class="sp_canvas_top__last paging-sp">
            <a id="loadAssignRsvNo" data-ajax="false" class="rsv-btn m-btn-ss"><img /></a>
        </div>
        <!-- 2018/12/18 Nhu edit end -->
    </div>
    <div class="canvas-container__center">
        <div class="select_location menu-toggle">
            <div class="one"></div>
            <div class="two {$lang}">{$lang_list.AreaSelection}</div>
            <div class="three"></div>
        </div>
        <div class="plus_minus menu-toggle zoom">
            <button data-role="none" class="plus" >+</button>
            <button data-role="none" class="minus">-</button>
        </div>
        <nav>
            <ul role="navigation" class="hidden" id="zoom_to">
                <li><a href="javascript:void(0)" data-role="none" data-rankId="1">{$lang_list.PremiumSeatSS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="2">{$lang_list.RightSideSeatS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="3">{$lang_list.LeftSideSeatS}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="4">{$lang_list.SeatA}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="5">{$lang_list.RightSideSeatB}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="6">{$lang_list.LeftSideSeatB}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="7">{$lang_list.RightSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="8">{$lang_list.LeftSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="9">{$lang_list.2FLeftSideSeatC}</a></li>
                <li><a href="javascript:void(0)" data-role="none" data-rankId="10">{$lang_list.BackwardSeatC}</a></li>
            </ul>
        </nav>
        <div id="canvas_container" >
        </div>
    </div>
    <div class="paging-sp" id="paging_sp">
        <div class="btn-next-prev">
                <a data-ajax="false" id="CancelAssignSeat" data-role="button" data-icon="arrow-l" class="m-btn m-btn-prev sp-paging paging-prev rsv-btn rsv-sp-prev" style="padding: 0">{$lang_list.Close}</a>
        </div>
    </div>
    <!--/content-->
  </div>
  <!--/home-->
</body>
<!-- 2018/12/18 522 Nhu edit start -->
<div id="note_and_info" data-role="dialog">
    <div data-role="header">
        <h1>{$lang_list.AlertMessage}</h1>
    </div>
    <div data-role="content">  
        <p id="note_and_info_content">
            {$lang_list.NoteAndNotification1}
            <br>
            {$lang_list.NoteAndNotification2}
            <br>
            {$lang_list.NoteAndNotification3}
            <br>
            {$lang_list.NoteAndNotification4}
        </p>  
        <a class="m-btn m-btn-modal m-btn-close m-btn-s" href="#" data-role="button" id="backtoassignhome">OK</a>
    </div>
</div>
<!-- 2018/12/18 522 Nhu edit end -->
<script>
    // set it to global
    {if $seat_area_flg === '1'}
        window.IMAGE_URL = "{$design_url}img/1303_001_map.png?20240426";
    {else}
        window.IMAGE_URL = "{$design_url}img/1303_001_map_old.png?20240325";
    {/if};
    window.IMAGE_SEAT_URL = "{$design_url}img/1303_001_seat_empty.png";
    window.IMAGE_NON_SEAT = "{$design_url}img/1303_001_non_seat.png";
    var isSmartPhone = true;
</script>
</html>