{% extends 'index.twig' %}

{% block content %}
<section class="col-12">
  {% if noCategories == true %}
  <div class="alert alert-danger">{{ msgFormDisabledDueToMissingCategories|raw }}</div>
  {% else %}
  {% if id1_label is defined %}
  <h2 class="mb-4 border-bottom">{{ id1_label }}</h2>
  {% endif %}
  <div id="questionForm">
    {% if id2_label is defined %}
    <p>{{ id2_label }}</p>
    {% endif %}
  </div>

  <div class="row mb-2">
    <div class="col">
      <div class="spinner-border text-primary d-none" id="loader" role="status">
        <span class="visually-hidden">Loading...</span>
      </div>
    </div>
  </div>

  <p class="hint-search-suggestion d-none">{{ msgMatchingQuestions }}</p>
  <div id="pmf-question-response"></div>

  <p class="hint-search-suggestion d-none">{{ msgFinishSubmission }}</p>

  <form id="pmf-question-form" action="#" method="post" class="needs-validation" novalidate>
    <input type="hidden" name="lang" id="lang" value="{{ lang }}">

    <div class="row mb-2">
      <label class="col-sm-3 col-form-label" for="name">
        {{ id3_label }}:<span class="pmf-required-asterisk"> *</span>
      </label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="name" id="name" value="{{ defaultContentName }}" required>
      </div>
    </div>

    <div class="row mb-2">
      <label class="col-sm-3 col-form-label" for="email">
        {{ id4_label }}:<span class="pmf-required-asterisk"> *</span>
      </label>
      <div class="col-sm-9">
        <input type="email" class="form-control" name="email" id="email" value="{{ defaultContentMail }}" required>
      </div>
    </div>

    {% if id5_label is defined %}
    <div class="row mb-2">
      <label class="col-sm-3 col-form-label" for="category">
        {{ id5_label }}:{% if id5_required == 'required' %}<span class="pmf-required-asterisk"> *</span>{% endif %}
      </label>
      <div class="col-sm-9">
        <select name="category" class="form-select" id="category" {{ id5_required }}>
          {% for cat in categories %}
            {% set indent = '...' | repeat(cat.indent) %}
            <option value="{{ cat.id }}" {% if cat.id in categories %}selected{% endif %}>
              {{ indent }} {{ cat.name }}
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
    {% endif %}

    <div class="row mb-2">
      <label class="col-sm-3 col-form-label" for="question">
        {{ id6_label }}:<span class="pmf-required-asterisk"> *</span>
      </label>
      <div class="col-sm-9">
        <textarea class="form-control" cols="45" rows="5" name="question" id="question" required></textarea>
      </div>
    </div>

    {{ captchaFieldset|raw }}

    <div class="row">
      <div class="col-sm-12 text-end">
        <button class="btn btn-primary btn-lg" type="submit" id="pmf-submit-question" data-pmf-form="ask-question">
          {{ msgNewContentSubmit }}
        </button>
      </div>
    </div>
  </form>
  {% endif %}
</section>
{% endblock %}