<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BrickTracker{% block title %}{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@4.0.0/dist/sortable.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.12.0/baguetteBox.css" integrity="sha512-VZ783G3QIpxXpg7tWpzHn+XhjsOCIxFYoSWmyipKCB41OYaB9i4brxAWuY1c8gGCSqKo7uvckzPJhYcdBZQ9gg==" crossorigin="anonymous" referrerpolicy="no-referrer">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-datatables@9.2.1/dist/style.min.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.6.0/fonts/remixicon.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='styles.css') }}" rel="stylesheet">
    <link rel="icon" type="image/png" sizes="48x48" href="{{ url_for('static', filename='brick.png') }}">
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
      <div class="container">
        <a class="navbar-brand" href="{{ url_for('index.index') }}">
            <img src="{{ url_for('static', filename='brick.png') }}" width="30" height="30" alt="">
            BrickTracker
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            {% for item in config['_NAVBAR'] %}
              {% if item.flag and not config[item.flag] %}
                <li class="nav-item px-1">
                  <a {% if request.url_rule.endpoint == item.endpoint %}class="nav-link active" aria-current="page"{% else %}class="nav-link"{% endif %} href="{{ url_for(item.endpoint) }}">
                    {% if item.icon %}
                      <i class="ri-{{ item.icon }}"></i>
                    {% endif %}
                    {{ item.title }}
                  </a>
                </li>
              {% endif %}
            {% endfor %}
          </ul>
          {% if g.login.is_enabled() %}
            {% if g.login.is_authenticated() %}
              <a href="{{ url_for('admin.admin', open_logout=true) }}" class="badge text-bg-success text-decoration-none">Authenticated</a>
            {% else %}
              <a href="{{ url_for('login.login', next=request.path) }}" class="badge text-bg-secondary text-decoration-none">Read-only</a>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </nav>

    <main class="pt-2">
      {% block main %}{% endblock %}
    </main>

    <footer class="d-flex justify-content-between mx-1 p-2 border-top">
      <div class="col-md-3 d-flex justify-content-start">
        <img src="{{ url_for('static', filename='brick.png') }}" width="24" height="24" alt="">
        <span class="ps-2 mb-3 mb-md-0 text-body-secondary">BrickTracker ({{ g.version }})</span>
      </div>

      <div class="col-md-6 d-flex justify-content-center">
        <small>
          <i class="ri-timer-2-line"></i> {{ g.request_time() }}
          {%if config['DEBUG'] and g.database_stats %}
          | <i class="ri-database-2-line"></i> {{g.database_stats.print() }}
          {% endif %}
        </small>
      </div>

      <ul class="nav col-md-3 d-flex list-unstyled justify-content-end">
        <li class="ms-3"><a class="text-body-secondary text-decoration-none" href="https://gitea.baerentsen.space/FrederikBaerentsen/BrickTracker" target="_blank"><img src="{{ url_for('static', filename='gitea.svg') }}" width="24" height="24" alt=""> Source</a></li>
      </ul>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/gh/tofsjonas/sortable@4.0.0/dist/sortable.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/3.2.8/tinysort.min.js" integrity="sha512-P3lisBxY1PusizpelihVrBeciBfWA9r7Ff/8j16b4K399OWJIrY1UdzdE7/BctqKv6Xujr8hp3IA2XiQX3Bsew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.12.0/baguetteBox.min.js" integrity="sha512-HzIuiABxntLbBS8ClRa7drXZI3cqvkAZ5DD0JCAkmRwUtykSGqzA9uItHivDhRUYnW3MMyY5xqk7qVUHOEMbMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.8.1/socket.io.min.js" integrity="sha512-8ExARjWWkIllMlNzVg7JKq9RKWPlJABQUNq6YvAjE/HobctjH/NA+bSiDMDvouBVjp4Wwnf1VP1OEv7Zgjtuxw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/simple-datatables@9.2.1/dist/umd/simple-datatables.min.js"></script>
    <!-- BrickTracker scripts -->
    <script src="{{ url_for('static', filename='scripts/changer.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/grid/filter.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/grid/grid.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/grid/sort.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/grid/sort_button.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/set.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/socket/socket.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/socket/instructions.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/socket/set.js') }}"></script>
    <script src="{{ url_for('static', filename='scripts/table.js') }}"></script>
    <script type="text/javascript">
      document.addEventListener("DOMContentLoaded", () => {
        setup_grids();
        setup_changers();
        setup_tables({{ config['DEFAULT_TABLE_PER_PAGE'] }});
        baguetteBox.run('[data-lightbox]');
      });
    </script>

    <!-- Bootstrap tooltips -->
    <script type="text/javascript">
      const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
      const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
  </body>
</html>