{% extends 'base.html' %}
{% block extra_css %}
<style>
    /* ============================================
       EXAMS - NIX EXAMINATION BRANDING
       ============================================ */
    
    .exams-header {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.75rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--nix-border);
    }

    .exams-header h2 {
        font-weight: 800;
        margin-bottom: 0;
        color: var(--nix-black);
        font-size: 1.75rem;
    }

    .exams-header h2 i {
        color: var(--nix-red);
        margin-right: .5rem;
    }

    /* Buttons */
    .btn-primary {
        background: var(--nix-red);
        border: none;
        color: #fff;
        padding: .6rem 1.5rem;
        border-radius: var(--nix-radius);
        font-weight: 600;
        transition: var(--nix-transition);
        box-shadow: var(--nix-shadow-red);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .btn-primary:hover {
        background: var(--nix-red-dark);
        transform: translateY(-2px);
        box-shadow: var(--nix-shadow-red-lg);
        color: #fff;
    }

    .btn-outline-danger {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: transparent;
        padding: .6rem 1.5rem;
        border-radius: var(--nix-radius);
        font-weight: 600;
        transition: var(--nix-transition);
        display: inline-flex;
        align-items: center;
        gap: .5rem;
    }

    .btn-outline-danger:hover {
        background: var(--nix-red);
        color: #fff;
        border-color: var(--nix-red);
        transform: translateY(-2px);
        box-shadow: var(--nix-shadow-red);
    }

    .btn-outline-danger:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

    .btn-outline-secondary {
        border-color: var(--nix-border);
        color: var(--nix-text);
        background: transparent;
        transition: var(--nix-transition);
        padding: .35rem .65rem;
        border-radius: var(--nix-radius);
        font-size: .8rem;
    }

    .btn-outline-secondary:hover {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: var(--nix-red-light);
        transform: translateY(-1px);
    }

    .btn-outline-danger-sm {
        border-color: var(--nix-red);
        color: var(--nix-red);
        background: transparent;
        padding: .35rem .65rem;
        border-radius: var(--nix-radius);
        font-size: .8rem;
        transition: var(--nix-transition);
    }

    .btn-outline-danger-sm:hover {
        background: var(--nix-red);
        color: #fff;
        border-color: var(--nix-red);
        transform: translateY(-1px);
    }

    .btn-sm {
        padding: .35rem .65rem;
        font-size: .8rem;
        border-radius: var(--nix-radius);
    }

    /* Table */
    .table-modern thead th {
        border-top: none;
        border-bottom: 1px solid var(--nix-border);
        color: var(--nix-muted);
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .06em;
        font-weight: 700;
        padding: .85rem 1rem;
    }

    .table-modern td {
        vertical-align: middle;
        border-color: var(--nix-border);
        padding: .85rem 1rem;
        font-size: .9rem;
        color: var(--nix-text);
    }

    .table-modern tbody tr {
        transition: background var(--nix-transition);
    }

    .table-modern tbody tr:hover {
        background: var(--nix-bg);
    }

    /* Status Badge */
    .status-badge {
        border-radius: 999px;
        padding: .3rem .75rem;
        font-weight: 600;
        font-size: .72rem;
        text-transform: capitalize;
        display: inline-block;
    }

    .status-badge.completed {
        background: var(--nix-green-light);
        color: var(--nix-green-dark);
    }

    .status-badge.generating {
        background: #fef3c7;
        color: #92400e;
    }

    .status-badge.failed {
        background: var(--nix-red-light);
        color: var(--nix-red-dark);
    }

    .status-badge.draft {
        background: var(--nix-bg);
        color: var(--nix-muted);
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 3.5rem 1rem;
    }

    .empty-state .empty-icon {
        width: 68px;
        height: 68px;
        border-radius: var(--nix-radius-lg);
        margin: 0 auto 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        color: var(--nix-red);
        background: var(--nix-red-light);
    }

    .empty-state h5 {
        font-weight: 800;
        margin-bottom: .5rem;
        color: var(--nix-black);
        font-size: 1.1rem;
    }

    .empty-state p {
        color: var(--nix-muted);
        margin-bottom: 1.5rem;
        font-size: .95rem;
    }

    /* Card */
    .card {
        border: 1px solid var(--nix-border);
        border-radius: var(--nix-radius-lg);
        background: var(--nix-white);
        box-shadow: var(--nix-shadow-sm);
        transition: var(--nix-transition);
    }

    .card:hover {
        box-shadow: var(--nix-shadow);
    }

    .card-body {
        padding: 1.5rem;
    }

    /* Bulk Actions */
    .bulk-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: .75rem;
        padding: 0 .25rem;
    }

    .bulk-actions .text-muted {
        color: var(--nix-muted) !important;
        font-size: .78rem;
    }

    .form-check-input {
        border-color: var(--nix-border);
        border-radius: 4px;
        cursor: pointer;
        transition: var(--nix-transition);
    }

    .form-check-input:checked {
        background-color: var(--nix-red);
        border-color: var(--nix-red);
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 2px rgba(180, 0, 0, .15);
    }

    /* ============================================
       RESPONSIVE
       ============================================ */
    @media (max-width: 768px) {
        .exams-header {
            flex-direction: column;
            align-items: stretch;
            gap: .75rem;
        }

        .exams-header h2 {
            font-size: 1.4rem;
        }

        .exams-header .d-flex {
            flex-direction: column;
            gap: .5rem;
        }

        .exams-header .d-flex .btn,
        .exams-header .d-flex form {
            width: 100%;
        }

        .exams-header .d-flex .btn {
            justify-content: center;
        }

        .card-body {
            padding: 1rem;
        }

        .table-modern {
            font-size: .8rem;
        }

        .table-modern thead th,
        .table-modern td {
            padding: .5rem .35rem;
        }

        .table-modern td .btn {
            padding: .25rem .4rem;
            font-size: .7rem;
        }

        .bulk-actions {
            flex-direction: column;
            align-items: stretch;
            gap: .5rem;
        }

        .bulk-actions .text-muted {
            text-align: center;
        }

        .empty-state {
            padding: 2.5rem 1rem;
        }

        .empty-state .empty-icon {
            width: 56px;
            height: 56px;
            font-size: 1.3rem;
        }

        .empty-state h5 {
            font-size: 1rem;
        }
    }

    @media (max-width: 576px) {
        .exams-header h2 {
            font-size: 1.2rem;
        }

        .table-modern thead th {
            font-size: .6rem;
            padding: .4rem .25rem;
        }

        .table-modern td {
            padding: .4rem .25rem;
            font-size: .75rem;
        }

        .table-modern td .btn {
            padding: .15rem .3rem;
            font-size: .65rem;
        }

        .status-badge {
            font-size: .6rem;
            padding: .2rem .5rem;
        }

        .card-body {
            padding: .75rem;
        }

        .empty-state {
            padding: 2rem .5rem;
        }

        .empty-state .empty-icon {
            width: 48px;
            height: 48px;
            font-size: 1.1rem;
        }
    }
