{% 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">
    <title>ShariX Open Tickets</title>
    
    <link rel="icon" href="{% static 'tickets/favicon.ico' %}">
    <link rel="stylesheet" href="{% static 'tickets/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'tickets/css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'tickets/assets/fontawesome/css/fontawesome.css' %}">
    <link rel="stylesheet" href="{% static 'tickets/assets/fontawesome/css/solid.css' %}">  
    
    {% block extrahead %}{% endblock extrahead %}
  </head>
  
  <body>
    <header>
      <nav class="navbar bg-body-tertiary navbar-expand-lg fixed-top">
        <div class="container">
          <a class="navbar-brand" href="{% url 'tickets:ticket_list_list' %}">
            <img src="{% static 'tickets/favicon.ico' %}" width="30" height="30" class="d-inline-block align-top">
            ShariX Open Tickets
          </a>
          
          {% if user.is_authenticated %}
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
              <span class="navbar-toggler-icon"></span>
            </button>
          
            <div class="collapse navbar-collapse" id="navbarCollapse">
              <ul class="navbar-nav">
                <li class="nav-item"><a href="{% url 'tickets:my_tickets' %}" class="nav-link">My Tickets</a></li>
                <li class="nav-item"><a href="{% url 'tickets:assignments' %}" class="nav-link">Assignments</a></li>
              </ul>            
              
              <!--Search input-->
              <form class="form-inline ms-auto" action="{% url 'tickets:search' %}" method="get">
                {% csrf_token %}
                <div class="input-group input-group">
                  <input type="text" name="search" id="search-input" placeholder="Any ticket details" class="form-control">
                  
                  <button class="btn btn-primary" id="search-button" disabled type="submit">
                    <i class="fa-solid fa-magnifying-glass"></i>
                  </button>
                </div>
              </form>
            </div>          
          {% endif %}
        </div>
      </nav>
    </header>
      
    <main role="main" class="container">
      {% if messages %}
        {% for message in messages %}
          <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">{{ message }}</div>
        {% endfor %}
      {% endif %}
      
      {% block content %}{% endblock %}
    </main>
    
    <script src="{% static "tickets/js/jquery-3.7.0.min.js" %}"></script>
    <script src="{% static "tickets/js/jquery.cookie.js" %}"></script>
    <script src="{% static "tickets/js/bootstrap.bundle.min.js" %}"></script>

    {% if user.is_authenticated %}
      <script src="{% static "tickets/js/search.js" %}"></script>
    {% endif %}

    {% block extra_js %}{% endblock extra_js %}
  </body>
</html>
