{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>

    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'bootstrap/bootstrap.min.css' %}">

    <!-- Main CSS, then Sidebar CSS and Dialog Box CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">    
    <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">    
    <link rel="stylesheet" type="text/css" href="{% static 'css/dialogbox.css' %}">    

    <title>InvFlow - {% block title %}Title Missing{% endblock title %}</title>

</head>

<body>

    <!-- Dialog Box CSS  -->
    <div id="dialogoverlay"></div>
    <div id="dialogbox">
        <div class="align-middle">
            <div id="dialogboxhead"></div>
            <div id="dialogboxbody"></div>
            <div id="dialogboxfoot"></div>
        </div>
    </div>

    <main id="wrapper">
    
    {% if user.is_authenticated %}
    
        <nav id="sidebar">
            
            <div class="sidebar-header">
                <a class="navbar-brand titlefont mr-4" href="{% url 'home' %}"><h3>InvFlow</h3></a>
            </div>

            <ul class="list-unstyled sidebar-components">
                {# <p class="sidebar-paragraph">Dummy Heading</p> #}
                <li>
                    <a class="sidebar-text sidebar-button" href="{% url 'home' %}">Home</a>
                </li>               
                <li>
                    <a href="#inventorySubmenu" data-toggle="collapse" class="dropdown-toggle sidebar-text right-arrow sidebar-button">Inventory</a>
                    <ul class="collapse list-unstyled" id="inventorySubmenu">
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'inventory' %}">Inventory List</a> </li>
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'new-stock' %}">Add New Stock</a> </li>
                    </ul>
                </li>
                <li>
                    <a href="#purchaseSubmenu" data-toggle="collapse" class="dropdown-toggle sidebar-text right-arrow sidebar-button">Purchases</a>
                    <ul class="collapse list-unstyled" id="purchaseSubmenu">
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'purchases-list' %}">Purchases List</a> </li>
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'select-supplier' %}">New Incoming Stock</a> </li>
                    </ul>
                </li>
                <li>
                    <a href="#saleSubmenu" data-toggle="collapse" class="dropdown-toggle sidebar-text right-arrow sidebar-button">Sales</a>
                    <ul class="collapse list-unstyled" id="saleSubmenu">
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'sales-list' %}">Sales Orders</a> </li>
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'new-sale' %}">New Outgoing Stock</a> </li>
                    </ul>
                </li>
                <li>
                    <a href="#supplierSubmenu" data-toggle="collapse" class="dropdown-toggle sidebar-text right-arrow sidebar-button">Suppliers</a>
                    <ul class="collapse list-unstyled" id="supplierSubmenu">
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'suppliers-list' %}">Suppliers List</a> </li>
                        <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'new-supplier' %}">Add New Supplier</a> </li>
                    </ul>
                </li>
                <li>
                    <a class="sidebar-text sidebar-button" href="{% url 'about' %}">About</a>
                </li>

                <li class="bottomleft">
                    <a href="#UserSubmenu" data-toggle="collapse" class="dropdown-toggle sidebar-text right-arrow sidebar-button">{{ request.user.username }}</a>
                    <ul class="collapse list-unstyled" id="UserSubmenu">
                        {% if request.user.is_superuser %}
                            <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'admin:index' %}">Admin Page</a> </li>
                        {% endif %}
                            <li> <a class="sidebar-text sidebar-subitem sidebar-button" href="{% url 'logout' %}">Logout</a> </li>
                    </ul>
                </li>

            </ul>
            {% comment %}
            <ul class="list-unstyled CTAs">
                <li>
                    <a href="#" class="sidebar-button nav-button">Button</a>
                </li>
                <li>
                    <a href="#" class="sidebar-text">Link</a>
                </li>
            </ul>
            {% endcomment %}

        </nav>
    
        <div id="content">

            <div class="row">
                <div class="col-md-12">
                
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }}"> {{ message }} </div>
                        {% endfor %}
                    {% endif %}
                
    {% endif %} 

                    <div class="container">
                        {% block content %}{% endblock content %}
                    </div>
                    
                </div>
            </div>
            <br>

        </div>
    
    </main>    
        
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="{% static 'bootstrap/jquery-3.3.1.slim.min.js' %}"></script>
    <script src="{% static 'bootstrap/popper.min.js' %}"></script>
    <script src="{% static 'bootstrap/bootstrap.min.js' %}"></script>

</body>

</html>