<!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" href="{% static 'css/bootstrap.min.css' %}">
        <link rel="stylesheet" href="{% static 'icons/font/bootstrap-icons.min.css' %}">
        <link rel="stylesheet" href="{% static 'css/custom.css' %}">
        <link rel="stylesheet" href="{% static 'css/index.css' %}">
        {% 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 class="company-bg text-white d-flex flex-column flex-shrink-0 py-3 position-fixed h-100" id="sidebar">
                <a href="/" class="d-flex align-items-center mb-3 mb-md-0 text-reset text-decoration-none px-2">
                    <img src="{% static 'img/at-logo.png' %}" alt="" class="w-100">
                </a>
                <hr class="mx-2">
                <ul class="nav nav-pills flex-column mb-auto">
                    <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 text-reset d-flex align-items-center py-3" href="/">
                            <i class="bi bi-house-fill fs-4 mx-auto"></i>
                        </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 text-reset d-flex align-items-center py-3" href="/anglers">
                            <i class="bi bi-people-fill fs-4 mx-auto"></i>
                        </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 text-reset d-flex align-items-center py-3" href="#">
                            <i class="bi bi-award-fill fs-4 mx-auto"></i>
                        </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 text-reset d-flex align-items-center py-3" href="#">
                            <i class="bi bi-clipboard-data-fill fs-4 mx-auto"></i>
                        </a>
                    </li>
                </ul>
                <ul class="nav nav-pills flex-column">
                    <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 text-reset d-flex align-items-center py-3" href="/admin">
                            <i class="bi bi-person-fill-gear fs-4 mx-auto"></i>
                        </a>
                    </li>
                </ul>
            </aside>
            <div class="flex-grow-1 d-flex flex-column h-100" id="webContent">
                <div class="bg-body-tertiary shadow-sm p-3 d-flex align-items-center">
                    <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">
                    {% 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>
        {% block scripts %}
        {% endblock scripts %}
    </body>
</html>