<!DOCTYPE html>
<html lang="en">

{# Active user navbar dropdown #}
{% macro active_user_dropdown(page) %}
    {% if model.all_users() | length > 1 %}
        <div class="dropdown">
            <button class="btn btn-outline-danger dropdown-toggle" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                {{ model.active_user_name_or_everyone() }}
            </button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="/{{ page }}/Everyone">Everyone</a></li>
                <li>
                    <hr class="dropdown-divider">
                </li>

                {% for user in model.all_users() %}
                    <li><a class="dropdown-item" href="/{{ page }}/{{ user.name_sanitized }}">{{ user.name }}</a></li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
{% endmacro %}

{# Simple driver select for forms #}
{% macro driver_select(name, label, include_none, drivers=none, disabled=false, border="") %}
    <div class="form-floating">
        <select name="{{ name }}" id="{{ name }}" class="form-select {{ border }}" aria-label="{{ name }}" {% if disabled %}disabled="disabled"{% endif %}>
            <option value="" selected disabled hidden></option>

            {% if drivers == none %}
                {% set drivers = model.all_drivers(include_none=include_none, include_inactive=False) %}
            {% endif %}

            {% for driver in drivers %}
                <option value="{{ driver.id }}">{{ driver.abbr }}</option>
            {% endfor %}
        </select>
        <label for="{{ name }}" class="text-primary">{{ label }}</label>
    </div>
{% endmacro %}

{# Driver select for forms where a value might be preselected #}
{% macro driver_select_with_preselect(driver_match, name, label, include_none, drivers=none, disabled=false, border="") %}
    <div class="form-floating">
        <select name="{{ name }}" id="{{ name }}" class="form-select {{ border }}" aria-label="{{ name }}" {% if disabled %}disabled="disabled"{% endif %}>
            {# Use namespace wrapper to persist scope between loop iterations #}
            {% set user_has_chosen = namespace(driverpre=false) %}

            {% if drivers == none %}
                {% set drivers = model.all_drivers(include_none=include_none, include_inactive=False) %}
            {% endif %}

            {% for driver in drivers %}
                {% if driver_match == driver %}
                    {% set user_has_chosen.driverpre = true %}
                    <option selected="selected" value="{{ driver.id }}">{{ driver.abbr }}</option>
                {% else %}
                    <option value="{{ driver.id }}">{{ driver.abbr }}</option>
                {% endif %}

                {% if (include_none == true) and (driver == model.none_driver()) %}
                    <option disabled="disabled">──────────</option>
                {% endif %}
            {% endfor %}

            {# Add an empty default if nothing has been chosen #}
            {% if user_has_chosen.driverpre == false %}
                <option value="" selected="selected" disabled="disabled" hidden="hidden"></option>
            {% endif %}
        </select>
        <label for="{{ name }}" class="text-primary">{{ label }}</label>
    </div>
{% endmacro %}

{# Simple team select for forms #}
{% macro team_select(name, label, include_none, teams=none, disabled=false, border="") %}
    <div class="form-floating">
        <select name="{{ name }}" id="{{ name }}" class="form-select {{ border }}" aria-label="{{ name }}" {% if disabled %}disabled="disabled"{% endif %}>
            <option value="" selected disabled hidden></option>

            {% if teams == none %}
                {% set teams = model.all_teams(include_none=include_none) %}
            {% endif %}

            {% for team in teams %}
                <option value="{{ team.id }}">{{ team.name }}</option>
            {% endfor %}
        </select>
        <label for="{{ name }}" class="text-primary">{{ label }}</label>
    </div>
{% endmacro %}

{# Team select for forms where a value might be preselected #}
{% macro team_select_with_preselect(team_match, name, label, include_none, teams=none, disabled=false, border="") %}
    <div class="form-floating">
        <select name="{{ name }}" id="{{ name }}" class="form-select {{ border }}" aria-label="{{ name }}" {% if disabled %}disabled="disabled"{% endif %}>
            {# Use namespace wrapper to persist scope between loop iterations #}
            {% set user_has_chosen = namespace(teampre=false) %}

            {% if teams == none %}
                {% set teams = model.all_teams(include_none=include_none) %}
            {% endif %}

            {% for team in teams %}
                {% if team_match == team %}
                    {% set user_has_chosen.teampre = true %}
                    <option selected="selected" value="{{ team.id }}">{{ team.name }}</option>
                {% else %}
                    <option value="{{ team.id }}">{{ team.name }}</option>
                {% endif %}

                {% if (include_none == true) and (team == model.none_team()) %}
                    <option disabled="disabled">──────────</option>
                {% endif %}
            {% endfor %}

            {# Add an empty default if nothing has been chosen #}
            {% if user_has_chosen.teampre == false %}
                <option value="" selected="selected" disabled="disabled" hidden="hidden"></option>
            {% endif %}
        </select>
        <label for="{{ name }}" class="text-primary">{{ label }}</label>
    </div>
{% endmacro %}

{# Easy nav-bar entries. When a page sets the active_page variable, the current entry will be underlined #}
{% macro nav_selector(page, text) %}
    <a class="nav-link text-nowrap" href="{{ page }}">{% if active_page == page %}<u>{% endif %} {{ text }}
        {# NOTE: active_page should be set at the top of each template #}
        {% if active_page == page %}</u>{% endif %}</a>
{% endmacro %}

{% macro pxx_guess_colorization(guessed_driver, result) -%}
    {% if   (guessed_driver == result.offset_from_place_to_guess(-3)) and (guessed_driver != model.none_driver()) %}
        fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess(-2)) and (guessed_driver != model.none_driver()) %}
        text-danger fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess(-1)) and (guessed_driver != model.none_driver()) %}
        text-warning fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess( 0)) %}text-success fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess( 1)) and (guessed_driver != model.none_driver()) %}
        text-warning fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess( 2)) and (guessed_driver != model.none_driver()) %}
        text-danger fw-bold
    {% elif (guessed_driver == result.offset_from_place_to_guess( 3)) and (guessed_driver != model.none_driver()) %}
        fw-bold
    {% endif %}
{%- endmacro %}

{% macro dnf_guess_colorization(guessed_driver, result) -%}
    {% if guessed_driver in result.initial_dnf %}text-success fw-bold
    {% elif (guessed_driver == model.none_driver()) and (result.initial_dnf | length == 0) %}text-success fw-bold
    {% endif %}
{%- endmacro %}

{# @formatter:off #}
{% macro pxx_standing_tooltip_text(result) %}
{%- for position in range(-3, 4) %}
{%- set driver = result.offset_from_place_to_guess(position, respect_nc=false) %}
{{- driver.abbr ~ result.driver_standing_position_string(driver) }}
{% endfor %}
{%- endmacro %}
{# @formatter:on #}

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Title -->
    <title>{% block title %}{% endblock title %}</title>
    <link rel="icon" href="../static/image/favicon.svg" sizes="any" type="image/svg+xml">

    <!-- Bootstrap -->
    <link href="../static/style/bootstrap.css" rel="stylesheet">
    <script src="../static/script/bootstrap.bundle.js"></script>

    <!-- ChartJS -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <!-- Custom -->
    <link href="../static/style/grid.css" rel="stylesheet">
    <link href="../static/style/diagram.css" rel="stylesheet">
    <script defer>
        {# Initialize Bootstrap Tooltips #}
        let tooltipTriggerList = document.querySelectorAll("[data-bs-toggle='tooltip']")
        let tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>

    {% block head_extra %}{% endblock head_extra %}
</head>

<body>

<nav class="navbar fixed-top navbar-expand-lg bg-body-tertiary shadow-sm">
    <div class="container-fluid">
        <a class="navbar-brand" href="/race/Everyone">
            <img src="../static/image/f1_logo.svg" alt="Logo" width="120" height="30"
                 class="d-inline-block align-text-top">
            Formula 10
        </a>

        <button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav me-2">
                {{ nav_selector(page="/race/" ~ model.active_user_name_sanitized_or_everyone(), text="Race Picks") }}
                {{ nav_selector(page="/season/" ~ model.active_user_name_sanitized_or_everyone(), text="Season Picks") }}
                {{ nav_selector(page="/graphs", text="Leaderboard") }}
                {{ nav_selector(page="/stats", text="Statistics") }}
                {{ nav_selector(page="/rules", text="Rules") }}
            </div>

            {% block navbar_center %}{% endblock navbar_center %}
            <div class="flex-grow-1"></div>

            <div class="navbar-nav">
                {{ nav_selector(page="/result", text="Enter Race Result") }}
                {{ nav_selector(page="/user", text="Manage Users") }}
            </div>
        </div>
    </div>
</nav>

<div class="px-2 pt-2" style="margin-top: 55px !important;">
    {% block body %}{% endblock body %}
</div>

</body>

</html>