<!doctype html>
<html lang="ko"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <title>오라인 소식</title>
    <!-- 이 페이지 전용 CSS -->
    <th:block layout:fragment="head-extra">
        <link rel="stylesheet" href="/css/board.css">
    </th:block>
</head>
<body>
<div id="wrapper" layout:fragment="content">
    <!-- ======================== HEADER -->
    <header id="hd" class="sub"></header>

    <!-- ======================== CONTAINER -->
    <div id="container">
        <div id="container_wrapper">   
     <!-- ========= SUB VISUAL + BREADCRUMB ========= -->
    <div id="sub_visual">
        <div class="sub-bg bg-news"></div>
        <div class="sub-tit-wrap">
            <h2 class="sub-tit">오라인 소식</h2>
            <p class="sub-desc">항상 고객사와 소통하는 오라인포</p>
        </div>

        <div id="sub_breadcrumb">
            <div class="inner">
                <ul class="breadcrumb">
                    <li>
                        <a href="/" class="bc-home" aria-label="홈으로 이동">
                            <img src="/img/sub/ico_home.svg" alt="HOME">
                        </a>
                    </li>
                    <li class="bc-item bc-depth1">
                        <button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
                            <span class="bc-label">오라인</span>
                            <span class="bc-arrow"><img src="/img/sub/ico_arrow.svg" alt="arrow"></span>
                        </button>
                        <ul class="bc-dropdown" role="listbox">
                            <li><a href="/company/intro">회사소개</a></li>
                            <li><a href="/business/intro">사업소개</a></li>
                            <li><a href="/careers/talent">인재채용</a></li>
                            <li class="active"><a href="/bbs/owrainfo">오라인</a></li>
                        </ul>
                    </li>
                    <li class="bc-item bc-depth2">
                        <button class="bc-btn" type="button" aria-haspopup="listbox" aria-expanded="false">
                            <span class="bc-label">오라인 소식</span>
                            <span class="bc-arrow"><img src="/img/sub/ico_arrow.svg" alt="arrow"></span>
                        </button>
                        <ul class="bc-dropdown" role="listbox">
                            <li class="active"><a href="/bbs/owrainfo">오라인 소식</a></li>
                            <li><a href="/bbs/partnership">제휴문의</a></li>
                            <li><a href="/bbs/press">보도자료</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ========= SUB VISUAL + BREADCRUMB [e] ========= -->

    <!-- ========= SUB CONTENT [s] ========= -->
    <div class="sub_content">
        <div class="sub-section">
            <div class="sub-inner">

                <!-- SECTION 1 : 검색 영역 -->
                <form class="board-search-wrap" th:action="@{/bbs/owrainfo}" method="post">
                    <div class="board-search">
                        <div class="search-select-wrap">
                            <select class="search-select" name="searchType" aria-label="검색 조건">
                                <option value="title"   th:selected="${searchType == 'title'}">제목</option>
                                <option value="content" th:selected="${searchType == 'content'}">내용</option>
                                <option value="all"     th:selected="${searchType == 'all'}">제목+내용</option>
                            </select>
                            <span class="select-arrow" aria-hidden="true">
                                <span class="material-symbols-outlined">expand_more</span>
                            </span>
                        </div>
                        <div class="search-input-wrap">
                            <input type="text" name="keyword" class="search-input"
                                   placeholder="검색어를 입력하세요" aria-label="검색어 입력"
                                   th:value="${keyword}">
                        </div>
                        <button type="submit" class="search-btn" aria-label="검색">
                            <span class="material-symbols-outlined">search</span>
                        </button>
                    </div>
                </form>

                <!-- SECTION 2 : 리스트 영역 -->
                <div class="board-list-wrap">
                    <ul class="board-list" aria-label="공지사항 목록">

                        <th:block th:if="${#lists.isEmpty(list)}">
                            <li class="board-item board-empty">등록된 게시물이 없습니다.</li>
                        </th:block>

                        <li class="board-item" th:each="item, iterStat : ${list}">
                            <span class="item-num" th:text="${totalCount - (currentPage - 1) * 10 - iterStat.index}"></span>
                            <a class="item-title"
                               th:href="@{/bbs/owrainfo/view(id=${item.id},searchType=${searchType},keyword=${keyword},page=${currentPage})}"
                               th:text="${item.title}"></a>
                            <span class="item-date" th:text="${item.regDate}"></span>
                        </li>

                    </ul>
                </div>

                <!-- SECTION 3 : 페이지네이션 영역 -->
                <div class="board-pagination-wrap">
                    <nav class="board-pagination" aria-label="페이지 탐색">
                        <a th:href="@{/bbs/owrainfo(page=1,searchType=${searchType},keyword=${keyword})}"
                           class="pg-btn pg-first" aria-label="첫 페이지">
                            <span class="material-symbols-outlined">keyboard_double_arrow_left</span>
                        </a>
                        <a th:href="@{/bbs/owrainfo(page=${currentPage > 1 ? currentPage - 1 : 1},searchType=${searchType},keyword=${keyword})}"
                           class="pg-btn pg-prev" aria-label="이전 페이지">
                            <span class="material-symbols-outlined">chevron_left</span>
                        </a>
                        <ul class="pg-list">
                            <li th:each="p : ${#numbers.sequence(blockStart, blockEnd)}">
                                <a th:href="@{/bbs/owrainfo(page=${p},searchType=${searchType},keyword=${keyword})}"
                                   th:text="${p}"
                                   th:class="${p == currentPage ? 'pg-num active' : 'pg-num'}"
                                   th:aria-current="${p == currentPage ? 'page' : null}"
                                   th:aria-label="${p + '페이지'}"></a>
                            </li>
                        </ul>
                        <a th:href="@{/bbs/owrainfo(page=${currentPage < totalPages ? currentPage + 1 : totalPages},searchType=${searchType},keyword=${keyword})}"
                           class="pg-btn pg-next" aria-label="다음 페이지">
                            <span class="material-symbols-outlined">chevron_right</span>
                        </a>
                        <a th:href="@{/bbs/owrainfo(page=${totalPages},searchType=${searchType},keyword=${keyword})}"
                           class="pg-btn pg-last" aria-label="마지막 페이지">
                            <span class="material-symbols-outlined">keyboard_double_arrow_right</span>
                        </a>
                    </nav>
                </div>

            </div>
        </div>
    </div>
    <!-- ========= SUB CONTENT [e] ========= -->
</div>
