{% load static %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" content="text/css" href="{% static 'inventory/css/main.css' %}">
    {% block head %}{% endblock %}
</head>
<body>
    <nav>
        <h2>
        {% block header_bar %}
        {% endblock %}
        </h2>

        <div class="spacer">
        </div>

        <ul>
            {% block header_icons %}
            {% endblock %}
        </ul>
        <ul class="icon-nav">
            <li>
                <script>
                    function showSearch(e) {
                        const searchBox = document.getElementById("search-container");
                        if ((searchBox.style.display === '') || (searchBox.style.display === 'none')) {
                            searchBox.style.display = 'block';
                            searchBox.getElementsByTagName('input')[0].focus();
                        } else {
                            searchBox.style.display = 'none';
                        }
                        if (e) {
                            e.preventDefault();
                        }
                    }
                </script>
                <a href="{% url 'search' %}" onclick="showSearch(event)"><img class="icon" title="Search" src="{% static "inventory/img/search.svg" %}"></a>
                <div id="search-container">
                    <form action="{% url 'search' %}" method="get">
                        <input name="q" id="search" type="text" placeholder="Search">
                        <button type="submit">Search</button>
                    </form>
                </div>
            </li>
            <li>
                <a href="{% url 'manufacturer-list' %}"><img class="icon" title="Manufacturers" src="{% static "inventory/img/manufacturer.svg" %}"></a>
            </li>
            <li>
                <a href="{% url 'distributor-list' %}"><img class="icon" title="Distributors" src="{% static "inventory/img/distributor.svg" %}"></a>
            </li>
            <li>
                <a href="{% url 'tag-list' %}"><img class="icon" title="Tags" src="{% static "inventory/img/tags.svg" %}"></a>
            </li>
            <li>
                <a href="{% url 'index' %}"><img class="icon" title="Workshops" src="{% static "inventory/img/workshop.svg" %}"></a>
            </li>
        </ul>

        {% if user.is_authenticated %}
        <form method="POST" action="{% url "logout" %}">
            {% csrf_token %}
            <button><img class="icon" src="{% static "inventory/img/logout.svg" %}"> Logout</button>
        </form>
        {% endif %}
    </nav>

    <main>
        {% block content %}
        {% endblock %}
    </main>
    <script>
    {% block site_scripts %}
    {% endblock %}
    </script>
</body>
</html>