{% extends "erp_base.html" %}

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

{% block content %}
<section class="vac">
  <div class="erp-card vac-detail-card">

    <div class="vac-detail-head">
      <div>
        <h2>{{ req.owner_name or req.owner }}</h2>
        <span class="erp-muted">{{ req.owner }}</span>
      </div>
      {% set badge = 'erp-badge-neutral' %}
      {% if req.status == '승인' %}{% set badge = 'erp-badge-success' %}
      {% elif req.status == '제출' %}{% set badge = 'erp-badge-inverse' %}
      {% elif req.status == '반려' %}{% set badge = 'erp-badge-danger' %}{% endif %}
      <span class="erp-badge {{ badge }} vac-detail-status">{{ req.status }}</span>
    </div>

    <dl class="vac-detail-grid">
      <div><dt>휴가 종류</dt><dd>{{ req.vacation_type }}</dd></div>
      <div><dt>사용 일수</dt><dd><strong>{{ req.days }}</strong>일</dd></div>
      <div><dt>시작일</dt><dd>{{ req.start_date }} ({{ half_labels[req.start_half] }})</dd></div>
      <div><dt>종료일</dt><dd>{{ req.end_date }} ({{ half_labels[req.end_half] }})</dd></div>
      {% if req.approver_email %}
      <div><dt>승인자</dt><dd>{{ req.approver_email }}</dd></div>
      <div><dt>결재일시</dt><dd>{{ req.decided_at }}</dd></div>
      {% endif %}
    </dl>

    {% if req.reason %}
    <div class="vac-detail-block">
      <div class="vac-detail-label">사유</div>
      <p>{{ req.reason }}</p>
    </div>
    {% endif %}

    {% if req.status == '반려' and req.reject_reason %}
    <div class="vac-detail-block vac-reject-block">
      <div class="vac-detail-label">반려 사유</div>
      <p>{{ req.reject_reason }}</p>
    </div>
    {% endif %}

    <!-- ── 승인자 액션 (제출 상태) ── -->
    {% if is_approver and req.status == '제출' %}
    <div class="vac-approve-box">
      <form method="post" action="/vacation/{{ req.id }}/approve" class="vac-inline-form">
        <button type="submit" class="erp-btn erp-btn-primary">승인</button>
      </form>
      <form method="post" action="/vacation/{{ req.id }}/reject" class="vac-reject-form">
        <input class="erp-input" type="text" name="reject_reason" placeholder="반려 사유" required />
        <button type="submit" class="erp-btn erp-btn-danger">반려</button>
      </form>
    </div>
    {% endif %}

    <div class="erp-page-actions vac-detail-actions">
      <a class="erp-btn erp-btn-primary" href="/vacation/">◀◀ 달력</a>

      {% if is_owner and req.status in ('작성중', '반려') %}
      <form method="post" action="/vacation/{{ req.id }}/submit" class="vac-inline-form">
        <button type="submit" class="erp-btn erp-btn-outline">제출</button>
      </form>
      {% endif %}

      {% if (is_owner or is_admin) %}
        {% if req.status == '승인' %}
        <form method="post" action="/vacation/{{ req.id }}/cancel" class="vac-inline-form"
              onsubmit="return confirm('승인된 휴가를 취소 처리할까요?');">
          <button type="submit" class="erp-btn erp-btn-outline">취소처리</button>
        </form>
        {% elif req.status in ('작성중', '제출', '반려') %}
        <form method="post" action="/vacation/{{ req.id }}/delete" class="vac-inline-form"
              onsubmit="return confirm('이 휴가 신청을 삭제할까요? (복구 불가)');">
          <button type="submit" class="erp-btn erp-btn-danger">삭제</button>
        </form>
        {% endif %}
      {% endif %}

      {% if can_edit %}
      <a class="erp-btn erp-btn-outline vac-push-right" href="/vacation/{{ req.id }}/edit">수정</a>
      {% endif %}
    </div>

  </div>
</section>
{% endblock %}