{% load i18n static %}
{% load partials %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="{% trans 'King Abdullah Academic University Hospital - Applicant Tracking System' %}">
    <title>{% block title %}{% trans 'University ATS' %}{% endblock %}</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
    {% comment %} <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet"> {% endcomment %}
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

    <style>
        :root {
            --kaauh-teal: #00636e;
            --kaauh-teal-dark: #004a53;
            --kaauh-light-bg: #f9fbfd;
            --kaauh-border: #eaeff3;
        }
        

        /* === Top Bar === */
        .top-bar {
            background-color: white;
            border-bottom: 1px solid var(--kaauh-border);
            font-size: 0.825rem;
            padding: 0.4rem 0;
        }
        .top-bar a { text-decoration: none; }
        .top-bar .social-icons i {
            color: var(--kaauh-teal);
            transition: color 0.2s;
        }
        .top-bar .social-icons i:hover {
            color: var(--kaauh-teal-dark);
        }
        .top-bar .contact-item {
            display: flex;
            align-items: center;
            gap: 0.35rem;
            padding: 0.25rem 0.5rem;
        }
        .top-bar .logo-container img {
            height: 40px;
            object-fit: contain;
        }

        @media (max-width: 767.98px) {
            .top-bar {
                display: none;
            }
        }

        /* === Navbar === */
        .navbar-brand {
            font-weight: 700;
            letter-spacing: -0.5px;
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        .navbar-dark {
            background-color: var(--kaauh-teal) !important;
            box-shadow: 0 2px 6px rgba(0,0,0,0.12);
        }
        .nav-link {
            font-weight: 500;
            transition: all 0.2s ease;
            padding: 0.5rem 0.75rem;
        }
        .nav-link:hover,
        .nav-link.active {
            color: white !important;
            background: rgba(255,255,255,0.12) !important;
            border-radius: 4px;
        }

        /* Dropdown - Enhanced UX */
        .dropdown-menu {
            backdrop-filter: blur(4px);
            background-color: rgba(255, 255, 255, 0.98);
            border: 1px solid var(--kaauh-border);
            box-shadow: 0 6px 20px rgba(0,0,0,0.12);
            border-radius: 8px;
            padding: 0.5rem 0;
            min-width: 200px;
            will-change: transform, opacity;
            transition: transform 0.2s ease, opacity 0.2s ease;
        }
        .dropdown-item {
            padding: 0.5rem 1.25rem;
            transition: background-color 0.15s;
        }
        .dropdown-item:hover {
            background-color: var(--kaauh-light-bg);
            color: var(--kaauh-teal-dark);
        }

        /* Language Toggle Button Style */
        .language-toggle-btn {
            color: white !important;
            background: none !important;
            border: none !important;
            display: flex;
            align-items: center;
            gap: 0.3rem;
            padding: 0.5rem 0.75rem !important;
            font-weight: 500;
            transition: all 0.2s ease;
        }
        .language-toggle-btn:hover {
            background: rgba(255,255,255,0.12) !important;
            border-radius: 4px;
        }

        /* Profile Avatar - Enhanced Feedback */
        .profile-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--kaauh-teal);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            font-size: 0.85rem;
            transition: transform 0.1s ease;
        }
        /* Subtle hover effect for the profile button */
        .navbar-nav .dropdown-toggle:hover .profile-avatar {
            transform: scale(1.05);
        }
        .navbar-nav .dropdown-toggle.p-0:hover {
             background: none !important; /* Keep avatar background fixed */
        }


        /* === Job Table and other sections CSS remain the same... === */
        .job-table-wrapper {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 16px rgba(0,0,0,0.06);
            margin-bottom: 2rem;
        }
        .job-table thead th {
            background: var(--kaauh-teal);
            color: white;
            font-weight: 600;
            padding: 1rem;
            text-align: center;
        }
        .job-table td {
            padding: 1rem;
            vertical-align: middle;
            text-align: center;
        }
        .job-table tr:hover td {
            background-color: rgba(0, 99, 110, 0.03);
        }
        .btn-apply {
            background: var(--kaauh-teal);
            border: none;
            color: white;
            padding: 0.45rem 1rem;
            font-weight: 600;
            border-radius: 6px;
            transition: all 0.2s;
            white-space: nowrap;
        }
        .btn-apply:hover {
            background: var(--kaauh-teal-dark);
            transform: translateY(-1px);
            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        }

        @media (max-width: 575.98px) {
            .table-responsive {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            .job-table th,
            .job-table td {
                white-space: nowrap;
                font-size: 0.875rem;
            }
        }

        /* === Footer & Alerts === */
        .footer {
            background: var(--kaauh-light-bg);
            padding: 1.5rem 0;
            border-top: 1px solid var(--kaauh-border);
            font-size: 0.9rem;
            color: #555;
        }
        .alert {
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
        }
        main.container {
            min-height: calc(100vh - 200px);
            padding: 1.5rem 0;
        }

        /* === RTL Support === */
        html[dir="rtl"] {
            text-align: right;
            direction: rtl;
        }
        html[dir="rtl"] .navbar-brand {
            flex-direction: row-reverse;
        }
        html[dir="rtl"] .dropdown-menu {
             /* Ensures RTL dropdown menu opens left aligned to its button when dropdown-menu-end isn't used */
             right: auto;
             left: 0;
        }
        html[dir="rtl"] .me-3 { margin-right: 0 !important; margin-left: 1rem !important; }
        html[dir="rtl"] .ms-3 { margin-left: 0 !important; margin-right: 1rem !important; }
        html[dir="rtl"] .me-2 { margin-right: 0 !important; margin-left: 0.5rem !important; }
        html[dir="rtl"] .ms-2 { margin-left: 0 !important; margin-right: 0.5rem !important; }
        html[dir="rtl"] .ms-auto { margin-left: 0 !important; margin-right: auto !important; }
        html[dir="rtl"] .me-auto { margin-right: 0 !important; margin-left: auto !important; }
    </style>
    {% block customCSS %}{% endblock %}
</head>
<body class="d-flex flex-column min-vh-100">

    <div class="top-bar d-none d-md-block">
        <div class="container d-flex justify-content-between align-items-center gap-2">
            <div class="d-flex align-items-center gap-3 social-icons">
                {% comment %} <span class="text-muted">{% trans "Follow Us:" %}</span>
                <a href="#" aria-label="Facebook"><i class="fab fa-facebook-f"></i></a>
                <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                <a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a> {% endcomment %}
            </div>
            <div class="contact-info d-flex gap-3">
                {% comment %} <div class="contact-item">
                    <i class="fas fa-envelope text-primary"></i>
                    <span>info@kaauh.edu.sa</span>
                </div>
                <div class="contact-item">
                    <i class="fas fa-phone text-primary"></i>
                    <span>+966 11 820 0000</span>
                </div> {% endcomment %}
            </div>
            <div class="logo-container d-flex gap-2">
                <img src="{% static 'image/vision.svg' %}" alt="{% trans 'Saudi Vision 2030' %}" loading="lazy">
                <img src="{% static 'image/hospital_logo_3.png' %}" alt="{% trans 'King Abdullah Academic University Hospital' %}" loading="lazy">
            </div>
        </div>
    </div>

    <nav class="navbar navbar-expand-lg navbar-dark sticky-top">
        <div class="container">
            <a class="navbar-brand text-white" href="{% url 'dashboard' %}">
                <img src="{% static 'image/kaauh.jpeg' %}"  alt="{% trans 'Saudi Vision 2030' %}" style="width: 60px; height: 60px;">
            </a>

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="{% trans 'Toggle navigation' %}">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    {% comment %} <li class="nav-item">
                        <a class="nav-link {% if request.resolver_match.url_name == 'dashboard' %}active{% endif %}" href="{% url 'dashboard' %}">
                            <span class="d-flex align-items-center gap-2">
                                {% include "icons/dashboard.html" %}
                                {% trans "Dashboard" %}
                            </span>
                        </a>
                    </li> {% endcomment %}
                    <li class="nav-item me-2">
                        <a class="nav-link {% if request.resolver_match.url_name == 'job_list' %}active{% endif %}" href="{% url 'job_list' %}">
                            <span class="d-flex align-items-center gap-2">
                                {% include "icons/jobs.html" %}
                                {% trans "Jobs" %}
                            </span>
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link {% if request.resolver_match.url_name == 'candidate_list' %}active{% endif %}" href="{% url 'candidate_list' %}">
                            <span class="d-flex align-items-center gap-2">
                                {% include "icons/users.html" %}
                                {% trans "Candidates" %}
                            </span>
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link {% if request.resolver_match.url_name == 'training_list' %}active{% endif %}" href="{% url 'training_list' %}">
                            <span class="d-flex align-items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.438 60.438 0 0 0-.491 6.347A48.62 48.62 0 0 1 12 20.904a48.62 48.62 0 0 1 8.232-4.41 60.46 60.46 0 0 0-.491-6.347m-15.482 0a50.636 50.636 0 0 0-2.658-.813A59.906 59.906 0 0 1 12 3.493a59.903 59.903 0 0 1 10.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0A50.717 50.717 0 0 1 12 13.489a50.702 50.702 0 0 1 7.74-3.342M6.75 15a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm0 0v-3.675A55.378 55.378 0 0 1 12 8.443m-7.007 11.55A5.981 5.981 0 0 0 6.75 15.75v-1.5" />
                            </svg>

                                {% trans "Training" %}
                            </span>
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link {% if request.resolver_match.url_name == 'list_meetings' %}active{% endif %}" href="{% url 'list_meetings' %}">
                            <span class="d-flex align-items-center gap-2">
                               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                               <path stroke-linecap="round" stroke-linejoin="round" d="m15.75 10.5 4.72-4.72a.75.75 0 0 1 1.28.53v11.38a.75.75 0 0 1-1.28.53l-4.72-4.72M4.5 18.75h9a2.25 2.25 0 0 0 2.25-2.25v-9a2.25 2.25 0 0 0-2.25-2.25h-9A2.25 2.25 0 0 0 2.25 7.5v9a2.25 2.25 0 0 0 2.25 2.25Z" />
                              </svg>

                                {% trans "Meetings" %}
                            </span>
                        </a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link {% if request.resolver_match.url_name == 'form_templates_list' %}active{% endif %}" href="{% url 'form_templates_list' %}">
                            <span class="d-flex align-items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                                  <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                                </svg>

                                {% trans "Form Templates" %}
                            </span>
                            
                        </a>
                    </li>
                    <li class="nav-item dropdown ms-2">
                        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                           data-bs-offset="0, 8" data-bs-auto-close="outside">
                            {% trans "More" %}
                        </a>
                        <ul class="dropdown-menu" data-bs-popper="static">
                            <li><a class="dropdown-item" href="#"><i class="fas fa-calendar me-2"></i> {% trans "Meetings" %}</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-clock me-2"></i> {% trans "Schedule" %}</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-briefcase me-2"></i> {% trans "Active Jobs" %}</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-file-alt me-2"></i> {% trans "Draft Jobs" %}</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-users me-2"></i> {% trans "All Candidates" %}</a></li>
                            <li><a class="dropdown-item" href="#"><i class="fas fa-user-plus me-2"></i> {% trans "New Candidates" %}</a></li>
                        </ul>
                    </li>
                </ul>


                <ul class="navbar-nav me-2">
                    <li class="nav-item dropdown">
                        <a class="language-toggle-btn dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                        data-bs-offset="0, 8" aria-expanded="false" aria-label="{% trans 'Toggle language menu' %}">
                            <i class="fas fa-globe"></i>
                            <span class="d-none d-lg-inline">{{ LANGUAGE_CODE|upper }}</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end" data-bs-popper="static">
                            
                            {% get_current_language as LANGUAGE_CODE %}
                            
                            <li>
                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
                                    <button name="language" value="en" class="dropdown-item {% if LANGUAGE_CODE == 'en' %}active bg-light-subtle{% endif %}" type="submit">
                                        <span class="me-2">🇺🇸</span> English
                                    </button>
                                </form>
                            </li>
                            
                            <li>
                                <form action="{% url 'set_language' %}" method="post" class="d-inline">{% csrf_token %}
                                    <input name="next" type="hidden" value="{{ request.get_full_path }}">
                                    <button name="language" value="ar" class="dropdown-item {% if LANGUAGE_CODE == 'ar' %}active bg-light-subtle{% endif %}" type="submit">
                                        <span class="me-2">🇸🇦</span> العربية (Arabic)
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
               </ul>

                <ul class="navbar-nav ms-4">
                    <li class="nav-item dropdown">
                        <button
                            class="nav-link p-0 border-0 bg-transparent dropdown-toggle"
                            type="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            aria-label="{% trans 'Toggle user menu' %}"
                            data-bs-auto-close="outside"
                            data-bs-offset="0, 8"
                        >
                            {% if user.profile.profile_image %}
                                <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar"
                                     style="width: 36px; height: 36px; object-fit: cover; background-color: var(--kaauh-teal); display: inline-block; vertical-align: middle;"
                                     title="{% trans 'Your account' %}">
                            {% else %}
                                <div class="profile-avatar" title="{% trans 'Your account' %}">
                                    {{ user.username|first|upper }}
                                </div>
                            {% endif %}
                            {% comment %} <span class="ms-2 d-none d-lg-inline fw-semibold">{{ user.username }}</span> {% endcomment %}
                        </button>
                        <ul
                            class="dropdown-menu dropdown-menu-end py-0 shadow border-0 rounded-3"
                            data-bs-popper="static"
                            style="min-width: 240px;"
                        >
                            <li class="px-4 py-3 ">
                                <div class="d-flex align-items-center">
                                    <div class="me-3 d-flex align-items-center justify-content-center" style="min-width: 48px;">
                                        {% if user.profile.profile_image %}
                                            <img src="{{ user.profile.profile_image.url }}" alt="{{ user.username }}" class="profile-avatar shadow-sm border"
                                                 style="width: 44px; height: 44px; object-fit: cover; background-color: var(--kaauh-teal); display: block;"
                                                 title="{% trans 'Your account' %}">
                                        {% else %}
                                            <div class="profile-avatar shadow-sm border d-flex align-items-center justify-content-center"
                                                 style="width: 44px; height: 44px; background-color: var(--kaauh-teal); font-size: 1.2rem;">
                                                {{ user.username|first|upper }}
                                            </div>
                                        {% endif %}
                                    </div>
                                    <div>
                                        <div class="fw-semibold text-dark">{{ user.get_full_name|default:user.username }}</div>
                                        <div class="text-muted small">{{ user.email|truncatechars:24 }}</div>
                                    </div>
                                </div>
                            </li>
                            <li><hr class="dropdown-divider my-1"></li>
                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-user-circle me-3 text-primary fs-5"></i> <span>{% trans "My Profile" %}</span></a></li>
                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-cog me-3 text-primary fs-5"></i> <span>{% trans "Settings" %}</span></a></li>
                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-history me-3 text-primary fs-5"></i> <span>{% trans "Activity Log" %}</span></a></li>
                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#"><i class="fas fa-question-circle me-3 text-primary fs-5"></i> <span>{% trans "Help & Support" %}</span></a></li>
                            <li><a class="dropdown-item py-2 px-4 d-flex align-items-center text-decoration-none" href="#">
                             {% if not request.session.linkedin_authenticated %}
                                <ul class="navbar-nav ms-auto">
                                    <li class="nav-item">
                                        <a class="nav-link" href="{% url 'linkedin_login' %}">
                                            <i class="fab fa-linkedin me-1"></i> {% trans "Connect LinkedIn" %}
                                        </a>
                                    </li>
                                </ul>
                            {% else %}
                                <i class="fab fa-linkedin text-primary me-1"></i> 
                                <span class="text-primary d-none d-lg-inline ms-auto me-3">
                                    {% trans "LinkedIn Connected" %}
                                </span>
                             {% endif %}
                            </a></li>     
               
                            <li><hr class="dropdown-divider my-1"></li>
                            <li>
                                <form method="post" action="" class="d-inline">
                                    {% csrf_token %}
                                    <button
                                        type="submit"
                                        class="dropdown-item py-2 px-4 text-danger d-flex align-items-center border-0 bg-transparent text-start"
                                        aria-label="{% trans 'Sign out' %}"
                                    >
                                        <i class="fas fa-sign-out-alt me-3 fs-5"></i>
                                        <span>{% trans "Sign Out" %}</span>
                                    </button>
                                </form>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <main class="container flex-grow-1">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="{% trans 'Close' %}"></button>
            </div>
            {% endfor %}
            {% endif %}
            {% block content %}
            {% endblock %}
        </main>
    {% comment %} <footer class="footer mt-auto d-flex align-item-center justify-content-between">
        <div class="container text-center">
            <p class="mb-0">
                &copy; {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %}<br>
                <small>{% trans "All rights reserved." %}</small>
            </p>
        </div>
        <div class="container text-center">
            <p class="mb-0">
                &copy;{% trans "Powered by Tenhal" %}<br>
            </p>
        </div>
    </footer> {% endcomment %}
     {% load i18n static %}

<footer class="mt-auto">
    
   

    <div class="footer-bottom py-3 small text-muted" style="background-color: #00363a;">
        <div class="container d-flex justify-content-between align-items-center flex-wrap">
            <p class="mb-0 text-white-50">
                &copy; {% now "Y" %} {% trans "King Abdullah Academic University Hospital (KAAUH)." %} 
                {% trans "All rights reserved." %}
            </p>
            <p class="mb-0 text-white-50">
                {% trans "Powered by" %} <strong class="text-white">Tenhal</strong>
            </p>
        </div>
    </div>
</footer>

    {% include 'includes/delete_modal.html' %}

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Navbar collapse auto-close on link click (Standard Mobile UX)
            const navbarCollapse = document.getElementById('navbarNav');
            if (navbarCollapse) {
                const navLinks = navbarCollapse.querySelectorAll('.nav-link:not(.dropdown-toggle)');
                const bsCollapse = bootstrap.Collapse.getInstance(navbarCollapse) || new bootstrap.Collapse(navbarCollapse, { toggle: false });

                navLinks.forEach(link => {
                    link.addEventListener('click', () => {
                        // Only collapse if the nav is actually shown (i.e., on mobile)
                        if (navbarCollapse.classList.contains('show')) {
                            bsCollapse.hide();
                        }
                    });
                });
            }

            // Mobile logout confirmation (Good UX for small screens)
            const logoutButton = document.querySelector('form[action$="/logout/"] button');
            if (logoutButton) {
                logoutButton.addEventListener('click', (e) => {
                    // Check if screen is small (e.g., Bootstrap large breakpoint is 992px)
                    if (window.innerWidth <= 992) {
                        const confirmed = confirm('{% trans "Are you sure you want to sign out?" %}');
                        if (!confirmed) e.preventDefault();
                    }
                });
            }

             // Handle language form submission: Manually trigger click on button inside form
            document.querySelectorAll('.language-toggle-btn').forEach(toggle => {
                const menu = toggle.nextElementSibling;
                if (menu) {
                    menu.querySelectorAll('.dropdown-item').forEach(item => {
                        item.addEventListener('click', (e) => {
                            // Find the containing form and submit it
                            const form = item.closest('form');
                            if (form) {
                                form.submit();
                            }
                        });
                    });
                }
            });
        });
    </script>
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.5/bundles/datastar.js"></script>

    {% block customJS %}{% endblock %}

</body>
</html>