<!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, maximum-scale=1"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="include/head.html"></th:block>
    <th:block th:include="include/trafficHead.html"></th:block>
    <script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"
            integrity="sha384-TiCUE00h649CAMonG018J2ujOgDKW/kVWlChEuu4jK2vxfAAD0eZxzCKakxg55G4" crossorigin="anonymous"></script>
</head>
<body id="body">
<th:block th:include="include/header.html"></th:block>
<div class="trafficWrap">
    <div id="map">
        <th:block th:include="include/traffic.html"></th:block>
    </div>
<!--    <select class="mobile-select" name="mobile-select" title="주차장 목록">-->
<!--        <option value="-">주차장 목록을 선택해주세요</option>-->
<!--    </select>-->
</div>
<th:block th:include="include/footer.html"></th:block>
<link id="appKey" th:data-contextPath="${@environment.getProperty('kakao-key')}"/>
</body>
</html>
<script th:inline="javascript">
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
        const APP_KEY = document.getElementById("appKey").getAttribute("data-contextPath");
        Kakao.init(APP_KEY);
    }

    function openNavigationApp(xCrdn, yCrdn, addr) {
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
            appNavi(xCrdn, yCrdn, addr)
        }
        else {
            window.open(`https://map.kakao.com/link/to/${addr},${yCrdn},${xCrdn}`);
        }
    }
    function appNavi(xCrdn, yCrdn, addr) {
        Kakao.Navi.share({
            name: addr,
            x: Number(xCrdn),
            y: Number(yCrdn),
            coordType: 'wgs84'
        });
    }
</script>