</style>
{% endblock %}

{% block content %}

<!-- ============================================
     HEADER
     ============================================ -->
<div class="exams-header">
    <h2><i class="fas fa-file-alt"></i> My Exams</h2>
    <div class="d-flex gap-2">
        {% if exams %}
        <form method="POST" action="{{ url_for('exams.delete_all') }}"
              onsubmit="return confirm('Delete all {{ exams|length }} exam(s)? This cannot be undone.');">
            <button type="submit" class="btn-outline-danger">
                <i class="fas fa-trash me-1"></i> Delete All
            </button>
        </form>
        {% endif %}
        <a href="{{ url_for('exams.create') }}" class="btn-primary">
            <i class="fas fa-plus me-1"></i> Create New Exam
        </a>
    </div>
</div>

<!-- ============================================
     EXAMS TABLE
     ============================================ -->
{% if exams %}
<form method="POST" action="{{ url_for('exams.delete_selected') }}" id="bulkForm"
      onsubmit="return confirm('Delete the ' + document.querySelectorAll('.row-check:checked').length + ' selected exam(s)? This cannot be undone.');">

<div class="card">
    <div class="card-body">
        <!-- Bulk Actions -->
        <div class="bulk-actions">
            <button type="submit" class="btn-outline-danger btn-sm" id="bulkDeleteBtn" disabled>
                <i class="fas fa-trash me-1"></i> Delete selected <span id="bulkCount"></span>
            </button>
            <span class="text-muted">Tick rows to delete several at once.</span>
        </div>

        <!-- Table -->
        <div class="table-responsive">
            <table class="table table-modern table-hover mb-0 align-middle">
                <thead>
                    <tr>
                        <th style="width:32px;">
                            <input type="checkbox" id="checkAll" class="form-check-input" title="Select all">
                        </th>
                        <th>Title</th>
                        <th>Subject</th>
                        <th>Class</th>
                        <th>Marks</th>
                        <th>Status</th>
                        <th>Date</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for exam in exams %}
                    <tr>
                        <td>
                            <input type="checkbox" name="exam_ids" value="{{ exam.id }}" class="form-check-input row-check">
                        </td>
                        <td class="fw-semibold">{{ exam.title }}</td>
                        <td>{{ exam.subject.name if exam.subject else 'N/A' }}</td>
                        <td>{{ exam.exam_class }}</td>
                        <td>{{ exam.total_marks }}</td>
                        <td>
                            <span class="status-badge {{ exam.status }}">
                                {{ exam.status }}
                            </span>
                        </td>
                        <td class="text-muted">{{ exam.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                        <td class="text-end">
                            <div class="d-inline-flex gap-1 align-items-center">
                                <a href="{{ url_for('exams.view', exam_id=exam.id) }}" class="btn-outline-secondary" title="View">
                                    <i class="fas fa-eye"></i>
                                </a>
                                {% if exam.status == 'completed' %}
                                <a href="{{ url_for('exams.download', exam_id=exam.id, format='pdf') }}" class="btn-outline-secondary" title="Download PDF">
                                    <i class="fas fa-file-pdf"></i>
                                </a>
                                <a href="{{ url_for('exams.download', exam_id=exam.id, format='docx') }}" class="btn-outline-secondary" title="Download Word">
                                    <i class="fas fa-file-word"></i>
                                </a>
                                {% endif %}
                                <button type="submit" form="del-{{ exam.id }}" class="btn-outline-danger-sm" title="Delete">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

</form>

<!-- Per-row delete forms -->
{% for exam in exams %}
<form id="del-{{ exam.id }}" method="POST" action="{{ url_for('exams.delete', exam_id=exam.id) }}"
      onsubmit="return confirm('Delete &quot;{{ exam.title|e }}&quot;? This cannot be undone.');"></form>
{% endfor %}

<!-- ============================================
     BULK SELECT JAVASCRIPT
     ============================================ -->
<script>
(function () {
    var all = document.getElementById('checkAll');
    var rows = document.querySelectorAll('.row-check');
    var btn = document.getElementById('bulkDeleteBtn');
    var count = document.getElementById('bulkCount');

    function sync() {
        var n = document.querySelectorAll('.row-check:checked').length;
        btn.disabled = n === 0;
        count.textContent = n ? '(' + n + ')' : '';
        if (all) {
            all.checked = n > 0 && n === rows.length;
            all.indeterminate = n > 0 && n < rows.length;
        }
    }

    if (all) {
        all.addEventListener('change', function () {
            rows.forEach(function (c) { c.checked = all.checked; });
            sync();
        });
    }

    rows.forEach(function (c) {
        c.addEventListener('change', sync);
    });

    sync();
})();
</script>

<!-- ============================================
     EMPTY STATE
     ============================================ -->
{% else %}
<div class="card">
    <div class="card-body">
        <div class="empty-state">
            <div class="empty-icon"><i class="fas fa-file-circle-plus"></i></div>
            <h5>No exams yet</h5>
            <p>Generate your first KCSE or CBC paper in a couple of minutes.</p>
            <a href="{{ url_for('exams.create') }}" class="btn-primary">
                <i class="fas fa-plus me-1"></i> Create your first exam
            </a>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}