<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {# A block for specific page titles #}
    <title>{% block title %}نظام إدارة الطلاب{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
    {# Font Awesome for icons #}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
    <style>
        body { font-family: 'Cairo', sans-serif; }
        /* Style for disabled buttons to provide visual feedback */
        button:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }
        /* Style for highlighting search results */
        .highlight {
            background-color: #fceb00; /* A soft yellow for highlighting */
            font-weight: bold;
            padding: 2px 4px;
            border-radius: 4px;
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">

    <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl">

        {# Section for displaying Flask flashed messages #}
        <div class="mb-6 space-y-3" aria-live="polite" aria-atomic="true">
            {% with messages = get_flashed_messages(with_categories=true) %}
              {% if messages %}
                {% for category, message in messages %}
                  {# Dynamically set background and text colors based on message category #}
                  {% set bg_color = 'bg-blue-100 border-blue-500 text-blue-700' %}
                  {% if category == 'success' %}{% set bg_color = 'bg-green-100 border-green-500 text-green-700' %}{% endif %}
                  {% if category == 'danger' %}{% set bg_color = 'bg-red-100 border-red-500 text-red-700' %}{% endif %}
                  {% if category == 'warning' %}{% set bg_color = 'bg-yellow-100 border-yellow-500 text-yellow-700' %}{% endif %}
                  <div class="{{ bg_color }} border-r-4 border-l-0 p-4 rounded-md shadow" role="alert">
                    <p class="font-bold">{{ message }}</p>
                  </div>
                {% endfor %}
              {% endif %}
            {% endwith %}
        </div>

        {# This block will be filled by child templates #}
        {% block content %}{% endblock %}

    </div>

</body>
</html>
