{% extends "layout.html" %}
{% load bootstrap4 %}
{% load staticfiles %}
{% block extrahead %}


<!-- Custom CSS -->
<link href="{% static "css/base.css" %}" rel="stylesheet">
<script src="/static/js/dashboard.js"></script>

{% endblock %}
{% block basecontent %}
<div id="wrapper" class="d-flex flex-column">
    <!-- Navigation -->
    {% block bgColor %}
    <nav class="navbar navbar-light bg-light navbar-fixed-top border-bottom py-0 mb-0" role="navigation">
    {% endblock bgColor %}
        <div class="container-fluid pb-2 pb-sm-0">
            <!-- Logo -->
            {% block logo %}
            <div class="col-12 col-sm order-1 order-sm-2 text-center text-lg-left">
            <h2>Logo Here</h2>
                <a class="navbar-brand d-none d-lg-inline Anuket-Text" href={% url 'dashboard:index' %}>
                    Laas Dashboard
                </a>
            </div>
            {% endblock logo %}
            <!-- Sidebar button -->
            <div class="col-6 col-sm-2 d-flex order-1 order-lg-3 d-lg-none">
                <button class="btn border mx-auto" type="button" data-toggle="collapse" data-target="#sidebar"
                    aria-expanded="false" aria-controls="sidebar">
                    <i class="fas fa-bars d-inline"></i>
                </button>
            </div>
            <!-- Login dropdown -->
            <div class="col-6 col-sm-2 order-3 d-flex">
                <ul class="nav mx-auto mr-sm-0">
                    <li class="dropdown ml-auto">
			{% block userDropDownText %}
                        <a class="nav-link p-0 p-2 Anuket-Text" data-toggle="dropdown" href="#">
                            {% if request.user.username %}
                                {{request.user.username}}
                            {% else %}
                                <i class="fas fa-user"></i>
                            {% endif %}
                            <i class="fas fa-caret-down rotate"></i>
                        </a>
			{% endblock userDropDownText %}
                        <div class="dropdown-menu dropdown-menu-right">
                            {% if LFID %}
                                {% if user.is_authenticated %}
                                <a href="{% url 'account:settings' %}" class="dropdown-item Anuket-Text">
                                    <i class="fas fa-cog"></i>
                                        Settings
                                </a>
                                <a id="logout_btn" href="#" method="post" class="dropdown-item Anuket-Text">
                                    <i class="fas fa-sign-out-alt"></i>
                                        Logout
                                </a>
                                <form id="logout_form" action="{% url 'oidc_logout' %}" method="post" style="visibility: hidden;">
                                    {% csrf_token %}
                                    <input type="submit" value="logout">
                                </form>
                                <script>
                                    const logout_btn = document.getElementById("logout_btn");

                                    const logout_form = document.getElementById("logout_form");

                                    logout_btn.onclick = function() { logout_form.submit(); };
                                </script>
                                {% else %}
                                <a href="{% url 'oidc_authentication_init' %}" class="dropdown-item Anuket-Text">
                                    <i class="fas fa-sign-in-alt"></i>
                                        Login with LFID
                                </a>
                                {% endif %}
                            {% else %}
                                {% if user.is_authenticated %}
                                    <a href="{% url 'account:settings' %}" class="dropdown-item Anuket-Text">
                                        <i class="fas fa-cog"></i>
                                        Settings
                                    </a>
                                    <a href="{% url 'account:logout' %}?next={{ request.path }}" class="dropdown-item Anuket-Text">
                                        <i class="fas fa-sign-out-alt"></i>
                                        Logout
                                    </a>
                                {% else %}
                                    <a href="{% url 'account:login' %}" class="dropdown-item Anuket-Text">
                                        <i class="fas fa-sign-in-alt"></i>
                                        Login with Jira
                                    </a>
                                {% endif %}
                            {% endif %}
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Content -->
    <div class="container-fluid d-flex flex-grow-1 px-0 align-items-start flex-column">
        <div class="row flex-grow-1 w-100 mx-0 align-content-start flex-lg-grow-1">
            <div class="col-12 col-lg-auto px-0 border-right border-left bg-light" role="navigation">
                <nav class="navbar navbar-expand-lg border-bottom p-0 w-100 sidebar">
                    <div class="collapse navbar-collapse" id="sidebar">
                        <div class="list-group list-group-flush w-100 ">
                            <a href="/" class="list-group-item list-group-item-action nav-bg">
                                Home
                            </a>
                            {% block dropDown %}
                            <a class="list-group-item list-group-item-action nav-bg" data-toggle="collapse"
                                href="#createList" role="button">
                                Create <i class="fas fa-angle-down rotate"></i>
                            </a>
                            <div class="collapse" id="createList">
                                <a href="/booking/quick/" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    Express Booking
                                </a>
                                <a href="#" onclick="create_workflow(0)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    Book a Pod
                                </a>
                                <a href="#" onclick="create_workflow(1)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    Design a Pod
                                </a>
                                <a href="#" onclick="create_workflow(2)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    Create a Snapshot
                                </a>
                                <a href="#" onclick="create_workflow(3)" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    Configure Anuket
                                </a>
                            </div>
                            {% endblock dropDown %}
                            <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action nav-bg">
                                Hosts
                            </a>
                            {% if user.is_authenticated %}
                                <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action nav-bg">
                                    User List
                                </a>
                            {% endif %}
                            <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action nav-bg">
                                Booking List
                            </a>
                            <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action nav-bg">
                                Booking Statistics
                            </a>
                            <a class="list-group-item list-group-item-action nav-bg" data-toggle="collapse"
                                href="#accountList" role="button">
                                Account <i class="fas fa-angle-down rotate"></i>
                            </a>
                            <div class="collapse" id="accountList">
                                <a href="{% url 'account:my-resources' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    My Resources
                                </a>
                                <a href="{% url 'account:my-bookings' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    My Bookings
                                </a>
                                <a href="{% url 'account:my-configurations' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    My Configurations
                                </a>
                                <a href="{% url 'account:my-images' %}" class="list-group-item list-group-item-action list-group-item-secondary dropDown-bg">
                                    My Snapshots
                                </a>
                            </div>
                            <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action nav-bg">
                                Lab Info
                            </a>
                            <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action nav-bg">
                                Inbox
                            </a>
                        </div>
                    </div>
                </nav>
            </div>
            <div class="col overflow-auto flex-grow-1 d-flex flex-column h-100">
                {% if title %}
                <div class="row flex-shrink-1">
                    <div class="col-lg-12">
                        <h1 class="page-header">{{ title }}</h1>
                    </div>
                </div>
                {% endif %}
                {% if messages %}
                    <div id="bsm" class="mt-4">{% bootstrap_messages %}</div>
                {% endif %}
                <!-- Content block placed here -->
                {% block content %}
                {% endblock content %}
            </div>
        </div>
    </div>
</div>
{% endblock basecontent %}