<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ p.page_title }} - {{ p.app_name }}</title>

    <!-- Bootstrap core CSS -->
    <link href="/assets/css/bootstrap.css" rel="stylesheet" crossorigin="anonymous"/>

    <link rel="stylesheet" href="/assets/css/base_settings_page.css">
</head>
<body>
<div class="d-flex flex-column flex-shrink-0 p-3 bg-light" style="width: 280px;">
    <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
        <span class="fs-4">{{ p.app_name }}</span>
    </a>
    {% if p.user.admin %}
    <span>Version {{ p.version }}</span>
    {% endif %}
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
        <li class="nav-item">
            <a href="/settings" class="nav-link link-dark">
                Account details
            </a>
        </li>
        {% if p.user.allow_local_login %}
        <li>
            <a href="/settings/change_password" class="nav-link link-dark">
                Change password
            </a>
        </li>
        {% endif %}
        <li>
            <a href="/settings/two_factors" class="nav-link link-dark">
                Two-factor authentication
            </a>
        </li>

        {% if p.user.admin %}
        <hr/>
        <li>
            <a href="/admin/clients" class="nav-link link-dark">
                Clients
            </a>
        </li>
        <li>
            <a href="/admin/providers" class="nav-link link-dark">
                Providers
            </a>
        </li>
        <li>
            <a href="/admin/users" class="nav-link link-dark">
                Users
            </a>
        </li>
        {% endif %}
    </ul>
    <hr>
    <div class="dropdown">
        <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser"
           data-bs-toggle="dropdown" aria-expanded="false">
            <img src="/assets/img/account.png" alt="" width="32" height="32" class="rounded-circle me-2">
            <strong>{{ p.user.username }}</strong>
        </a>
        <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser">
            <li><a class="dropdown-item" href="/logout">Sign out</a></li>
        </ul>
    </div>
</div>

<div class="page_body" style="flex: 1">
    {% if let Some(msg) = p.danger_message %}
    <div class="alert alert-danger">{{ msg }}</div>
    {% endif %}
    {% if let Some(msg) = p.success_message %}
    <div class="alert alert-success">{{ msg }}</div>
    {% endif %}

    <h2 class="bd-title mt-0" style="margin-bottom: 40px;">{{ p.page_title }}</h2>

    {% block content %}
    TO_REPLACE
    {% endblock content %}
</div>

<script src="/assets/js/bootstrap.bundle.min.js"></script>
<script>
  document.querySelectorAll(".nav-link").forEach(el => {
    if(el.href === location.href) el.classList.add("active");
    else el.classList.remove("active")
  })

</script>
{% if p.ip_location_api.is_some() %}
<script>const IP_LOCATION_API = "{{ p.ip_location_api.unwrap() }}"</script>
{% endif %}
<script src="/assets/js/ip_location_service.js"></script>
</body>
</html>