{% extends 'base.html' %}

{% block content %}
<h1>Übersicht</h1>
<div class="flex justify-end">
    <a href="{% url 'library:new_quiz' %}" class="text-white bg-blue-500 text-white px-4 py-2 rounded-md mb-12">Neues Quiz erstellen</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for quiz in quizzes %}
    <div class="bg-white rounded-lg p-4 shadow-md   border-blue-600 border-2 rounded-xl shadow-md  ">
        <h2 class="text-lg font-bold"><a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
        <p class="text-sm text-gray-600 my-8">{{ quiz.description }}</p>
        <a href="#"class="qp-a-button-small bg-green-500 text-white ">Spiel starten</a>
        <button><a href="{% url 'library:edit_quiz' quiz.id %}"class="qp-a-button-small bg-indigo-500 text-white">Bearbeiten</a></button>
        <a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small bg-purple-500 text-white">Löschen</a>
    </div>
    {% endfor %}
</div>
{% endblock %}