<div class="left-list-area">
    <ul class="list-tab">
        <li id="cctv-tab" title="CCTV" onclick="movePath('/trafficMap/cctvMap')">
            <div class="cctv-tab-icon"></div>
            <div>CCTV</div>
        </li>
        <li id="intersection-tab" title="스마트교차로" onclick="movePath('/trafficMap/intersections')">
            <div class="intersection-tab-icon"></div>
            <div>스마트교차로</div>
        </li>
        <li id="vms-tab" title="도로전광판" onclick="movePath('/trafficMap/vms')">
            <div class="vms-tab-icon"></div>
            <div>도로전광판</div>
        </li>
        <li id="incident-tab" title="돌발정보" onclick="movePath('/trafficMap/incidents')">
            <div class="incident-tab-icon"></div>
            <div>돌발정보</div>
        </li>
        <li id="traffic-tab" title="소통정보" onclick="movePath('/trafficMap/realtimetraffic')">
            <div class="traffic-tab-icon"></div>
            <div>소통정보</div>
        </li>
        <li id="parking-tab" title="주차정보" onclick="movePath('/trafficMap/parking')">
            <div class="parking-tab-icon"></div>
            <div>주차정보</div>
        </li>
    </ul>
    <div class="list-search">
        <div>검색</div>
        <input id="search-box" name="search-list" type="text" placeholder="검색어를 입력하세요">
    </div>
    <ul class="list-content list"></ul>
</div>
<div class="toggle-button" title="보이기/숨기기" th:onclick="toggleEvent()">
    &lt;
</div>
<!--<div class="location-btn" onclick="toggleLocationBox()"><img th:src="@{/images/icon/search-icon.png}" alt="찾기 이미지" width="14" height="14">지점검색</div>-->
<div class="location-box">
    <div class="top">
        <input type="text" placeholder="검색어를 입력하세요" id="location-text" autocomplete="off" onkeyup="searchLocation(event)" name="location-text">
        <div class="search-btn" onclick="searchLocation()">찾기</div>
    </div>
    <ul class="list-content spot"></ul>
</div>
<div class="legend-bottom">
    <h5>범례</h5>
    <ul>
        <li>
            <button id="cctv-legend">
                <div class="cctv-legend-icon"></div>
                <div>CCTV</div>
            </button>
        </li>
        <li>
            <button id="intersection-legend">
                <div class="intersection-legend-icon"></div>
                <div>스마트교차로</div>
            </button>
        </li>
        <li>
            <button id="vms-legend">
                <div class="vms-legend-icon"></div>
                <div>도로전광판</div>
            </button>
        </li>
        <li>
            <button id="incident-legend">
                <div class="incident-legend-icon"></div>
                <div>돌발정보</div>
            </button>
        </li>
        <li>
            <button id="traffic-legend">
                <div class="traffic-legend-icon"></div>
                <div>소통정보</div>
            </button>
        </li>
        <li>
            <button id="parking-legend">
                <div class="parking-legend-icon"></div>
                <div>주차정보</div>
            </button>
        </li>
    </ul>
</div>
<script th:inline="javascript">
    const _type = [[${type}]];

    const tab = $('#' + _type + '-tab');
    const legend = $('#' + _type + '-legend');
    tab.addClass('active');
    tab.attr('onclick', '').unbind('click');
    legend.addClass('active');
    tab.children().eq(0).addClass('active');
    legend.children().eq(0).addClass('active');
    $('.traffic-color-legend').addClass(_type);
</script>