{% extends "base.html" %}
{% load static dashboard_extras %}

{% block extra_head %}
<style>
    .gf-header { display: none; }
    .gf-footer { display: none; }
    body.gf-body { background: #f8fbff; padding-top: 0; }
</style>
{% endblock %}

{% block content %}
<div class="dash-wrapper">
    {% include "dashboard/_sidebar.html" %}

    <main class="dash-main">
        <header class="dash-header">
            <div class="d-flex align-items-center">
                <button type="button" class="btn d-lg-none p-0 me-3" id="sidebarToggle" aria-label="Menu">
                    <i class="bi bi-list fs-2 text-dark"></i>
                </button>
                <h1 class="h4 mb-0 fw-bold">{{ dash_title|default:"Espace patient" }}</h1>
            </div>

            <div class="d-flex align-items-center gap-3">
                <div class="gf-nav-notif-dropdown--dash">
                    {% include "partials/gf_nav_notifications_dropdown.html" %}
                </div>

                <div class="d-flex align-items-center gap-2 ps-3 border-start">
                    <div class="text-end d-none d-sm-block">
                        <div class="fw-bold small">{{ request.user.get_full_name|default:request.user.username }}</div>
                        <div class="text-muted smaller" style="font-size: 0.75rem;">Patient</div>
                    </div>
                    {% if request.user.photo %}
                    <img src="{{ request.user.photo.url }}" class="dash-profile-img" alt="Profil">
                    {% else %}
                    <div class="dash-profile-img bg-primary d-flex align-items-center justify-content-center text-white fw-bold">
                        {{ request.user.username|first|upper }}
                    </div>
                    {% endif %}
                </div>
            </div>
        </header>

        {% block dashboard_inner %}{% endblock %}
    </main>
</div>

<form id="logout-form" method="post" action="{% url 'deconnexion' %}" class="d-none">{% csrf_token %}</form>

<script>
(function() {
    var btn = document.getElementById('sidebarToggle');
    var side = document.getElementById('dashSidebar');
    if (btn && side) {
        btn.addEventListener('click', function() { side.classList.toggle('show'); });
    }
})();
</script>
{% block dashboard_extra_js %}{% endblock %}
{% endblock %}