{% extends "admin/base.html" %}
{% load i18n static %}

{% block title %}{% trans "HR Dashboard" %} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
<h1 id="site-name">{% trans "HR Dashboard" %}</h1>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <!-- Carte des présences -->
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{% trans "Tendances de présence" %}</h3>
                </div>
                <div class="card-body">
                    <img src="data:image/png;base64,{{ attendance_chart }}" class="img-fluid" alt="Tendances de présence">
                </div>
            </div>
        </div>

        <!-- Distribution des congés -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{% trans "Distribution des congés" %}</h3>
                </div>
                <div class="card-body">
                    <img src="data:image/png;base64,{{ leave_distribution }}" class="img-fluid" alt="Distribution des congés">
                </div>
            </div>
        </div>

        <!-- Statistiques des formations -->
        <div class="col-lg-6 mb-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{% trans "État des formations" %}</h3>
                </div>
                <div class="card-body">
                    <img src="data:image/png;base64,{{ training_stats }}" class="img-fluid" alt="État des formations">
                </div>
            </div>
        </div>

        <!-- Répartition des employés -->
        <div class="col-lg-12 mb-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{% trans "Répartition des employés" %}</h3>
                </div>
                <div class="card-body">
                    <img src="data:image/png;base64,{{ employee_stats }}" class="img-fluid" alt="Répartition des employés">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Styles supplémentaires pour le tableau de bord -->
<style>
    .card {
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        margin-bottom: 1.5rem;
    }
    .card-header {
        background-color: #f8f9fa;
        border-bottom: 1px solid rgba(0,0,0,.125);
    }
    .card-title {
        margin-bottom: 0;
        font-size: 1.1rem;
        font-weight: 500;
    }
    .img-fluid {
        max-width: 100%;
        height: auto;
    }
</style>
{% endblock %}