{% extends "erp_base.html" %}

{% block head_extra %}<link rel="stylesheet" href="/static/vacation.css?v=20260530i" />{% endblock %}

{% block content %}
<section class="vac">

  <!-- 페이지 액션 -->
  <div class="vac-actions">
    <div class="vac-actions-main">
      <a class="erp-btn erp-btn-primary" href="/vacation/new">+ 휴가 신청</a>
      {% if is_approver %}
      <a class="erp-btn erp-btn-outline" href="/vacation/pending">승인 대기
        {% if pending_count %}<span class="erp-badge erp-badge-inverse vac-mini">{{ pending_count }}</span>{% endif %}
      </a>
      {% endif %}
      <a class="erp-btn erp-btn-outline" href="/vacation/export.xlsx?year={{ year }}&month={{ month }}">엑셀</a>
      {% if is_admin %}
      <a class="erp-btn erp-btn-outline" href="/vacation/settings?year={{ year }}">설정</a>
      {% endif %}
    </div>
    <div class="vac-balance">
      <span class="vac-bal-item">총 <strong>{{ balance.total_days }}</strong></span>
      <span class="vac-bal-sep">·</span>
      <span class="vac-bal-item">사용 <strong>{{ balance.used_days }}</strong></span>
      <span class="vac-bal-sep">·</span>
      <span class="vac-bal-item vac-bal-remain">잔여 <strong>{{ balance.remaining_days }}</strong></span>
      <span class="erp-muted vac-bal-year">{{ year }}년</span>
    </div>
  </div>

  <div class="vac-layout">
    <!-- ── 왼쪽: 월간 달력 ── -->
    <div class="erp-card vac-cal-card">
      <div class="vac-cal-head">
        <a class="erp-btn erp-btn-outline vac-nav-btn"
           href="/vacation/?year={{ prev_y }}&month={{ prev_m }}">‹</a>
        <h2 class="vac-cal-title">{{ year }}년 {{ month }}월</h2>
        <a class="erp-btn erp-btn-outline vac-nav-btn"
           href="/vacation/?year={{ next_y }}&month={{ next_m }}">›</a>
        <a class="erp-btn erp-btn-outline vac-today-btn" href="/vacation/">오늘</a>
      </div>

      <div class="vac-cal">
        <div class="vac-wd-row">
          {% for wd in weekdays %}
          <div class="vac-wd {% if loop.index0 == 0 %}vac-red{% elif loop.index0 == 6 %}vac-blue{% endif %}">{{ wd }}</div>
          {% endfor %}
        </div>

        {% for week in weeks %}
        <div class="vac-week">
          <div class="vac-week-days">
            {% for cell in week.days %}
            <a class="vac-day
                      {% if not cell.in_month %}vac-out{% endif %}
                      {% if cell.is_today %}vac-today{% endif %}
                      {% if cell.is_selected %}vac-selected{% endif %}"
               href="/vacation/?year={{ year }}&month={{ month }}&date={{ cell.date }}"
               {% if cell.holiday_name %}title="{{ cell.holiday_name }}"{% endif %}>
              <span class="vac-day-num
                           {% if cell.is_sunday or cell.is_holiday %}vac-red{% elif cell.is_saturday %}vac-blue{% endif %}">{{ cell.day }}</span>
            </a>
            {% endfor %}
          </div>

          <div class="vac-week-bars">
            {% for bar in week.bars %}
            <a class="vac-bar {{ bar.status_class }}
                      {% if bar.continues_left %}vac-bar-l{% endif %}
                      {% if bar.continues_right %}vac-bar-r{% endif %}"
               style="grid-column: {{ bar.start_col + 1 }} / span {{ bar.span }}; grid-row: {{ bar.lane + 1 }};"
               href="/vacation/{{ bar.id }}"
               title="{{ bar.label }} ({{ bar.days }}일 · {{ bar.status }})">
              <span class="vac-bar-label">{{ bar.label }}</span>
            </a>
            {% endfor %}
          </div>
        </div>
        {% endfor %}
      </div>

      <div class="vac-legend">
        <span class="vac-leg"><i class="vac-dot vac-bar-submit"></i>제출</span>
        <span class="vac-leg"><i class="vac-dot vac-bar-approve"></i>승인</span>
        <span class="vac-leg"><i class="vac-dot vac-bar-reject"></i>반려</span>
        <span class="vac-leg"><i class="vac-dot vac-bar-cancel"></i>취소</span>
      </div>
    </div>

    <!-- ── 오른쪽: 선택일 휴가 리스트 ── -->
    <div class="erp-card vac-list-card">
      <div class="vac-list-head">
        <h2>{{ selected_date }}</h2>
        <span class="erp-muted">{{ sel_requests|length }}건</span>
      </div>

      {% if sel_requests %}
      <ul class="vac-list">
        {% for r in sel_requests %}
        <li class="vac-list-item">
          <a href="/vacation/{{ r.id }}" class="vac-list-link">
            <div class="vac-list-top">
              <strong>{{ r.owner_name or r.owner }}</strong>
              {% set badge = 'erp-badge-neutral' %}
              {% if r.status == '승인' %}{% set badge = 'erp-badge-success' %}
              {% elif r.status == '제출' %}{% set badge = 'erp-badge-inverse' %}
              {% elif r.status == '반려' %}{% set badge = 'erp-badge-danger' %}{% endif %}
              <span class="erp-badge {{ badge }}">{{ r.status }}</span>
            </div>
            <div class="vac-list-meta erp-muted">
              {{ r.vacation_type }} · {{ r.days }}일 ·
              {{ r.start_date }}{% if r.end_date != r.start_date %} ~ {{ r.end_date }}{% endif %}
            </div>
            {% if r.reason %}<div class="vac-list-reason erp-muted">{{ r.reason }}</div>{% endif %}
          </a>
        </li>
        {% endfor %}
      </ul>
      {% else %}
      <p class="erp-muted vac-empty">선택한 날짜의 휴가가 없습니다.
        <a href="/vacation/new">휴가 신청</a></p>
      {% endif %}
    </div>
  </div>

</section>
{% endblock %}