<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="tab-title" th:text="${listTitle}">-->
    <div class="tab-title">
        <div class="active">리스트</div>
        <div>지점 검색</div>
    </div>
    <div class="list-search">
        <div>검색</div>
        <input id="search-box" name="search-list" type="text" placeholder="검색어를 입력하세요">
    </div>
    <ul class="list-content list"></ul>
    <ul class="list-content spot"></ul>
</div>
<div class="toggle-button" title="보이기/숨기기" th:onclick="toggleEvent()">
    &lt;
</div>
<div class="traffic-color-legend">
    <span>원할</span>
    <span class="gradation"></span>
    <span>정체</span>
</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}]];
    switch (type) {
        case 'cctv' :
            _CctvFlag = true;
            _CctvListFlag = true;
            break;
        case 'intersection' :
            _IntersectionFlag = true;
            _IntersectionListFlag = true;
            break;
        case 'vms' :
            _VmsFlag = true;
            _VmsListFlag = true;
            break;
        case 'incident' :
            _IncidentFlag = true;
            _IncidentListFlag = true;
            break;
        case 'traffic' :
            _TrafficFlag = true;
            _TrafficListFlag = true;
            break;
        case 'parking' :
            _ParkingFlag = true;
            _ParkingListFlag = true;
            break;
    }
    const tab = $('#' + type + '-tab');
    const legend = $('#' + type + '-legend');
    tab.addClass('active');
    tab.on('click', ()=>{
        return;
    });
    legend.addClass('active');
    tab.children().eq(0).addClass('active');
    legend.children().eq(0).addClass('active');
    $('.traffic-color-legend').addClass(type);
</script>