{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Line Operator Dashboard | Container Depot</title>
        <link rel="stylesheet" href="{% static 'styles/tables.css' %}">
        <link rel="stylesheet" href="{% static 'styles/forms.css' %}">
        <link rel="stylesheet" href="{% static 'styles/sidebar.css' %}">
        <link rel="stylesheet" href="{% static 'styles/base.css' %}">
        <link rel="stylesheet" href="{% static 'styles/dashboard-content.css' %}">
        {% block extra_styles %}
        {% endblock extra_styles %}
    </head>

    <body>
        <aside class="sidebar">
            {% block aside %}
                {% if user.user_type == 'AD' or user.user_type == 'EM' %}
                    {% include 'employee-sidebar.html' %}
                {% elif user.user_type == 'CL' or user.user_type == 'CA' %}
                    {% include 'client-sidebar.html' %}
                {% endif %}
            {% endblock aside %}
        </aside>

        <main class="content-area">
            <div class="content">
                {% block content_header %}
                {% endblock content_header%}

                {% block content %}
                {% endblock content %}

                {% block content_footer %}
                {% endblock content_footer%}
            </div>
        </main>

        {% block custom_styles %}
        {% endblock custom_styles %}

        {% block extra_js %}
            <script>
                const validateContainerUrl = "{% url 'validate_container' 'placeholder' %}".replace('placeholder/', '');
            </script>
            <script src="{% static 'js/container_validation.js' %}"></script>
        {% endblock extra_js %}

    </body>

</html>
