{% extends "pages/base.html" %}
{% load i18n %}

{% block title %}{% trans "Maintenance Request" %}{% endblock %}

{% block content %}
<div class="row g-4">
  <div class="col-lg-7">
    <div class="card shadow-sm">
      <div class="card-body">
        <h1 class="h3 mb-3">{% trans "Maintenance Request" %}</h1>
        <p class="text-muted">{% trans "Schedule a manual maintenance task for a specific location." %}</p>
        <form method="post" novalidate>
          {% csrf_token %}
          {% if form.non_field_errors %}
            <div class="alert alert-danger" role="alert">
              {% for error in form.non_field_errors %}
                <div>{{ error }}</div>
              {% endfor %}
            </div>
          {% endif %}
          <div class="mb-3">
            <label class="form-label" for="id_category">{% trans "Task Category" %}</label>
            {{ form.category }}
            {% if form.category.errors %}
              <div class="invalid-feedback d-block">{{ form.category.errors|join:" " }}</div>
            {% endif %}
          </div>
          <div class="mb-3">
            <label class="form-label" for="id_description">{% trans "Requestor Comments" %}</label>
            {{ form.description }}
            {% if form.description.errors %}
              <div class="invalid-feedback d-block">{{ form.description.errors|join:" " }}</div>
            {% endif %}
          </div>
          <div class="mb-3">
            <label class="form-label" for="id_location">{% trans "Location" %}</label>
            {{ form.location }}
            {% if form.location.errors %}
              <div class="invalid-feedback d-block">{{ form.location.errors|join:" " }}</div>
            {% endif %}
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="id_scheduled_start">{% trans "Scheduled start" %}</label>
              {{ form.scheduled_start }}
              {% if form.scheduled_start.errors %}
                <div class="invalid-feedback d-block">{{ form.scheduled_start.errors|join:" " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="id_scheduled_end">{% trans "Scheduled end" %}</label>
              {{ form.scheduled_end }}
              {% if form.scheduled_end.errors %}
                <div class="invalid-feedback d-block">{{ form.scheduled_end.errors|join:" " }}</div>
              {% endif %}
            </div>
          </div>
          <div class="form-check form-switch my-3">
            {{ form.is_periodic }}
            <label class="form-check-label" for="id_is_periodic">{% trans "Repeat this request" %}</label>
            {% if form.is_periodic.errors %}
              <div class="invalid-feedback d-block">{{ form.is_periodic.errors|join:" " }}</div>
            {% endif %}
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label" for="id_period">{% trans "Period" %}</label>
              {{ form.period }}
              <div class="form-text">{% trans "Length of each execution window (e.g. 7 days)." %}</div>
              {% if form.period.errors %}
                <div class="invalid-feedback d-block">{{ form.period.errors|join:" " }}</div>
              {% endif %}
            </div>
            <div class="col-md-6">
              <label class="form-label" for="id_period_deadline">{% trans "Period deadline" %}</label>
              {{ form.period_deadline }}
              <div class="form-text">{% trans "Optional cutoff before the period resets." %}</div>
              {% if form.period_deadline.errors %}
                <div class="invalid-feedback d-block">{{ form.period_deadline.errors|join:" " }}</div>
              {% endif %}
            </div>
          </div>
          <div class="form-check form-switch my-3">
            {{ form.enable_notifications }}
            <label class="form-check-label" for="id_enable_notifications">{% trans "Email reminders" %}</label>
            {% if form.enable_notifications.errors %}
              <div class="invalid-feedback d-block">{{ form.enable_notifications.errors|join:" " }}</div>
            {% endif %}
          </div>
          <button type="submit" class="btn btn-primary">{% trans "Schedule Task" %}</button>
        </form>
      </div>
    </div>
  </div>
  <div class="col-lg-5">
    <div class="card shadow-sm h-100">
      <div class="card-body">
        <h2 class="h5 mb-3">{% trans "How it works" %}</h2>
        <ul class="list-unstyled small text-muted mb-0">
          <li class="mb-2">{% trans "Select the location that requires on-site maintenance." %}</li>
          <li class="mb-2">{% trans "Choose the appropriate task category and add your comments." %}</li>
          <li class="mb-2">{% trans "Choose the expected start and end window for the work." %}</li>
          <li class="mb-0">{% trans "Enable email reminders to notify assigned contacts when available." %}</li>
        </ul>
      </div>
    </div>
  </div>
</div>
{% endblock %}