{% extends "base.html" %}

{% block content %}
<div class="header" style="margin-bottom: 3rem; display: flex; justify-content: space-between; align-items: center;">
    <div>
        <h1 style="font-size: 2.5rem; margin-bottom: 0.5rem;">Välkommen</h1>
        <p style="color: var(--text-muted);">Här kan du hantera dina medicinska quiz.</p>
    </div>
    <div style="text-align: right;">
        <div style="font-weight: 600; font-size: 1.25rem;">{{ answered_count }} / {{ total_questions }}</div>
        <div style="font-size: 0.875rem; color: var(--text-muted);">Frågor besvarade</div>
        <div class="progress-container" style="width: 150px; margin-top: 0.5rem;">
            <div class="progress-bar"
                style="width: {% if total_questions > 0 %}{{ answered_count|add:0|floatformat:2 }}{% else %}0{% endif %}%">
            </div>
        </div>
    </div>
</div>

<h2 style="margin-bottom: 1.5rem;">Aktiva Quiz</h2>
{% if active_sessions %}
<div class="grid">
    {% for session in active_sessions %}
    <div class="glass-card session-card" id="session-{{ session.id }}">
        <div class="session-header">
            <div>
                <div class="session-title">
                    {% if session.course %}{{ session.course.name }}{% else %}Blandat Quiz{% endif %}
                </div>
                <div class="session-meta">
                    Startat {{ session.created_at|date:"Y-m-d H:i" }}
                </div>
            </div>
            <form action="{% url 'close_quiz' session.id %}" method="post" hx-post="{% url 'close_quiz' session.id %}"
                hx-target="#session-{{ session.id }}" hx-swap="outerHTML">
                {% csrf_token %}
                <button type="submit" class="btn btn-secondary"
                    style="padding: 0.25rem 0.5rem; color: #ef4444;">Stäng</button>
            </form>
        </div>

        {% if session.tags.exists %}
        <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
            {% for tag in session.tags.all %}
            <span
                style="font-size: 0.75rem; background: #e0e7ff; color: #4338ca; padding: 0.25rem 0.5rem; border-radius: 1rem;">{{
                tag.name }}</span>
            {% endfor %}
        </div>
        {% endif %}

        <div style="margin-top: auto;">
            <a href="{% url 'quiz_mode' session.id %}" class="btn btn-primary" style="width: 100%; text-align: center;">
                Fortsätt Quiz
            </a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="glass-card" style="text-align: center; color: var(--text-muted); padding: 3rem;">
    Inga aktiva quiz. Starta ett nytt nedan!
</div>
{% endif %}

<div style="margin-top: 4rem;">
    <h2 style="margin-bottom: 1.5rem;">Starta Nytt Quiz</h2>
    <div class="glass-card">
        <form method="post" action="{% url 'create_quiz' %}">
            {% csrf_token %}
            <div class="grid">
                <div class="form-group">
                    <label for="{{ form.course.id_for_label }}">Kurs</label>
                    {{ form.course }}
                </div>
                <div class="form-group">
                    <label for="{{ form.tags.id_for_label }}">Taggar</label>
                    {{ form.tags }}
                    <small style="color: var(--text-muted); margin-top: 0.25rem; display: block;">Håll ner Ctrl/Cmd för
                        att välja flera.</small>
                </div>
            </div>
            <div style="margin-top: 1rem;">
                <button type="submit" class="btn btn-primary" style="padding-left: 2rem; padding-right: 2rem;">Skapa
                    Quiz</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}