{% extends 'base.html' %}
{% load static %}

{% block title %}Test Dashboard{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
{% endblock %}

{% block content %}
<nav class="navbar">
    <a class="navbar-brand" href="#">ContestManager</a>
    <div>
        <a href="/admin" class="btn btn-outline-primary">Admin</a>
    </div>
</nav>

<div class="hero">
    <h1>Test Management Dashboard</h1>
    <p>Welcome, Admin. Manage and review programming problems.</p>
</div>

<div class="container mt-5">
    <h2>Available Problems</h2>
    {% if problems %}
    <div class="problem-grid mt-4">
        {% for problem in problems %}
        <div class="problem-card">
            <h3>{{ problem.title }}</h3>
            <div class="problem-meta">
                <span><strong>Author:</strong> {{ problem.author }}</span>
                <span class="level-badge level-{{ problem.level|lower }}">{{ problem.level }}</span>
            </div>
            <p class="mt-3">{{ problem.description|truncatewords:20 }}</p>
            <a href="{% url 'core:problem_detail' problem.pk %}" class="btn btn-sm btn-primary">View Details</a>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="text-center p-5">
        <p>No problems found. <a href="/admin/core/problem/add/">Add a new problem</a> in the admin panel to get started.</p>
    </div>
    {% endif %}
</div>
{% endblock %}
