{% extends "base.html" %}
{% block title %}iDRAC Job Queue 모니터링 (Redfish){% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/jobs.css') }}">
{% endblock %}

{% block scripts %}
<!-- CSRF Token for JavaScript -->
<script>
  const csrfToken = "{{ csrf_token() }}";
</script>
<script src="{{ url_for('static', filename='js/jobs.js') }}"></script>
{% endblock %}

{% block content %}
<div class="container-fluid py-3">
  <!-- 헤더 -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div class="d-flex align-items-center gap-3">
      <h4 class="mb-0">
        <i class="bi bi-list-task"></i> iDRAC Job Queue 모니터링
      </h4>
      <span class="badge bg-success">Redfish API</span>
      <span id="last-updated" class="text-muted small"></span>
      <span id="loading-indicator" class="d-none">
        <span class="spinner-border spinner-border-sm" role="status"></span>
      </span>
    </div>
    <div id="monitor-status" class="d-flex align-items-center gap-2">
      <span class="status-dot" id="status-dot"></span>
      <span class="small fw-semibold" id="status-text">모니터링 꺼짐</span>
    </div>
  </div>

  <!-- IP 입력 -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div class="fw-semibold">
          <i class="bi bi-hdd-network"></i> 모니터링 IP 목록
        </div>
        <div class="d-flex gap-2">
          <button id="btn-load-file" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-file-earmark-text"></i> 파일에서 불러오기
          </button>
          <button id="btn-apply" class="btn btn-success btn-sm">
            <i class="bi bi-check-circle"></i> 적용
          </button>
        </div>
      </div>
      <small class="text-muted d-block mb-2">
        한 줄에 하나씩 입력 (쉼표/세미콜론/공백 구분 가능, # 주석 지원)
      </small>
      <textarea id="ipInput" class="form-control font-monospace" rows="4"
        placeholder="10.10.0.11&#10;10.10.0.12&#10;# 주석 가능"></textarea>
      <div class="mt-2">
        <small class="text-muted">총 <strong id="ip-count">0</strong>개 IP</small>
      </div>
    </div>
  </div>

  <!-- 컨트롤 -->
  <div class="card mb-3">
    <div class="card-body">
      <div class="row g-3 align-items-center">
        <div class="col-auto">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="monitorSwitch">
            <label class="form-check-label" for="monitorSwitch">
              <strong>모니터링 켜기</strong>
            </label>
          </div>
        </div>

        <div class="col-auto">
          <button id="btn-refresh" class="btn btn-primary btn-sm" disabled>
            <i class="bi bi-arrow-clockwise"></i> 지금 새로고침
          </button>
        </div>

        <div class="col-auto">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="autoRefreshSwitch">
            <label class="form-check-label" for="autoRefreshSwitch">
              자동 새로고침 (<span id="poll-interval">10</span>초)
            </label>
          </div>
        </div>

        <div class="col-auto">
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" id="showCompletedSwitch" checked>
            <label class="form-check-label" for="showCompletedSwitch">
              최근 완료 Job 표시
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 통계 -->
  <div class="row mb-3">
    <div class="col-md-3">
      <div class="card text-center">
        <div class="card-body py-2">
          <h6 class="card-title text-muted mb-1 small">총 서버</h6>
          <h3 class="mb-0" id="stat-total">0</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center border-info">
        <div class="card-body py-2">
          <h6 class="card-title text-info mb-1 small">진행 중</h6>
          <h3 class="mb-0 text-info" id="stat-running">0</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center border-success">
        <div class="card-body py-2">
          <h6 class="card-title text-success mb-1 small">완료</h6>
          <h3 class="mb-0 text-success" id="stat-completed">0</h3>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card text-center border-danger">
        <div class="card-body py-2">
          <h6 class="card-title text-danger mb-1 small">에러</h6>
          <h3 class="mb-0 text-danger" id="stat-error">0</h3>
        </div>
      </div>
    </div>
  </div>

  <!-- 테이블 -->
  <div class="table-responsive">
    <table class="table table-hover table-sm align-middle" id="jobs-table">
      <thead class="table-light">
        <tr>
          <th style="width:140px;">IP</th>
          <th>JID</th>
          <th>작업명</th>
          <th style="width:160px;">상태</th>
          <th style="width:140px;">진행률</th>
          <th>메시지</th>
          <th style="width:240px;">마지막 업데이트</th>
        </tr>
      </thead>
      <tbody id="jobs-body">
        <tr>
          <td colspan="7" class="text-center text-muted py-4">
            <i class="bi bi-power fs-2 d-block mb-2"></i>
            모니터링이 꺼져 있습니다. 상단 스위치를 켜면 조회가 시작됩니다.
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}