{% load static %}
{% load compress %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>{% block title %}{% endblock title %}Angling Trust Results</title>
        
        <link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
        <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" media="screen">
        <link rel="stylesheet" type="text/css" href="{% static 'icons/font/bootstrap-icons.min.css' %}" media="screen">
        {% compress css %}
            <link rel="stylesheet" type="text/x-scss" href="{% static 'scss/base.scss' %}" media="screen">
        {% endcompress %}
        {% include 'fonts.html' %}
        {% block style %}
        {% endblock style %}
    </head>
    <body class="overflow-y-auto font-montserrat bg-body-tertiary">

        <nav id="navbar" class="navbar navbar-expand-lg navbar-dark" style="background-color: #04385c;">
            <div class="container-fluid">
                <a href="#" class="navbar-brand mx-auto ms-sm-4 me-sm-5 user-select-none">
                    <img src="{% static 'img/logo-icon-alt.webp' %}" class="me-1" height="45px" alt="Brand Logo">
                    <img src="{% static 'img/logo-text-alt.webp' %}" height="40px" alt="Brand Logo">
                </a>
                <button class="navbar-toggler mx-auto my-3 my-sm-0 me-sm-4" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div id="navbarCollapse" class="collapse navbar-collapse mx-4 mx-lg-0 mt-3 mt-lg-0">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0 fw-bold small">
                        <li class="nav-item">
                            <a href="#" class="nav-link pe-3">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link pe-3 active">Venues &amp; Waters</a>
                        </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link pe-3">Other Page</a>
                        </li>
                    </ul>
                    <hr class="d-lg-none">
                    <ul class="navbar-nav mb-2 mb-lg-0 me-0 me-lg-4 flex-row flex-wrap">
                        <li class="nav-item mb-2 mb-lg-0">
                            <button id="themeSwitcher" class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3">
                                <i class="bi"></i>
                                <span class="d-lg-none ms-2">Theme</span>
                            </button>
                        </li>
                        <li class="nav-item mb-2 mb-lg-0 dropdown position-relative">
                            <button class="btn btn-outline-light border-0 border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
                                <i class="bi bi-bell"></i>
                                <span class="d-lg-none ms-2">Notifications</span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end position-absolute me-3 p-3" style="min-width: 15rem;">
                                <li class="text-center text-body-secondary small">
                                    There are no notifications right now
                                </li>
                            </ul>
                        </li>
                        <li class="nav-item mb-2 mb-lg-0 ms-auto ms-lg-0 dropdown position-relative">
                            <button class="btn btn-outline-light rounded-pill border-secondary-subtle d-flex align-items-center justify-content-center me-3" data-bs-toggle="dropdown">
                                <i class="bi bi-person me-2"></i>
                                <span class="d-lg-none me-2">Administrator</span>
                                <i class="bi bi-chevron-down"></i>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-end position-absolute me-3">
                                <li>
                                    <a href="" class="dropdown-item">
                                        <i class="bi bi-gear me-2"></i>
                                        Settings
                                    </a>
                                </li>
                                <li>
                                    <a href="" class="dropdown-item text-danger">
                                        <i class="bi bi-box-arrow-right me-2"></i>
                                        Logout
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        {% block content %}
        {% endblock %}

        <footer class="d-none bg-dark text-light">
            <div class="container py-5">
                <div class="row">
                    <div class="col-lg-4">
                        <h3>
                            <img src="{% static 'img/at-logo.png' %}" width="200px" alt="">
                        </h3>
                    </div>
                    <div class="col-lg-4">
                        <h5>Links</h5>
                        <ul class="list-unstyled ps-3">
                            <li>
                                <a href="#" class="text-reset text-decoration-none">Dashboard</a>
                            </li>
                            <li>
                                <a href="#" class="text-reset text-decoration-none">Venues &amp; Waters</a>
                            </li>
                            <li>
                                <a href="#" class="text-reset text-decoration-none">Other</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-lg-4">
                        <h5>Contact</h5>
                        <ul>
                            placeholder
                        </ul>
                    </div>
                </div>
            </div>
        </footer>

        <script>
            const CSRF_MiddlewareToken = "{{ csrf_token }}";
            const currentUserId = "{{ request.user.id }}";
        </script>

        <script src="{% static 'js/jquery-3.6.3.min.js' %}"></script>
        <script src="{% static 'js/jquery.validate.min.js' %}"></script>
        <script src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
        <!-- <script src="{% static 'js/custom.js' %}"></script> -->
        <script src="{% static 'js/api.js' %}"></script>
        <script src="{% static 'js/base.js' %}"></script>
        {% block scripts %}
        {% endblock scripts %}
    </body>
</html>