<!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/notice.css}">
</head>
<body id="body">
<th:block th:include="/include/header.html"></th:block>
<div class="noticeWrap">
    <div class="container">
        <h2 class="header">공지사항</h2>
        <div class="content list">
            <a th:each="item : ${list.getList()}" th:onclick="moveNoticeView([[${item.getBoardNo()}]], false)" style="display: flex;">
                <div th:text="${item.getBSubject()}"></div>
                <div class="item-right">
                    <div th:text="${item.getRegDate()}"></div>
                    <div th:text="${item.getReadCount() + '회'}"></div>
                </div>
            </a>
        </div>
        <div class="pagination">
            <div class="previous">
                <img th:if="${list.getPrevPage() == 0}" src="/images/icon/previous.png" alt="이전">
                <img th:if="${list.getPrevPage() > 0}" class="active" src="/images/icon/previous_active.png" alt="이전">
            </div>
            <div class="pages">
               <a th:class="${m == list.getCurrentPage() ? 'active' : ''}"
                  th:each="m : ${#numbers.sequence(list.getStartPage(), list.getEndPage())}"
                  th:onclick="moveNoticePage([[${m}]])"
                  th:text="${m}"></a>
            </div>
            <div class="next">
                <img th:if="${list.getNextPage() == 0}" src="/images/icon/next.png">
                <img th:if="${list.getNextPage() > 0}" class="active" src="/images/icon/next_active.png" alt="다음">
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>

<script>
    function moveNoticePage(page) {
        const activePage = $(".pages > a.active");
        if (activePage[0] && activePage.text() == page ) {
            return;
        }
        let searchText = '';
        let searchType = '';
        window.location.href = '/notice/list?page=' + page + '&searchText='+searchText+'&searchType=' + searchType;
    }
</script>