{% extends "admin/base_site.html" %}
{% load static %}

{% block extrahead %}
{{ block.super }}
<style>
    .dashboard-container {
        padding: 20px;
    }
    .stat-card {
        background: #fff;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .stat-card h3 {
        margin: 0 0 15px 0;
        color: #417690;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .stat-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
    }
    .stat-item {
        text-align: center;
        padding: 15px;
        background: #f8f9fa;
        border-radius: 6px;
    }
    .stat-value {
        font-size: 28px;
        font-weight: bold;
        color: #417690;
    }
    .stat-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
        margin-top: 5px;
    }
    .table-responsive {
        overflow-x: auto;
    }
    table.dashboard-table {
        width: 100%;
        border-collapse: collapse;
    }
    table.dashboard-table th,
    table.dashboard-table td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #eee;
    }
    table.dashboard-table th {
        background: #f8f9fa;
        font-weight: 600;
        font-size: 12px;
        text-transform: uppercase;
        color: #666;
    }
    .status-badge {
        display: inline-block;
        padding: 3px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        color: white;
    }
    .status-completed, .status-synced { background: #5cb85c; }
    .status-running, .status-pending { background: #f0ad4e; }
    .status-failed { background: #d9534f; }
    .status-cancelled { background: #777; }
    .btn-action {
        display: inline-block;
        padding: 8px 16px;
        background: #417690;
        color: white;
        text-decoration: none;
        border-radius: 4px;
        font-size: 13px;
        border: none;
        cursor: pointer;
    }
    .btn-action:hover {
        background: #205067;
        color: white;
    }
    .btn-action.btn-secondary {
        background: #6c757d;
    }
    .btn-action.btn-danger {
        background: #d9534f;
    }
    .nav-tabs {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #eee;
        padding-bottom: 10px;
    }
    .nav-tabs a {
        padding: 8px 16px;
        text-decoration: none;
        color: #666;
        border-radius: 4px;
    }
    .nav-tabs a.active, .nav-tabs a:hover {
        background: #417690;
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard-container">
    <div class="nav-tabs">
        <a href="{% url 'dashboard:index' %}" {% if request.resolver_match.url_name == 'index' %}class="active"{% endif %}>Overview</a>
        <a href="{% url 'dashboard:stats' %}" {% if request.resolver_match.url_name == 'stats' %}class="active"{% endif %}>Statistics</a>
        <a href="{% url 'dashboard:scraper_status' %}" {% if request.resolver_match.url_name == 'scraper_status' %}class="active"{% endif %}>Scrapers</a>
        <a href="{% url 'dashboard:sync_status' %}" {% if request.resolver_match.url_name == 'sync_status' %}class="active"{% endif %}>CloudKit Sync</a>
        <a href="{% url 'dashboard:review_queue' %}" {% if request.resolver_match.url_name == 'review_queue' %}class="active"{% endif %}>Review Queue{% if pending_reviews %} ({{ pending_reviews }}){% endif %}</a>
    </div>
    {% block dashboard_content %}{% endblock %}
</div>
{% endblock %}