<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{layouts/layout}"
    layout:fragment="content" lang="ko" xml:lang="ko">
    <head>
        <title>Schedule</title>
    </head>
    <body>
        <main id="main" class="main">
            <div class="pagetitle">
                <div class="row align-items-center">
                    <div class="col">
                        <h1><i class="bi bi-calendar3"></i> 스케줄</h1>
                    </div>
                    <div class="col-auto">
                        <nav>
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">홈</li>
                                <li class="breadcrumb-item active">스케줄</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
            <section class="section">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title fs-6 text-dark">
                                    <i class="bi bi-search"></i> 스케줄 검색
                                </h5>
                                <form id="searchForm" class="row g-3">
                                    <div class="col-md-5">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="groupName" name="groupName" placeholder="그룹명">
                                            <label for="groupName"><i class="bi bi-people"></i> 그룹명</label>
                                        </div>
                                    </div>
                                    <div class="col-md-5">
                                        <div class="form-floating">
                                            <input type="text" class="form-control" id="jobName" name="jobName" placeholder="잡 이름">
                                            <label for="jobName"><i class="bi bi-briefcase"></i> 잡 이름</label>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn btn-primary h-100 w-100">
                                            <i class="bi bi-search"></i> 검색
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title d-flex justify-content-between align-items-center">
                                    <span class="fs-6 text-dark"><i class="bi bi-list-ul"></i> 스케줄 목록</span>
                                    <button id="refreshJobBtn" class="btn btn-sm btn-outline-primary" data-bs-toggle="tooltip" data-bs-placement="left" title="스케줄 재적용">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                </h5>
                                <div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-people"></i> 그룹</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-briefcase"></i> 잡 이름</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-calendar-event"></i> 스케줄</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-activity"></i> 상태</th>
                                                <th class="col-1 text-nowrap bg-light"><i class="bi bi-gear"></i> 액션</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="modal fade" id="scheduleDetailModal" tabindex="-1" aria-labelledby="scheduleDetailModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header bg-dark text-white">
                            <h5 class="modal-title" id="scheduleDetailModalLabel">
                                <i class="bi bi-info-circle-fill me-2"></i>스케줄 정보
                            </h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="scheduleDetailContent">
                        </div>
                        <div class="modal-footer justify-content-center">
                            <fieldset>
                                <legend class="visually-hidden">작업 제어 버튼</legend>
                                <div class="d-flex justify-content-between" style="width: 300px;">
                                    <button type="button" class="btn btn-outline-danger rounded-circle" id="pauseJobBtn" data-bs-toggle="tooltip" data-bs-placement="top" title="정지" data-enabled-class="btn-outline-danger">
                                        <i class="bi bi-pause-fill"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-info rounded-circle" id="resumeJobBtn" data-bs-toggle="tooltip" data-bs-placement="top" title="재시작" data-enabled-class="btn-outline-info">
                                        <i class="bi bi-arrow-clockwise"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-primary rounded-circle" id="updateCronBtn" data-bs-toggle="tooltip" data-bs-placement="top" title="저장">
                                        <i class="bi bi-save"></i>
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary rounded-circle" data-bs-dismiss="modal" data-bs-toggle="tooltip" data-bs-placement="top" title="닫기">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
            
            <script type="module" th:src="@{/js/pages/schedule/schedule.js}" defer></script>
        </main>
    </body>
</html>