<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/web/webPhotoDietSelectList.css">
    <link href="https://unpkg.com/tabulator-tables@5.5.2/dist/css/tabulator_materialize.min.css" rel="stylesheet">
    <style>
        .log-search-area {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .log-search-area select,
        .log-search-area input {
            height: 38px;
            padding: 0 12px;
            border: 1px solid #E9ECF0;
            border-radius: 5px;
            font-size: 14px;
            outline: none;
            background: #fff;
        }

        .log-search-area input[type="date"] {
            width: 150px;
        }

        .log-search-area input[type="text"] {
            width: 250px;
        }

        .log-total {
            font-size: 14px;
            color: #666;
            margin: 10px 0;
        }

        .log-total strong {
            color: #333;
            font-weight: 600;
        }

        .tabulator {
            font-size: 13px;
        }

        .tabulator .tabulator-header .tabulator-col {
            background: #f8f9fa;
        }

        .result-success {
            color: #28a745;
            font-weight: 600;
        }

        .result-error {
            color: #dc3545;
            font-weight: 600;
        }
    </style>
</th:block>
<th:block layout:fragment="layout_top_script">
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
        let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
    <div class="center_box">
        <p class="page_title">로그 히스토리</p>

        <div class="filter_box">
            <div class="form_box">
                <div class="log-search-area">
                    <input type="date" id="searchStartDate" />
                    <span>~</span>
                    <input type="date" id="searchEndDate" />

                    <select id="searchResultCode">
                        <option value="">전체 결과</option>
                        <option value="SUCCESS">SUCCESS</option>
                        <option value="ERROR">ERROR</option>
                    </select>

                    <div class="search_box">
                        <img src="/image/web/search_G.svg" alt="search" />
                        <input type="text" id="searchKeyword" placeholder="기능명 / 서비스명 / URL / 사용자ID" />
                    </div>

                    <button id="btnSearch" class="search_btn">조회</button>
                </div>
            </div>
        </div>

        <div class="log-total">
            전체 <strong id="totalCount">0</strong> 건
        </div>

        <div id="logHistoryGrid"></div>

        <!-- 페이지네이션 -->
        <div class="page_box">
            <nav aria-label="Page navigation" class="navigation">
                <ul class="pagination" id="logHistoryPagination"></ul>
            </nav>
        </div>
    </div>
</th:block>
<th:block layout:fragment="layout_script">
    <script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
    <script src="https://unpkg.com/tabulator-tables@5.5.2/dist/js/tabulator.min.js"></script>
    <script src="/js/crm/settings/log/logHistorySelectList.js" type="text/javascript"></script>
</th:block>

</html>