{% extends "Includes/layout.html.twig" %}

{% block body %}
<main class="row main mx-0" id="demo_golden_quiz" v-cloak>
    <section class="content-area p-r-l-6 fade-in">
        <div class="pb-4 container rounded-2 px-0 page-header">
            <h3 class="d-flex align-items-center text-primary">
                <i class="far fa-1x fa-sparkles mr-3"></i>
                Demo Golden Quiz
            </h3>
        </div>
        <div class="container bg-white p-5 border rounded shadow-1">
            <form action="">
                <form-input id="jobTitle"
                            v-model="jobTitle"
                            label="{{ 'Job title'|trans }}"
                            type="text"
                            :disabled="loading"
                            class="mb-3"
                ></form-input>
                <form-input id="jobDescription"
                            v-model="jobDescription"
                            label="{{ 'Description'|trans }}"
                            type="textarea"
                            :disabled="loading"
                            :text-area-rows="10"
                            class="mb-3"
                ></form-input>
                <form-input id="nbQuizQuestions"
                            v-model.number="nbQuizQuestions"
                            label="{{ 'Number of questions'|trans }} (max 10)"
                            type="number"
                            :disabled="loading"
                            :max="maxQuizQuestions"
                            :min="1"
                            class="mb-5"
                ></form-input>
                <button v-if="!loading" type="submit" class="btn btn-primary rounded-30 px-5 py-2 d-flex align-items-center" :disabled="isBtnGenerateDisabled" @click.prevent="generateQuizQuestions()">
                    <i class="fa fa-wand-magic mr-2"></i>
                    {{ 'Generate a quiz'|trans }}
                </button>
                 <button v-else type="submit" class="btn btn-info rounded-30 px-5 py-2 d-flex align-items-center" disabled>
                      <i class="fa fa-spinner fa-spin mr-2"></i>
                      {{ 'Generation in progress'|trans }}
                 </button>
            </form>

            <div class="bg-light p-3 fade-in mt-5" v-if="loading">
                <div v-for="key in nbQuizQuestions" :key="key"
                     :class="[key !== nbQuizQuestions ? 'mb-3' : '', 'loading-container-animation rounded shadow-sm fade-in']"
                     style="height: 200px"></div>
            </div>
            <div v-if="!loading && generatedQuiz.length > 0" class="pt-5 border-top mt-5">
                <h4 class="mb-4 d-flex align-items-center">
                    <i class="far fa-1x fa-ballot-check mr-3"></i>
                    {{ 'Quiz preview'|trans }}
                </h4>
                <golden-quiz-question :questions="generatedQuiz"></golden-quiz-question>
            </div>
        </div>
    </section>
    <span class="d-none invisible twig-data-path-golden-quiz-generate" data-path-golden-quiz-generate="{{ path('ajax_demo_golden_quiz_question_generate') }}"></span>
</main>
{% endblock %}
{% block specificJS %}
    {{ encore_entry_script_tags('admin-demo-golden-quiz') }}
{% endblock %}