{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    <link href="{% static "main.css" %}" rel="stylesheet">
    <title>Gamoto</title>
  </head>
  <body>
    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
      <div class="navbar-brand col-sm-3 col-md-2 mr-0">Gamoto</div>
      {% if user.is_authenticated %}
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="{% url 'logout' %}">Sign out</a>
        </li>
      </ul>
      {% endif %}
    </nav>
    <div class="container-fluid">
      <div class="row">
        {% if user.is_authenticated %}
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
          {% if admin %}
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link{% if sbactive == "index" %} active{% endif %}" href="{% url "index" %}">
                <span data-feather="home"></span>
                Dashboard
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link{% if sbactive == "endpoints" %} active{% endif %}" href="{% url "endpoints" %}">
                <span data-feather="server"></span>
                Endpoints
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link{% if sbactive == "users" %} active{% endif %}" href="{% url "users" %}">
                <span data-feather="user"></span>
                Users
                </a>
              </li>
            </ul>
          {% endif %}
          {% block sidebar %}{% endblock %}
          </div>
        </nav>
        {% endif %}
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
        {% block body %}{% endblock %}
        </main>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
    <script type="text/javascript">
      (function () {
        'use strict'
        feather.replace()
      }())
    </script>
    {% block js %}{% endblock %}
  </body>
</html>
