{% extends 'core/dashboard-layout.html.twig' %}

{% block title %}Mes Notes - Portail Étudiant{% endblock %}

{# Configuration spécifique à l'étudiant #}
{% set header_icon = 'fa-graduation-cap' %}
{% set header_title = 'Centre Informatique' %}
{% set notification_count = '3' %}
{% set user_role = 'Étudiant M2' %}
{% set offcanvas_title = 'UniPortal' %}
{% set notifications_url = path('app_notifications') %}

{% block dashboard_content %}
    <!-- Grades Section -->
    <div class="card animate-slide-in">
        <div class="card-header">
            <h2 class="section-title">
                <i class="fas fa-chart-bar"></i>
                Historique des Notes
            </h2>
            <div class="header-actions">
                <select class="form-control">
                    <option>Tous les semestres</option>
                    <option>Semestre 6</option>
                    <option>Semestre 5</option>
                    <option>Semestre 4</option>
                </select>
                <button class="btn btn-primary">
                    <i class="fas fa-download"></i>
                    Exporter
                </button>
            </div>
        </div>

        <div class="table-container">
            <table class="table">
                <thead>
                    <tr>
                        <th>UE / Matière</th>
                        <th>Note 1</th>
                        <th>Note 2</th>
                        <th>Note 3</th>
                        <th>Rattrapage</th>
                        <th>Moyenne</th>
                        <th>Crédits</th>
                        <th>Statut</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Analyse 2</td>
                        <td>14</td>
                        <td>16</td>
                        <td>15</td>
                        <td>-</td>
                        <td>15</td>
                        <td>3</td>
                        <td><span class="badge badge-success">Validé</span></td>
                        <td><button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button></td>
                    </tr>
                    <tr>
                        <td>Programmation Web</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                        <td>-</td>
                        <td>13</td>
                        <td>2</td>
                        <td><span class="badge badge-success">Validé</span></td>
                        <td><button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button></td>
                    </tr>
                    <tr>
                        <td>Probabilités</td>
                        <td>8</td>
                        <td>10</td>
                        <td>11</td>
                        <td>13</td>
                        <td>10.5</td>
                        <td>2</td>
                        <td><span class="badge badge-warning">Validé</span></td>
                        <td><button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button></td>
                    </tr>
                    <tr>
                        <td>Anglais</td>
                        <td>15</td>
                        <td>16</td>
                        <td>14</td>
                        <td>-</td>
                        <td>15</td>
                        <td>1</td>
                        <td><span class="badge badge-success">Validé</span></td>
                        <td><button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button></td>
                    </tr>
                    <tr>
                        <td>Algorithmique</td>
                        <td>11</td>
                        <td>13</td>
                        <td>14</td>
                        <td>-</td>
                        <td>12.5</td>
                        <td>2</td>
                        <td><span class="badge badge-success">Validé</span></td>
                        <td><button class="btn btn-secondary btn-sm"><i class="fas fa-eye"></i></button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="dashboard-grid">
        <div class="stat-card animate-fade-in">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <div class="badge badge-success">
                    <i class="fas fa-arrow-up"></i>
                    +0.5
                </div>
            </div>
            <div class="stat-value">14.2</div>
            <div class="stat-label">Moyenne Générale</div>
        </div>
        
        <div class="stat-card animate-fade-in">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-trophy"></i>
                </div>
                <div class="badge badge-success">
                    <i class="fas fa-check"></i>
                    Validé
                </div>
            </div>
            <div class="stat-value">18</div>
            <div class="stat-label">UE Validées</div>
        </div>
        
        <div class="stat-card animate-fade-in">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-star"></i>
                </div>
                <div class="badge badge-warning">
                    <i class="fas fa-exclamation"></i>
                    Attention
                </div>
            </div>
            <div class="stat-value">2</div>
            <div class="stat-label">UE en Rattrapage</div>
        </div>
        
        <div class="stat-card animate-fade-in">
            <div class="stat-header">
                <div class="stat-icon">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="badge badge-info">
                    <i class="fas fa-clock"></i>
                    Prochain
                </div>
            </div>
            <div class="stat-value">3</div>
            <div class="stat-label">Examens à Venir</div>
        </div>
    </div>

    <!-- Charts Section -->
    <div class="card animate-slide-in">
        <div class="card-header">
            <h2 class="section-title">
                <i class="fas fa-chart-area"></i>
                Évolution des Notes
            </h2>
        </div>
        <div class="card-body">
            <p class="text-center text-muted">
                <i class="fas fa-chart-line fa-2x"></i><br>
                Graphique d'évolution des notes par semestre
            </p>
        </div>
    </div>
{% endblock %}