<!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>DashBoard</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-speedometer2"></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 mb-4">
                    <div class="col-md-4">
                        <div class="input-group">
                            <span class="input-group-text"><i class="bi bi-calendar-month"></i></span>
                            <input type="month" id="monthPicker" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-bar-chart-line me-2"></i>작업별 평균 실행 시간
                            </div>
                            <div class="card-body">
                                <canvas id="batchExecutionTimeChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-pie-chart-fill me-2"></i>작업 상태 분포
                            </div>
                            <div class="card-body">
                                <canvas id="batchStatusChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-graph-up me-2"></i>시간대별 작업 실행 분포
                            </div>
                            <div class="card-body">
                                <canvas id="hourlyJobExecutionChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 mb-4">
                        <div class="card">
                            <div class="card-header">
                                <i class="bi bi-graph-up me-2"></i>일별 작업 실행 횟수
                            </div>
                            <div class="card-body">
                                <canvas id="dailyJobExecutionsChart" style="height: 250px;"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="bi bi-clock-history me-2"></i>최근 실행된 작업
                    </div>
                    <div class="card-body">
                        <div class="table-responsive" style="max-height: 300px; 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 me-2"></i> 실행 시간</th>
                                        <th class="col-1 text-nowrap bg-light"><i class="bi bi-activity"></i> 상태</th>
                                    </tr>
                                </thead>
                                <tbody id="recentJobsTable">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </section>
            
            <script type="module" th:src="@{/js/pages/dashboard/dashboard.js}" defer></script>
        </main>
    </body>
</html>