{% 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>
        
        {% load static %}
        <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">
        <link rel="stylesheet" type="text/css" href="{% static 'css/custom.css' %}" media="screen">
        <link rel="stylesheet" type="text/css" href="{% static 'css/index.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="font-helvetica mw-100">

        <div class="d-flex align-content-stretch h-100 align-self-stretch">
            <aside id="sidebar" class="shadow-lg font-raleway">
                <a id="sidebar-brand" class="mb-3 mb-md-0" href="/">
                    <img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
                </a>
                <hr class="mx-2">
                <ul class="sidebar-items nav nav-pills">
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Home">
                        <a class="nav-link py-3" href="/">
                            <i class="bi bi-house-fill fs-4"></i>
                            <span class="sidebar-item-text">Home</span>
                        </a>
                    </li>
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Anglers">
                        <a class="nav-link py-3" href="/anglers">
                            <i class="bi bi-people-fill fs-4"></i>
                            <span class="sidebar-item-text">Anglers</span>
                        </a>
                    </li>
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Venues and Waters">
                        <a class="nav-link py-3" href="/venues">
                            <i class="bi bi-droplet-fill fs-4"></i>
                            <span class="sidebar-item-text">Venues and Waters</span>
                        </a>
                    </li>
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Matches">
                        <a class="nav-link py-3" href="#">
                            <i class="bi bi-award-fill fs-4"></i>
                            <span class="sidebar-item-text">Matches</span>
                        </a>
                    </li>
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Scoreboard">
                        <a class="nav-link py-3" href="#">
                            <i class="bi bi-clipboard-data-fill fs-4"></i>
                            <span class="sidebar-item-text">Scoreboard</span>
                        </a>
                    </li>
                </ul>
                <ul class="sidebar-items nav nav-pills mb-0">
                    <li class="nav-item" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-custom-class="light-tooltip" data-bs-title="Admin">
                        <a class="nav-link py-3" href="/admin">
                            <i class="bi bi-person-fill-gear fs-4"></i>
                            <span class="sidebar-item-text">Administration</span>
                        </a>
                    </li>
                </ul>
                <hr class="mx-2">
                <button class="sidebar-collapse-button">
                    <i class="bi bi-chevron-double-right"></i>
                </button>
            </aside>
            <div class="flex-grow-1 d-flex flex-column" id="webContent">
                <div class="bg-body-secondary shadow-sm p-3 align-items-center" id="pageHeader" style="display: none;"> <!-- style="display: flex;" -->
                    <h1 class="h2 mb-0" id="headerTitle"></h1>
                    <div class="ms-auto">
                        {% block header_buttons %}
                        {% endblock header_buttons %}
                    </div>
                </div>
                <div class="flex-grow-1 d-flex overflow-auto">
                    {% block content %}
                    {% endblock content %}
                </div>
            </div>
        </div>



        <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/base.js' %}"></script>
        {% block scripts %}
        {% endblock scripts %}
    </body>
</html>