{% extends "_layout.html" %}

{% block title %}{{ form_title }}{% endblock %}

{% block content %}
<div class="form-container">
  <h1>{{ form_title }}</h1>

  <form action="submit" method="POST" autocomplete="off">
    {% for f in fields %}

      {% if let Some(html) = f.html_before %}
          {{ html | safe }}
      {% endif %}

      <div class="field">
        {% match f.widget() %}

          {% when FieldWidget::Checkbox %}
            <label for="{{ f.name }}" class="checkbox-label">
              <input id="{{ f.name }}" name="{{ f.name }}" type="checkbox" value="true">
              <div class="label-content">
                <span class="label-title">{{ f.title }}</span>
                <span class="desc checkbox-desc">{{ f.description }}</span>
              </div>
            </label>

          {% when FieldWidget::Textarea %}
            <label for="{{ f.name }}">
              <span class="label-title">{{ f.title }}</span>
              <span class="desc">{{ f.description }}</span>
            </label>
            <textarea id="{{ f.name }}" name="{{ f.name }}" rows="10" placeholder="{{ f.title|lower }}"></textarea>

          {% when FieldWidget::Select with (options) %}
            <label for="{{ f.name }}">
              <span class="label-title">{{ f.title }}</span>
              <span class="desc">{{ f.description }}</span>
            </label>
            <select id="{{ f.name }}" name="{{ f.name }}">
              <option value="">Select an option</option>
              {% for opt in options %}
                <option value="{{ opt }}">{{ opt }}</option>
              {% endfor %}
            </select>

          {% when FieldWidget::Input with (input_type) %}
            <label for="{{ f.name }}">
              <span class="label-title">{{ f.title }}</span>
              <span class="desc">{{ f.description }}</span>
            </label>
            <input id="{{ f.name }}" name="{{ f.name }}" type="{{ input_type }}" placeholder="{{ f.title|lower }}">

        {% endmatch %}
      </div>

      {% if let Some(html) = f.html_after %}
          {{ html | safe }}
      {% endif %}

    {% endfor %}

    <div class="submit-container">
      <button type="submit">{{ submit_button }}</button>
    </div>
  </form>
</div>
{% endblock %}