{% extends "base.html" %}

{% block content %}
<style>
    .filter-section {
        margin-bottom: 20px;
    }

    .tag-chip {
        display: inline-block;
        padding: 5px 12px;
        margin: 4px;
        border-radius: 16px;
        background: #e0e0e0;
        text-decoration: none;
        color: #333;
        font-size: 14px;
        transition: background 0.2s;
    }

    .tag-chip.active {
        background: #4CAF50;
        color: white;
    }

    .tag-chip:hover {
        background: #d5d5d5;
    }

    .tag-chip.active:hover {
        background: #45a049;
    }
</style>

<h1>Quiz Application</h1>

<div class="filter-section">
    <a href="{% url 'create_quiz' %}" class="tag-chip" style="background: #2196F3; color: white;">+ New Quiz</a>
    <a href="?tag=" class="tag-chip {% if not current_tag %}active{% endif %}">All</a>
    {% for tag in tags %}
    <a href="?tag={{ tag.slug }}" class="tag-chip {% if current_tag == tag.slug %}active{% endif %}">
        {{ tag.name }}
    </a>
    {% endfor %}
</div>

<div class="progress">
    <div class="progress-bar"
        style="width: {% if total_questions > 0 %}{{ answered_count|floatformat:0 }}{% else %}0{% endif %}%"></div>
</div>
<p>Besvarade frågor: {{ answered_count }} / {{ total_questions }}</p>
<div id="quiz-container" hx-get="{% url 'next_question' %}" hx-trigger="load"></div>
{% endblock %}