{% extends 'base.html' %}


{% block content %}




<div class="dark input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12 dark:text-white! dark:bg-transparent!">
    <form method="post" enctype="multipart/form-data" class="dark-form ">
        {% csrf_token %}
        {{ form.as_p }}

        {% if form.instance.image %}
        <img src="{{ form.instance.image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
        <label for="reset_image">
            <input type="checkbox" name="reset_image" id="reset_image">
            Bild zurücksetzen
        </label>
        {% endif %}
        <div>
            <label class="font-bold" for="quiz_image">Bild:</label>
            <input  class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="quiz_image" id="quiz_image">
        </div>

       <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
            <label class=''>Mit der Erstellung von diesem Quiz stimmen Sie der <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a> zu.</label>
        </div>

        <div class="flex justify-center space-x-3">
            <a href="{% if object.quiz_id %}{% url 'library:detail_quiz' object.quiz_id.id %}{% else %}{% url 'library:overview_quiz' %}{% endif %}" 
               class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Abbrechen
            </a>
            <button type="submit" 
                    class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                Speichern
            </button>
        </div>
    </form>
</div>
{% endblock %}