{% extends "exoral/base.html" %}

{% load static sekizai_tags %}

{% block js %}
{% addtoblock "js" %}
<script charset="utf-8" src="{% static 'js/helpers.js' %}"></script>
<script charset="utf-8" type="text/javascript">
  function setup() {
    $("#fragentext").keyup(function() {
      var v = $(this).val();

      if (v == '') {
        $(".vorhandene_frage").hide();
      } else {
        filter(
          ".vorhandene_frage",
          v,
          elem => { $(elem).show(); },
          elem => { $(elem).hide(); }
        );
      }

      if ($("p.vorhandene_frage").is(":visible")) {
        $("#warnung_vorhandene_fragen").show();
      } else {
        $("#warnung_vorhandene_fragen").hide();
      }
    });
  }

  $(document).ready(setup);
</script>
{% endaddtoblock %}
{% endblock %}

{% block content %}
<div class="container">
  <div class="alert alert-danger" role="alert">
    Bevor du eine neue Frage hinzufügst, vergewissere dich, ob sie <strong>wirklich</strong> neu ist.
    Bereits vorhandenen Fragen kannst du Pluspunkte geben.<br />
    Bitte füge immer nur eine neue Frage hinzu. Gib mehrere Fragen als separate neue Fragen ein.
  </div>

  <form method="post">
    {% csrf_token %}
    <div class="form-row">
      <div class="form-group col-md-2">
        <label for="datum"><strong>Datum</strong></label>
        <input type="date" class="form-control" id="datum" name="datum" value="{% now 'Y-m-d' %}" required>
      </div>
      <div class="form-group col-md-5">
        <label for="pruefer"><strong>Prüfer:in</strong></label>
        <input class="form-control" type="text" placeholder="{{ pruefer }}" readonly>
      </div>
      <div class="form-group col-md-5">
        <label for="testat"><strong>Testat</strong></label>
        <input class="form-control" type="text" placeholder="{{ testat }}" readonly>
      </div>
    </div>
    <div class="form-group">
      <label for="fragentext"><strong>Frage</strong></label>
      <textarea class="form-control" id="fragentext" name="text" rows=3 required></textarea>
    </div>
    <div id="vorhandene_fragen">
      <div id="warnung_vorhandene_fragen" style="display: none;" class="alert alert-danger" role="alert">
        Anscheinend existieren schon Fragen, die diesen Text enthalten. Bitte überprüfe, ob diese Frage <strong>wirklich, wirklich</strong> neu ist!
      </div>
      {% for frage in vorhandene_fragen %}
      <p class="vorhandene_frage" style="display: none;">{{ frage.text }}</p>
      {% endfor %}
    </div>
    <div class="form-group">
      <label for="antwort">Antwort</label>
      <textarea class="form-control" id="antwort" name="antwort" rows=3></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Erstellen</button>
  </form>
</div>
{% endblock content %}
