<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <link rel="stylesheet" th:href="@{/css/main.css}">
</head>
<body id="body">
<th:block th:include="/include/header.html"></th:block>
<div class="mainWrap">
    <div class="main">
        <div class="main-menu">
            <div class="top">
                <div title="포항시 교통 CCTV 영상을 확인할 수 있습니다." class="first-bg" th:onclick="movePath('/trafficMap/cctvMap')">
                    <div>교통CCTV</div>
                </div>
                <div title="포항시 실시간 도로 소통 정보를 확인할 수 있습니다." class="other-bg road-bg" th:onclick="movePath('/trafficMap/realtimetraffic')">
                    <div>실시간소통정보</div>
                </div>
                <div title="포항시 교통 통계를 제공합니다." class="other-bg stat-bg" th:onclick="movePath('/statistics/traffic01')">
                    <div>교통통계</div>
                </div>
                <div title="포항시 버스정보시스템 홈페이지로 이동합니다.(새 창 열기)" class="other-bg bus-bg" th:onclick="openBusSite(0)">
                    <div>
                        버스정보시스템
                        <img class="bus-direction" src="/images/icon/direction.png" alt="새 창 열기">
                    </div>
                </div>
            </div>
            <div class="mid">
                <div class="notice">
                    <div>
                        <img src="/images/icon/alarm.png" alt="">
                        <span>공지사항</span>
                        <a>+</a>
                    </div>
                    <div class="content">
                        <div>
                            <div title="긴급차량 우선신호시스템 확대운영 안내">긴급차량 우선신호시스템 확대운영 안내</div>
                            <span>2023-12-11</span>
                        </div>
                    </div>
                </div>
                <div class="incd">
                    <div>
                        <img src="/images/icon/incd.png" alt="">
                        <span>돌발정보</span>
                        <a>+</a>
                    </div>
                    <div class="incd-content">
                        <div th:each="item, i:${notice}">
                            <div th:onclick="movePath([['/trafficMap/incidents/'+ ${item.getIncdOcrrId()}]])" th:title="${item.getIncdTitl()}" th:text="${item.getIncdTitl()}">-</div>
                            <span th:text="${item.getAgoMinutes()}+'분 전'"></span>
                        </div>
                        <div class="incd-content" th:if="${notice == null} or ${notice.size() == 0}">데이터가 없습니다.</div>
                    </div>
                </div>
                <div class="center" onclick="movePath('/center/center')">
                    <div>교통정보센터 소개 ></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>

</body>

<script th:inline="javascript">

</script>

</html>