{% extends 'base.html' %}

{% block content %}
<div class="flex justify-end mr-2">
    <a href="{% url 'library:new_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black mb-12">Neues Quiz erstellen</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">    <h1 class="font-bold mb-4">meine eigenen Quiz</h1></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
    {% for quiz in quizzes %}
    <div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl">
        <h2 class="text-lg font-bold"><a href="{% url 'library:edit_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
        <p class="text-sm text-gray-600 py-12">{{ quiz.description }} <br> Status: <span class="font-bold">{{ quiz.status }}</span>
            <br> Schwierigkeit:<span class="font-bold"> {{ quiz.difficulty }}</span>  </p>

        <div>
            <div class="flex justify-between items-center gap-2">
                <a href="#" class="qp-a-button-small border-2 border-blue-600 text-black">Spiel starten</a>
                
                <div class="flex gap-2">
                    <a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x270F;</a>
                    <a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x1F5D1;</a>
                </div>
            </div>
        </div>
    </div>

    {% endfor %}
</div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">    <h1 class="font-bold mt-8 mb-4">Quiz von anderen Nutzern</h1></div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
    {% for quiz in all_quizzes %}
    
    <div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl">
        <h2 class="text-lg font-bold">{{ quiz.name }}</h2>
        <p class="text-sm text-gray-600 py-12">{{ quiz.description }} <br> Schwierigkeit:<span class="font-bold"> {{ quiz.difficulty }}</span></p>
        <div>
            <div class="flex justify-between items-center gap-2">
                <a href="#" class="qp-a-button-small border-2 border-blue-600 text-black">Spiel starten</a>
                <div class="flex gap-2">
                    
                    <div class="qp-a-button-small text-gray-600 text-sm "> Quiz von {{ quiz.user_id }}</div>
                </div>

            </div>
        </div>
    </div>
    {% endfor %}
</div>
 
{% endblock %}