{% load i18n %}

<form method="post" action="." class="space-y-4 form" enctype="multipart/form-data" novalidate>{% csrf_token %}
  {% for error in post_form.non_field_errors %}
  <div class="alert alert-danger">
    <i class="icon-exclamation-sign"></i> {{ error }}
  </div>
  {% endfor %}

  {% include "partials/form_field.html" with field=post_form.subject %}
  {% include "partials/form_field.html" with field=post_form.content %}
  {% if post_form.username %}
    {% include "partials/form_field.html" with field=post_form.username %}
  {% endif %}
  {% if post_form.update_reason %}
    {% include "partials/form_field.html" with field=post_form.update_reason %}
  {% endif %}

  <!-- Sub "forms" panes -->
  <div class="tab-content" x-data="{ tab: '#options' }">
    <!-- Sub "forms" tabs -->
    {% if poll_option_formset or attachment_formset %}
    <ul class="flex flex-row justify-between w-full">
      <a href="#options"
         :class="tab === '#options' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
         class="px-11 pb-4 w-1/2 text-center active"
         data-toggle="tab"
         x-on:click.prevent="tab='#options'"
      >{% trans "Options" %}</a>
      {% if poll_option_formset %}
        <a href="#poll"
           :class="tab === '#poll' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
           class="px-11 pb-4 w-1/2 text-center active"
           data-toggle="tab"
           x-on:click.prevent="tab='#poll'"
        >{% trans "Poll" %}</a>
      {% endif %}
      {% if attachment_formset %}
        <a href="#attachments"
           :class="tab === '#attachments' ? 'border-b-4 border-orange text-orange' : 'border-b border-slate'"
           class="px-11 pb-4 w-1/2 text-center active"
           data-toggle="tab"
           x-on:click.prevent="tab='#attachments'"
        >{% trans "Attachments" %}</a>
      {% endif %}
    </ul>
    {% endif %}

    <div class="tab-pane active" id="options" x-show="tab == '#options'" x-cloak>
      <div class="form-group">
        <br />
        <div class="w-full">
          <div class="w-full">
            {% include "partials/form_field.html" with field=post_form.topic_type %}
            {% with field=post_form.enable_signature %}
            <div class="mt-3 checkbox">
              <label for="{{ field.auto_id }}">
                {{ field }}
                {{ field.label }}
              </label>
            </div>
            {% endwith %}
            {% if post_form.lock_topic %}
            {% with field=post_form.lock_topic %}
            <div class="checkbox">
              <label for="{{ field.auto_id }}">
                {{ field }}
                {{ field.label }}
              </label>
            </div>
            {% endwith %}
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    {% if poll_option_formset %}
    <div class="tab-pane" id="poll" x-show="tab == '#poll'" x-cloak>
      <div class="form-group">
        <br />
        {% if poll_options_validated and poll_option_formset.non_form_errors %}<div class="alert alert-danger">{{ poll_option_formset.non_form_errors|striptags }}</div>{% endif %}
        <div class="flex space-x-4 w-full">
          <div class="space-y-4 w-1/2">
            {% include "partials/form_field.html" with field=post_form.poll_question %}
            {% include "partials/form_field.html" with field=post_form.poll_max_options %}
            {% include "partials/form_field.html" with field=post_form.poll_duration %}
            <div{% if post_form.poll_user_changes.errors %} class="has-error"{% endif %}>
              <div class="checkbox">
                <label for="{{ post_form.poll_user_changes.auto_id }}">
                  {{ post_form.poll_user_changes }}
                  {{ post_form.poll_user_changes.label }}
                </label>
              </div>
            </div>
          </div>
          <div id="poll_formset" class="space-y-4 w-1/2">
            {% include "forum_conversation/forum_polls/poll_option_formset.html" %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
    {% if attachment_formset %}
    <div class="tab-pane" id="attachments" x-show="tab == '#attachments'" x-cloak>
      <div class="form-group">
        <br />
        <div class="row">
          <div id="attachment_formset" class="col-md-12">
            {% include "forum_conversation/forum_attachments/attachment_formset.html" %}
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>

  <div class="pt-6 form-actions">
    <input type="submit" name="preview" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-slate text-orange" value="{% trans "Preview" %}" />&nbsp;
    <input type="submit" class="py-3 px-8 text-sm text-base font-medium uppercase rounded-md border md:py-1 md:px-4 md:text-lg border-orange text-orange" value="{% trans "Submit" %}" />
  </div>
</form>
