<!--
  Form for submitting a new LOA request with bootstrap validation feedback.
  Keeps inputs inline rather than relying on Django's default form rendering.
-->
{% extends 'loa/base.html' %}
{% load static %}

{% block details %}
  <h1>Request a Leave of Absence</h1>

  {% if form.non_field_errors %}
    <div class="alert alert-danger alert-dismissible fade show" role="alert">
      {% for err in form.non_field_errors %}
        {{ err }}
      {% endfor %}
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
  {% endif %}

  <div class="row">
    <div class="col-12 col-md-6">  {# full width on <768px, half width on ≥768px #}
      <form method="post" novalidate>
        {% csrf_token %}

        {# Start Date #}
        <div class="mb-3">
          <label for="{{ form.start_date.id_for_label }}" class="form-label">
            {{ form.start_date.label }}
          </label>
          <input
            type="date"
            name="{{ form.start_date.html_name }}"
            id="{{ form.start_date.id_for_label }}"
            class="form-control{% if form.start_date.errors %} is-invalid{% endif %}"
            value="{{ form.start_date.value|default_if_none:'' }}"
            min="{{ form.fields.start_date.widget.attrs.min }}"
          >
          {% for err in form.start_date.errors %}
            <div class="invalid-feedback">{{ err }}</div>
          {% endfor %}
        </div>

        {# End Date #}
        <div class="mb-3">
          <label for="{{ form.end_date.id_for_label }}" class="form-label">
            {{ form.end_date.label }}
          </label>
          <input
            type="date"
            name="{{ form.end_date.html_name }}"
            id="{{ form.end_date.id_for_label }}"
            class="form-control{% if form.end_date.errors %} is-invalid{% endif %}"
            value="{{ form.end_date.value|default_if_none:'' }}"
            min="{{ form.fields.end_date.widget.attrs.min }}"
          >
          {% for err in form.end_date.errors %}
            <div class="invalid-feedback">{{ err }}</div>
          {% endfor %}
        </div>

        {# Reason #}
        <div class="mb-3">
          <label for="{{ form.reason.id_for_label }}" class="form-label">
            {{ form.reason.label }}
          </label>
          <textarea
            name="{{ form.reason.html_name }}"
            id="{{ form.reason.id_for_label }}"
            rows="4"
            class="form-control{% if form.reason.errors %} is-invalid{% endif %}"
          >{{ form.reason.value|default_if_none:'' }}</textarea>
          {% for err in form.reason.errors %}
            <div class="invalid-feedback">{{ err }}</div>
          {% endfor %}
        </div>

        <button type="submit" class="btn btn-primary">Submit Request</button>
      </form>
    </div>
  </div>
{% endblock %}
