{include file='./header.inc.html' title="" css=$css_files js=$js_files tpl=$tpl_files}
    <!-- #Body -->
    <div id="Body">
        {include file='./error.inc.html' err_msg=$err_msg sys_msg=$sys_msg}
        <div class="box">
            <h3>
                <div class="box-title">
                    <!-- フラガールショー　サンライトカーニバル　予約 -->
                    {$other_name}　{$lang_list.ReservationSeat}
                    <span style="float:right">◯ {$lang_list.UnselectedSeat}</span>
                </div>
            </h3>
        </div>
        <!-- main-->
        <div id="canvas-container">
            <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="check_php" value="1">

            <div class="canvas-container_top">
                <table>
                    <tr>
                        <th style="width: 190px">{$lang_list.Date}</th>
                        <th style="width: 40px">{$lang_list.Time}</th>
                        <th style="width: 106px"></th>
                        <th></th>
                        <th style="width: 200px"></th>
                        <th style="width: 50px">
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <label>{$use_date}&nbsp;（{$day_of_week}）</label>
                        </td>
                        <td>
                            <label id="time_start">{$time_start}</label>
                        </td>
                        <td>
                            <button class="canvas-btn rsv-btn" id="loadAssignRsvNo" style="margin-left: 15px;">
                                {$lang_list.ShowTheLatest}
                            </button>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div class="canvas-container__center">
                <div class="select_location menu-toggle">
                    <div class="one"></div>
                    <div class="two">{$lang_list.AreaSelection}</div>
                    <div class="three"></div>
                </div>
                <div class="plus_minus menu-toggle zoom">
                    <button class="plus">+</button>
                    <button class="minus">-</button>
                </div>
                <nav>
                    <ul role="navigation" class="hidden" id="zoom_to">
                        <li><a href="javascript:void(0)" data-rankId="1">{$lang_list.PremiumSeatSS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="2">{$lang_list.RightSideSeatS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="3">{$lang_list.LeftSideSeatS}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="4">{$lang_list.SeatA}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="5">{$lang_list.RightSideSeatB}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="6">{$lang_list.LeftSideSeatB}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="7">{$lang_list.RightSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="8">{$lang_list.LeftSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="9">{$lang_list.2FLeftSideSeatC}</a></li>
                        <li><a href="javascript:void(0)" data-rankId="10">{$lang_list.BackwardSeatC}</a></li>
                    </ul>
                </nav>
                <canvas id="canvas" ></canvas>
                <div class="ec-loader rsv-loader " style="display: block;">
                    <div style="top: 250px;">
                    </div>
                </div>
                <div class="ec-loader rsv-loader click_flg" style="z-index: 4;background: rgba(0, 0, 0, 0.5);">
                    <div style="top: 250px;">
                    </div>
                </div>
                <div class="btn-foo">
                        <button class="canvas-btn rsv-btn rsv-nav-prev" id="CancelAssignSeat">
                                {$lang_list.Close}
                            </button>
                </div>
            </div>
        </div>
    </div>
    <!-- /#Body -->
    
    <!-- 2018/12/18 522 Nhu edit start -->
    <div class="note_and_info" title="{$lang_list.AlertMessage}">  
        <p id="note_and_info_content">
            {$lang_list.NoteAndNotification1}
            <br>
            {$lang_list.NoteAndNotification2}
            <br>
            {$lang_list.NoteAndNotification3}
            <br>
            {$lang_list.NoteAndNotification4}
        </p>  
    </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 = false;
</script>