{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/sidebar.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/feed.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/post.css') }}">
<link rel="stylesheet" href="{{ static_url('/static/css/quiz.css') }}">
{% endblock %}
{% block content %}
<h1 class="quiz-page-title">Quizzes</h1>
<div class="feed-layout">
    <aside class="sidebar-card" role="complementary" aria-label="Quiz filters">
        {% set _action = "/quizzes" %}{% set _placeholder = "Search quizzes..." %}{% set _hidden = {"filter": current_filter} %}{% include "_sidebar_search.html" %}

        <div class="sidebar-heading">Filters</div>
        <div class="sidebar-nav">
            <a href="/quizzes?filter=all" class="sidebar-link {% if current_filter == 'all' %}active{% endif %}">
                <span class="icon">🧩</span> All <span class="quiz-filter-count">{{ counts.get('all', 0) }}</span>
            </a>
            {% if user %}
            <a href="/quizzes?filter=todo" class="sidebar-link {% if current_filter == 'todo' %}active{% endif %}">
                <span class="icon">📌</span> To do <span class="quiz-filter-count">{{ counts.get('todo', 0) }}</span>
            </a>
            <a href="/quizzes?filter=done" class="sidebar-link {% if current_filter == 'done' %}active{% endif %}">
                <span class="icon">✅</span> Completed <span class="quiz-filter-count">{{ counts.get('done', 0) }}</span>
            </a>
            <a href="/quizzes?filter=mine" class="sidebar-link {% if current_filter == 'mine' %}active{% endif %}">
                <span class="icon">✍️</span> Mine <span class="quiz-filter-count">{{ counts.get('mine', 0) }}</span>
            </a>
            <a href="/quizzes?filter=drafts" class="sidebar-link {% if current_filter == 'drafts' %}active{% endif %}">
                <span class="icon">📝</span> Drafts <span class="quiz-filter-count">{{ counts.get('drafts', 0) }}</span>
            </a>
            {% endif %}
        </div>

        {% if not user %}
        <div class="sidebar-section">
            <a href="/auth/login" class="sidebar-link"><span class="icon">🔑</span> Log in to play</a>
        </div>
        {% endif %}
    </aside>

    <div class="feed-main">
        {% include "_quiz_actions.html" %}

        <div class="feed-posts" role="feed" aria-label="Quizzes">
            {% for item in quizzes %}
            {% include "_quiz_card.html" %}
            {% else %}
            <div class="empty-state">No quizzes here yet. Create the first one.</div>
            {% endfor %}
        </div>

        {% set pagination_query = "filter=" ~ current_filter ~ "&" ~ ("search=" ~ search ~ "&" if search else "") %}
        {% include "_pagination.html" %}
    </div>

    <aside class="feed-right" role="complementary" aria-label="Quiz scoreboard">
        {% include "_quiz_scoreboard.html" %}
    </aside>
</div>
{% endblock %}
