<section class="col-12">
  <h1>{{ pageHeader }}</h1>
  <div id="questionForm">
    <p>{{ msgNewQuestion }}</p>
  </div>
  <p class="hint-search-suggestion d-none">{{ msgMatchingQuestions }}</p>
  <div id="answerForm"></div>
  <div id="answers"></div>

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

  <form id="formValues" action="#" method="post">
    <input type="hidden" name="lang" id="lang" value="{{ lang }}" />

    <div class="form-group row">
      <label class="col-sm-3 form-control-label" for="name">{{ msgNewContentName }}</label>
      <div class="col-sm-9">
        <input type="text" class="form-control" name="name" id="name" value="{{ defaultContentName }}" required />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-3 form-control-label" for="email">{{ msgNewContentMail }}</label>
      <div class="col-sm-9">
        <input type="email" class="form-control" name="email" id="email" value="{{ defaultContentMail }}" required />
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-3 form-control-label" for="category">{{ msgAskCategory }}</label>
      <div class="col-sm-9">
        <select name="category" class="form-control" id="category" required>
          {{ renderCategoryOptions }}
        </select>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-3 form-control-label" for="question">{{ msgAskYourQuestion }}</label>
      <div class="col-sm-9">
        <textarea class="form-control" cols="45" rows="5" name="question" id="question" required></textarea>
      </div>
    </div>

    {{ captchaFieldset }}

    <div id="loader"></div>
    <div id="qerror"></div>

    <div class="form-group row">
      <div class="col-sm-12 text-right">
        <button class="btn btn-primary btn-lg" type="submit" id="submitquestion">{{ msgNewContentSubmit }}</button>
      </div>
    </div>
  </form>
</section>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    $(() => {
      $('#submitquestion').on('click', (event) => {
        event.preventDefault();
        checkQuestion();
      });
    });
  });
</script>