{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'css/icons/bootstrap-icons.css' %}" rel="stylesheet">
        <link href="{% static 'css/shimatta-kenkyusho-base.css' %}" rel="stylesheet">
        <title>{{ base.title }}</title>
        <script type="text/javascript">
            const fallback_img_path = "{% static 'css/icons/card-image.svg' %}";
        </script>
        {% block customhead %}
        {% endblock customhead %}
    </head>
    <body>
        <nav class="navbar navbar-expand-lg bg-dark navbar-dark">
            <div class="container">
                <a href="/" class="navbar-brand">{{ base.navbar.brand }}</a>

                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navmenu">
                    <ul class="navbar-nav">
                        {% for item in base.navbar.navitems %}
                        <li class="nav-item"><a href="{{ item.link }}" class="nav-link {{ item.active_class }}">{{ item }}</a></li>
                        {% endfor %}
                    </ul>
                    {% if base.navbar.has_user %}
                    <form action="" method="post" class="ms-auto" autocomplete="off">
                        {% csrf_token %}
                        <input type="search" name="qr_search" id="qr_search_field" aria-label="QR Scan" placeholder="QR Search" class="form-control me-2 text-success">
                    </form>
                    {% endif %}
                    <ul class="navbar-nav ms-auto">
                    {% if base.navbar.has_user %}
                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link dropdown-toggle text-primary" id="navbar-user-dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">{{ base.navbar.username }}</a>
                            <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-user-dropdown">
                                <li><a class="dropdown-item" href="{% url 'change-pw' %}">Change Password</a></li>
                                <li><a class="dropdown-item" href="{% url 'logout' %}">Logout</a></li>
                                <li><a class="dropdown-item" href="{% url 'api-root' %}">REST API</a></li>
                                {% if base.navbar.show_admin %}
                                <li><a class="dropdown-item text-success" href="{% url 'admin:index' %}">Administration</a></li>
                                {% endif %}
                            </ul>
                        </li>
                    {% else %}
                        <li class="nav-item"><a href="{% url 'login' %}" class="nav-link{% if base.login_active %} active{% endif %}">Login</a></li>
                    {% endif %}
                    </ul>
                </div>
            </div>
        </nav>
        {% block content %}
        {% endblock content %}

        <script type="text/javascript" src="{% static 'js/bootstrap.bundle.min.js' %}"></script>
        <!--<script type="text/javascript" src="{% static 'js/autocomplete.min.js' %}"></script>-->
        <script type="text/javascript" src="{% static 'js/csrf-token.js' %}"></script>
        <script type="text/javascript">
        const api_urls_v1 = {
            'user-list': '{% url 'user-list' %}',
            'groups-list': '{% url 'user-list' %}',
            'storage-list': '{% url 'storage-list' %}',
            'storage-template-list': '{% url 'storage-template-list' %}',
            'component-list': '{% url 'component-list' %}',
            'package-list': '{% url 'package-list' %}',
            'stock-list': '{% url 'stock-list' %}',
            'distributor-list': '{% url 'distributor-list' %}',
            'manufacturer-list': '{% url 'manufacturer-list' %}',
            'component-type-list': '{% url 'componenttype-list' %}',
            'component-parameter-type-list': '{% url 'componentparametertype-list' %}',
        };
        </script>
        <script type="text/javascript" src="{% static 'js/kenkyusho-api-v1.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/autocomplete.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/autocomplete-foreign-key-field.js' %}"></script>
        <!-- Initialize bootstrap popovers -->
        <script type="text/javascript">
            const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
            const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
        </script>
        <!-- Select search field on start of QR scan if no input is currently selevted([) -->
        <script type="text/javascript">
            window.addEventListener("keydown", (event)=>{
                if (document.activeElement.nodeName != 'INPUT' && event.key == '[') {
                    document.getElementById("qr_search_field").focus()
                }
            })
        </script>
        {% block custom_scripts %}
        {% endblock custom_scripts %}

    </body>
</html>