{% load static %}
{% load has_plan %}

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pathogen - {{ request.path_info }}</title>
    <link rel="shortcut icon" href="{%  static 'favicon.ico' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@creativebulma/bulma-tooltip@1.2.0/dist/bulma-tooltip.min.css">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css" />
    <script src="https://unpkg.com/htmx.org@1.8.0" integrity="sha384-cZuAZ+ZbwkNRnrKi05G/fjBX+azI9DNOkNYysZ0I/X5ZFgsmMiBXgDZof30F5ofc" crossorigin="anonymous"></script>
    <script>
      document.addEventListener('DOMContentLoaded', () => {

        // Get all "navbar-burger" elements
        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
      
        // Add a click event on each of them
        $navbarBurgers.forEach( el => {
          el.addEventListener('click', () => {
      
            // Get the target from the "data-target" attribute
            const target = el.dataset.target;
            const $target = document.getElementById(target);
      
            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
            el.classList.toggle('is-active');
            $target.classList.toggle('is-active');
      
          });
        });
      
      });
    </script>
    <style>
      .icon { border-bottom: 0px !important;}

.navbar-item.is-hoverable:hover .navbar-dropdown .navbar-dropdown {
  display: none;
}

.navbar-dropdown .navbar-item.is-hoverable:hover > .navbar-dropdown {
  display: block;
}
.navbar-dropdown .navbar-item .navbar-dropdown {
  top: -10px;
  margin-left: 100%;
  box-shadow: 0 16px 8px -8px rgba(10,10,10,.1), 8px 0 8px -8px rgba(10,10,10,.1);
}

.navbar-dropdown .navbar-item.has-dropdown {
  padding: 0;
}

.navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
  width: 100%;
  padding: .375rem 1rem;
  background-color: #fff;
}

.navbar-dropdown .navbar-item.has-dropdown:hover > .navbar-link {
  background-color: #f5f5f5;
}

.navbar-dropdown .navbar-item.has-dropdown > .navbar-link:not(.is-arrowless) {
  padding-right: 2.5em;
}
    </style>
  </head>
  <body>

    <nav class="navbar" role="navigation" aria-label="main navigation">
      <div class="navbar-brand">
        <a class="navbar-item" href="{% url 'home' %}">
          <img src="{% static 'logo.svg' %}" width="112" height="28" alt="logo">
        </a>
    
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="bar">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
    
      <div id="bar" class="navbar-menu">
        <div class="navbar-start">
          <a class="navbar-item" href="{% url 'home' %}">
            Home
          </a>
          {% if user.is_authenticated %}
            <a class="navbar-item" href="{% url 'billing' %}">
              Billing
            </a>
          {% endif %}
          {% if user.is_superuser %}
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                Manage
              </a>
      
              <div class="navbar-dropdown">
                <a class="navbar-item" href="#">
                  Pages
                </a>
                <a class="navbar-item" href="#">
                  Docs
                </a>
                <a class="navbar-item" href="#">
                  Users
                </a>
                <div class="navbar-item has-dropdown is-hoverable">
                  <a class="navbar-link">
                    Threshold
                  </a>
          
                  <div class="navbar-dropdown">
                    <div class="navbar-item has-dropdown is-hoverable">
                      <a class="navbar-link">
                        IRC
                      </a>
              
                      <div class="navbar-dropdown">
                        <a class="navbar-item" href="{% url 'threshold_irc_overview' %}">
                          Overview
                        </a>
                        <a class="navbar-item" href="#">
                          Networks
                        </a>
                        <a class="navbar-item" href="#">
                          Aliases
                        </a>
                        <a class="navbar-item" href="#">
                          Relays
                        </a>
                        <a class="navbar-item" href="#">
                          Channels
                        </a>
                        <a class="navbar-item" href="#">
                          AutoReg
                        </a>
                        <a class="navbar-item" href="#">
                          IRCs
                        </a>
                        <a class="navbar-item" href="#">
                          Tools
                        </a>
                      </div>
                    </div>
                    <div class="navbar-item has-dropdown is-hoverable">
                      <a class="navbar-link">
                        Discord
                      </a>
              
                      <div class="navbar-dropdown">
                        <a class="navbar-item" href="#">
                          Overview
                        </a>
                        <a class="navbar-item" href="#">
                          Accounts
                        </a>
                        <a class="navbar-item" href="#">
                          Guilds
                        </a>
                      </div>
                    </div>
                    <a class="navbar-item" href="#">
                      Emails
                    </a>
                    <a class="navbar-item" href="#">
                      Client
                    </a>
                    <a class="navbar-item" href="#">
                      Tokens
                    </a>
                  </div>
                </div>
                <hr class="navbar-divider">
                <a class="navbar-item" href="mailto:help@pathogen.is">
                  Report an issue
                </a>
              </div>
            </div>
          {% endif %}

          {% if user.is_authenticated %}
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link">
                Tools
              </a>
      
              <div class="navbar-dropdown">
                {% if user|has_plan:'drilldown' %}
                  <a class="navbar-item" href="{% url 'drilldown' %}">
                    Drilldown
                  </a>
                  <a class="navbar-item" href="{% url 'insights' %}">
                    Insights
                  </a>
                {% endif %}
                <hr class="navbar-divider">
                <a class="navbar-item" href="mailto:help@pathogen.is">
                  Report an issue
                </a>
              </div>
            </div>
          {% endif %}
        </div>
    
        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              {% if not user.is_authenticated %}
                <a class="button is-primary" href="{% url 'signup' %}">
                  <strong>Sign up</strong>
                </a>
                <a class="button is-light" href="{% url 'login' %}">
                  Log in
                </a>
              {% endif %}

              {% if user.is_authenticated %}
                <a class="button is-dark" href="{% url 'logout' %}">Logout</a>
              {% endif %}


            </div>
          </div>
        </div>
      </div>
    </nav>
    <section class="section">
      <div class="container">
        {% block content %}
        {% endblock %}
      </div>
    </section>
  </body>
</html>
