{% extends 'generic/base_supervisor.html' %}

{% block content %}
<div class="container py-4">
    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'generic:supervisor_overview' supervisor.pk %}">Dashboard</a></li>
            <li class="breadcrumb-item active text-muted" aria-current="page">{{ trainee.first_name }} {{ trainee.last_name }}</li>
        </ol>
    </nav>

    <!-- Trainee Profile Card -->
    <div class="card bg-dark bg-opacity-50 border-secondary mb-4">
        <div class="card-body d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div class="d-flex align-items-center gap-3">
                <div class="bg-primary bg-opacity-10 border border-primary border-opacity-25 rounded-circle p-3 d-flex align-items-center justify-content-center text-primary" style="width: 56px; height: 56px;">
                    <i class="bi bi-person-circle fs-3"></i>
                </div>
                <div>
                    <h2 class="h4 mb-0 text-light">{{ trainee.first_name }} {{ trainee.last_name }}</h2>
                    <p class="text-muted mb-0 small"><i class="bi bi-envelope me-1"></i>{{ trainee.email }}</p>
                </div>
            </div>
            
            <div class="d-flex gap-3 text-center">
                <div class="border-start border-secondary ps-3">
                    <div class="text-muted small">Grade</div>
                    <span class="badge bg-secondary mt-1">{{ trainee.userprofile.grade|default:"N/A" }}</span>
                </div>
                <div class="border-start border-secondary ps-3">
                    <div class="text-muted small">Primary Site</div>
                    <span class="text-light fs-6">{{ trainee.userprofile.site|default:"N/A" }}</span>
                </div>
                <div class="border-start border-secondary ps-3">
                    <div class="text-muted small">Attempts</div>
                    <span class="text-light fs-5 fw-semibold">{{ attempts|length }}</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Attempts Table -->
    <div class="card bg-dark bg-opacity-25 border-secondary">
        <div class="card-header bg-dark bg-opacity-50 border-secondary py-3">
            <h3 class="h5 mb-0 text-light"><i class="bi bi-list-task text-primary me-2"></i>Trainee Attempts History</h3>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-dark table-striped table-hover align-middle mb-0">
                    <thead>
                        <tr class="text-muted border-secondary">
                            <th class="ps-4">Attempt Item</th>
                            <th>Type</th>
                            <th>Date Attempted</th>
                            <th>Sharing Status</th>
                            <th>Score / Progress</th>
                            <th class="text-end pe-4">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in attempts %}
                            <tr class="border-secondary">
                                <td class="ps-4 fw-semibold">{{ item.exam }}</td>
                                <td>
                                    <span class="badge {% if item.type == 'casecollection' %}bg-primary{% else %}bg-secondary{% endif %}">
                                        {{ item.type_display }}
                                    </span>
                                </td>
                                <td class="text-muted small">{{ item.date|date:"d M Y H:i" }}</td>
                                <td>
                                    {% if item.is_shared %}
                                        <span class="badge bg-success"><i class="bi bi-eye-fill me-1"></i>Shared</span>
                                    {% else %}
                                        <span class="badge bg-secondary"><i class="bi bi-lock-fill me-1"></i>Private</span>
                                    {% endif %}
                                </td>
                                <td>
                                    {% if item.is_shared %}
                                        <span class="text-light fw-medium">{{ item.score_str }}</span>
                                    {% else %}
                                        <span class="text-muted small">Locked (Private)</span>
                                    {% endif %}
                                </td>
                                <td class="text-end pe-4">
                                    {% if item.is_shared and item.detail_url %}
                                        <a href="{{ item.detail_url }}" class="btn btn-sm btn-outline-info">
                                            <i class="bi bi-arrow-right-short me-1"></i>View Details
                                        </a>
                                    {% else %}
                                        <button class="btn btn-sm btn-outline-secondary" disabled>
                                            <i class="bi bi-lock-fill"></i> Locked
                                        </button>
                                    {%     endif %}
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="6" class="text-center py-5 text-muted">
                                    <i class="bi bi-folder2-open display-6 mb-2 d-block"></i>
                                    This trainee has not started any attempts yet.
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}