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

{% block content %}

{% include 'public/partials/preview_bar.html' %}

{% comment %}Ten sam ciemny nagłówek, który otwiera każda podstronę serwisu -
   formularz nie jest gościem w cudzym szablonie, tylko zwykła strona.
   Rysunek `signal` mówi to samo, co strona kontaktu: stąd idzie wiadomość.{% endcomment %}
{% include 'public/partials/page_header.html' with title=object.heading eyebrow=site_settings.site_name lead=object.intro deco='signal' deco_edge='wave' %}

<section class="band">
  {% comment %}Wąski słup na środku - formularz czyta się w jednej kolumnie,
     a jego szerokość ustawia panel (Ustawienia formularzy).{% endcomment %}
  <div class="wrap">
    <div class="mx-auto min-w-0" style="max-width: {{ settings.page_width|default:44 }}rem">

      {% if closed %}
        <div class="border border-site-border border-t-4 border-t-brand-600 bg-site-surface p-7 sm:p-10 dark:border-site-border-dark dark:bg-site-surface-dark">
          <p class="eyebrow">{% trans "Zgłoszenia zamknięte" %}</p>
          <p class="mt-6 text-sm leading-relaxed text-site-muted dark:text-site-muted-dark">{{ object.closed_message }}</p>
        </div>
      {% endif %}

      {% if form %}
        <div class="border border-site-border border-t-4 border-t-brand-600 bg-site-surface p-7 sm:p-10 dark:border-site-border-dark dark:bg-site-surface-dark{% if closed %} mt-8{% endif %}">
          <p class="eyebrow">Formularz</p>
          <form method="post" novalidate class="mt-6 space-y-5">
            {% csrf_token %}

            {% if form.non_field_errors %}
              <div class="border-l-4 border-l-red-600 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-950 dark:text-red-200">
                {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
              </div>
            {% endif %}

            {% for hidden in form.hidden_fields %}{{ hidden }}{% endfor %}

            {% comment %}Pola na połowę szerokości stana obok siebie dopiero od
               ekranu sm - na telefonie każde zajmuje cały wiersz.{% endcomment %}
            <div class="grid grid-cols-1 gap-5 sm:grid-cols-2">
              {% for definition, field in form.rows %}
                <div class="{% if definition.is_wide %}sm:col-span-2{% endif %}">
                  {% if definition.kind == 'checkbox' or definition.kind == 'consent' %}
                    <label class="flex items-start gap-3 text-sm leading-relaxed text-site-muted dark:text-site-muted-dark" for="{{ field.id_for_label }}">
                      <span class="mt-0.5">{{ field }}</span>
                      <span>{{ definition.label }}{% if field.field.required %} <span class="text-red-600" aria-hidden="true">*</span>{% endif %}</span>
                    </label>
                  {% else %}
                    <label class="dt-label" for="{{ field.id_for_label }}">
                      {{ definition.label }}{% if field.field.required %} <span class="text-red-600" aria-hidden="true">*</span>{% endif %}
                    </label>
                    <div class="mt-2 {% if definition.kind == 'radio' or definition.kind == 'checkboxes' %}space-y-2 text-sm text-site-muted dark:text-site-muted-dark [&_input]:mr-2{% endif %}">{{ field }}</div>
                  {% endif %}
                  {% if definition.help_text %}<p class="mt-1 text-xs text-site-muted dark:text-site-muted-dark">{{ definition.help_text }}</p>{% endif %}
                  {% for error in field.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
                </div>
              {% endfor %}
            </div>

            <button class="btn-primary btn-block btn-lg" type="submit">{{ object.submit_label }}</button>
            <p class="text-xs text-site-muted dark:text-site-muted-dark">{% blocktrans %}Pola oznaczone <span class="text-red-600">*</span> są wymagane.{% endblocktrans %}</p>
          </form>
        </div>
      {% endif %}

    </div>
  </div>
</section>

{% endblock %}