{% extends 'base.html.twig' %}

{% block title %}Fragenkatalog{% endblock %}

{% block body %}
    <h1>Fragenkatalog</h1>
    <p id="instruction">Bitte entscheiden Sie sich für eine Antwort und speichern Sie diese. Andernfalls gilt die Frage als nicht beantwortet. Sie können jederzeit von einer Frage zu einer anderen Frage und wieder zurück navigieren. Auch bereits gespeicherte Antworten können Sie später bei Bedarf noch einmal bearbeiten und erneut speichern, solange die Bearbeitung des Fragenkataloges noch nicht abgeschlossen wurde. Das Abschließen des Fragebogens ist nur möglich, wenn alle Fragen beantwortet wurden.</p>
    <form method="post" class="form form--catalogue">
        <div class="question-count">
            <p>Frage: <span data-js="order-no">{{ catalogueDetail.orderNo }}</span>/{{ catalogue.numDetails }}</p>
            <div class="progressbar" data-js="progressbar">
                <div style="width: calc({{ catalogue.numAnswers }} / {{ catalogue.numDetails }} * 100%);"></div>
            </div>
        </div>
        <div class="form--wrapper form--question">
            <h3 data-js="question-type">Handlungsfeld: <span>{{ questionType.type }}</span></h3>
            <h2 data-js="question-text">{{ question.questionText }}</h2>
        </div>
        <div class="form--wrapper form-wrapper--container">
            <div class="form--wrapper form--checkbox">
                <label for="inputAnswer1"><input type="radio" id="inputAnswer1" name="answer" value="irrelevant" {{ catalogueDetail.answer == 'irrelevant' ? 'checked' : '' }} />(A) Derzeit für meine Organisation nicht relevant</label>
                <label for="inputAnswer2"><input type="radio" id="inputAnswer2" name="answer" value="not_fulfilled" {{ catalogueDetail.answer == 'not_fulfilled' ? 'checked' : '' }} />(B) Nicht erfüllt</label>
                <label for="inputAnswer3"><input type="radio" id="inputAnswer3" name="answer" value="partly_fulfilled" {{ catalogueDetail.answer == 'partly_fulfilled' ? 'checked' : '' }} />(C) Teilweise erfüllt</label>
                <label for="inputAnswer4"><input type="radio" id="inputAnswer4" name="answer" value="widely_fulfilled" {{ catalogueDetail.answer == 'widely_fulfilled' ? 'checked' : '' }} />(D) Weitgehend erfüllt</label>
                <label for="inputAnswer5"><input type="radio" id="inputAnswer5" name="answer" value="fulfilled" {{ catalogueDetail.answer == 'fulfilled' ? 'checked' : '' }} />(E) Umfassend erfüllt</label>
            </div>
            <div class="form--wrapper left">
                <label for="inputNote">Feststellung/Anmerkung</label>
                <textarea cols="50" rows="5" id="inputNote" name="note" placeholder="Hier können Sie wichtige Feststellungen dokumentieren und wie Sie zu dieser Bewertung gekommen sind.">{{ catalogueDetail.note }}</textarea>
            </div>
        </div>
        <div class="catalogue-nav">
            <span>
                <span class="btn btn--inverse" data-js="last-question" data-openquestion="yes">Letzte offene Frage</span>
                <span class="btn" data-js="last-question" data-openquestion="no">Vorherige Frage</span>
            </span>
            <div class="save">
                <span class="btn btn--correct" data-js="save-question">Antwort speichern</span>
            </div>
            <span>
                <span class="btn" data-js="next-question" data-openquestion="no">Nächste Frage</span>
                <span class="btn btn--inverse" data-js="next-question" data-openquestion="yes">Nächste offene Frage</span>
            </span>
        </div>
        <div class="form--wrapper">
            <button class="btn" {{ catalogue.numDetails != catalogue.numAnswers ? 'disabled' : ''}} data-js="finish-catalogue">Fragenkatalog abschließen</button>
        </div>
    </form>
{% endblock %}