{% extends "erp_base.html" %}

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

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

  {% set action = '/vacation/new' if mode == 'new' else '/vacation/' ~ req.id ~ '/edit' %}
  <form id="vac-form" method="post" action="{{ action }}" class="erp-card vac-form-card">

    <div class="vac-form-grid">
      <label class="erp-field"><span>휴가 종류 *</span>
        <select class="erp-select" name="vacation_type" id="vac-type" required>
          {% for t in vacation_types %}
          <option value="{{ t }}" {% if req and req.vacation_type == t %}selected{% endif %}>{{ t }}</option>
          {% endfor %}
        </select>
      </label>

      <label class="erp-field"><span>시작일 *</span>
        <input class="erp-input" type="date" name="start_date" id="vac-start" required
               value="{{ req.start_date if req else default_date }}" />
      </label>

      <label class="erp-field" id="vac-start-half-field"><span>시작 구분</span>
        <select class="erp-select" name="start_half" id="vac-start-half">
          {% for h in halves %}
          <option value="{{ h }}" {% if req and req.start_half == h %}selected{% endif %}>{{ half_labels[h] }}</option>
          {% endfor %}
        </select>
      </label>

      <label class="erp-field" id="vac-end-field"><span>종료일 *</span>
        <input class="erp-input" type="date" name="end_date" id="vac-end"
               value="{{ req.end_date if req else default_date }}" />
      </label>

      <label class="erp-field" id="vac-end-half-field"><span>종료 구분</span>
        <select class="erp-select" name="end_half" id="vac-end-half">
          {% for h in halves %}
          <option value="{{ h }}" {% if req and req.end_half == h %}selected{% endif %}>{{ half_labels[h] }}</option>
          {% endfor %}
        </select>
      </label>
    </div>

    <label class="erp-field vac-full"><span>사유</span>
      <textarea class="erp-input" name="reason" rows="3"
                placeholder="휴가 사유를 입력하세요.">{{ req.reason if req else '' }}</textarea>
    </label>

    <div class="vac-days-preview">
      예상 사용 일수: <strong id="vac-days-out">—</strong>
      <span class="erp-muted">(주말 제외 · 공휴일은 저장 시 반영)</span>
    </div>

    <div class="erp-page-actions vac-form-actions">
      <button type="submit" class="erp-btn erp-btn-primary" name="action" value="submit">제출</button>
      <button type="submit" class="erp-btn erp-btn-outline" name="action"
              value="{{ 'save' if mode == 'edit' else 'draft' }}">작성중 저장</button>
      {% if mode == 'edit' %}
      <a class="erp-btn erp-btn-outline" href="/vacation/{{ req.id }}">취소</a>
      {% else %}
      <a class="erp-btn erp-btn-outline" href="/vacation/">취소</a>
      {% endif %}
    </div>
  </form>
</section>
{% endblock %}

{% block scripts %}<script src="/static/vacation.js?v=20260530i" defer></script>{% endblock %}