<!DOCTYPE html>
{% load static i18n l10n fontawesome_5 bootstrap4 %}
<html lang="{{ language }}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ tab_title }}</title>
    <link rel="icon" type="image/ico" href="{% static 'images/ksp-favicon.ico' %}">
    {% bootstrap_css %}
    {% bootstrap_javascript jquery='full' %}
    {% fontawesome_5_static %}
    <link rel="stylesheet" href="{% static 'css/konova.css' %}">
    {% comment %}
        Adds script for modal rendering. Script depends on Jquery, therefore it needs to be loaded afterwards.
    {% endcomment %}
    <script src="{% static 'js/jquery.bootstrap.modal.forms.min.js' %}"></script>
    <script src="https://unpkg.com/htmx.org@1.6.1"></script>
    {% block head %}
    {% endblock %}
</head>
<body>
    <header>
        {% block header %}
            {% include 'navbars/navbar.html' %}
        {% endblock %}
    </header>
    <div class="col">
        {% for message in messages %}
        <div class="row alert alert-{{ message.tags }}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    <div class="container-fluid mt-3 mb-5 px-4">
        {% comment %}
            The modal wrapper, which can be used on every view can stay on the base.html template
        {% endcomment %}
        <div class="modal fade" tabindex="-1" role="dialog" id="modal">
          <div class="modal-dialog modal-md modal-xl" role="document">
            <div class="modal-content"></div>
          </div>
        </div>

        {% block body %}

        {% endblock %}
    </div>

    {% block footer %}
        {% include 'footer.html' %}
    {% endblock %}
</body>


</html>