<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="theme-color" content="#8B0000">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>{% block title %}Rapha-Bethel BNPS{% endblock %}</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/custom.css' %}">
    {% block extra_css %}{% endblock %}
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon"       href="{% static 'img/favicon.ico' %}">
    <link rel="icon" type="image/png" sizes="16x16"  href="{% static 'img/favicon-16.png' %}">
    <link rel="icon" type="image/png" sizes="32x32"  href="{% static 'img/favicon-32.png' %}">
    <link rel="icon" type="image/png" sizes="192x192" href="{% static 'img/favicon-192.png' %}">
    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'img/apple-touch-icon.png' %}">
</head>
<body>
{% load static %}

<!-- TOP BAR -->
<header class="rb-topbar">
    {% if user.is_authenticated %}
    <button class="rb-menu-toggle" id="sidebarToggle" aria-label="Toggle menu">
        <span></span><span></span><span></span>
    </button>
    {% endif %}
    <a href="/portal" class="rb-brand">
        <picture>
            <source srcset="{% static 'admin/img/logo-nav.webp' %}" type="image/webp">
            <img src="{% static 'admin/img/logo-nav.png' %}" alt="Rapha-Bethel" width="34" height="34">
        </picture>
        <div>
            <span class="rb-brand-text">Rapha-Bethel</span>
            <span class="rb-brand-sub">BNPS · Douala</span>
        </div>
    </a>
    <div class="rb-topbar-actions">
        {% if user.is_authenticated %}
        <a href="{% url 'communication:announcement_list' %}" class="rb-topbar-btn" title="Announcements">
            <i class="fas fa-bullhorn"></i>
        </a>
        <a href="{% url 'dashboard' %}" class="rb-topbar-btn" title="Dashboard">
            <i class="fas fa-th-large"></i>
        </a>
        <div class="rb-avatar" title="{{ user.get_full_name|default:user.username }}">
            {{ user.get_full_name|default:user.username|first|upper }}
        </div>
        {% else %}
        <a href="{% url 'staff:login' %}" class="rb-topbar-btn"><i class="fas fa-sign-in-alt"></i></a>
        {% endif %}
    </div>
</header>

{% if user.is_authenticated %}
<div class="rb-overlay" id="sidebarOverlay"></div>
<aside class="rb-sidebar" id="sidebar">{% include 'includes/sidebar.html' %}</aside>

<!-- MOBILE BOTTOM TAB BAR -->
<nav class="rb-bottom-nav" aria-label="Quick navigation">
    <a href="{% url 'dashboard' %}" class="rb-tab {% if request.path == '/dashboard/' %}active{% endif %}">
        <i class="fas fa-th-large"></i><span>Home</span>
    </a>
    <a href="{% url 'students:student_list' %}" class="rb-tab {% if '/students/' in request.path %}active{% endif %}">
        <i class="fas fa-user-graduate"></i><span>Students</span>
    </a>
    {% if user.staff_profile.role in 'bursar,proprietor,admin,head_master,head_mistress' %}
    <a href="{% url 'finance:bursar_dashboard' %}" class="rb-tab {% if '/finance/' in request.path %}active{% endif %}">
        <i class="fas fa-coins"></i><span>Finance</span>
    </a>
    {% else %}
    <a href="{% url 'academics:class_list' %}" class="rb-tab {% if '/academics/' in request.path %}active{% endif %}">
        <i class="fas fa-chalkboard"></i><span>Classes</span>
    </a>
    {% endif %}
    <a href="{% url 'communication:sms_compose' %}" class="rb-tab {% if '/communication/' in request.path %}active{% endif %}">
        <i class="fas fa-comment-sms"></i><span>SMS</span>
    </a>
    <button class="rb-tab" id="mobileMenuBtn"><i class="fas fa-bars"></i><span>Menu</span></button>
</nav>
{% endif %}

<div id="rb-offline-bar"><i class="fas fa-wifi-slash me-1"></i> No internet — limited features</div>

<div class="rb-shell">
<main class="rb-main-wrap" id="mainContent">
    {% if messages %}
    <div class="mb-3">
        {% for message in messages %}
        <div class="rb-alert rb-alert-{% if message.tags == 'error' %}danger{% elif message.tags == 'warning' %}warning{% elif message.tags == 'success' %}success{% else %}info{% endif %} d-flex align-items-start gap-2 js-auto-dismiss">
            <i class="fas fa-{% if message.tags == 'error' or message.tags == 'danger' %}exclamation-circle{% elif message.tags == 'warning' %}exclamation-triangle{% elif message.tags == 'success' %}check-circle{% else %}info-circle{% endif %} mt-1 flex-shrink-0"></i>
            <div style="flex:1">{{ message }}</div>
            <button onclick="this.closest('.rb-alert').remove()" style="background:none;border:none;cursor:pointer;opacity:.5;font-size:1.1rem;padding:0">&times;</button>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    {% block content %}{% endblock %}
</main>

{% include 'includes/footer.html' %}
</div>{# /rb-shell #}

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="{% static 'js/main.js' %}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>