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


    <!-- Custom CSS -->
    <link href="{% static "bower_components/startbootstrap-sb-admin-2-blackrockdigital/dist/css/sb-admin-2.min.css" %}"
          rel="stylesheet">
    <link href="{% static "css/theme.css" %}" rel="stylesheet">
    <link href="{% static "css/detail_view.css" %}" rel="stylesheet">

<script type="text/javascript">
    function cwf(type)
    {
        $.ajax({
            type: "POST",
            url: "/",
            data: {"create":type},
            beforeSend: function(request) {
                request.setRequestHeader("X-CSRFToken",
                $('input[name="csrfmiddlewaretoken"]').val()
                );
            }
        }).done(function (data) {
            window.location.replace("/wf/");
        }).fail(function(jqxHR, textstatus) {
            alert("Something went wrong...");});
    }
       function continue_wf()
    {
        window.location.replace("/wf/");
    }

    function toggle_create_drop()
    {
        drop_div = document.getElementById("create_drop");

        if (drop_div.style.display === "none")
        {
            drop_div.style.display = "inherit";
        }
        else
        {
            drop_div.style.display = "none";
        }
    }
</script>
<style>
    .create_drop {
        display: none;
        width: 100%;
    }

    .create_drop button {
        width: 100%;
    }

    .drop_btn {
        border-radius: 0px;
        background-color: CCCCCC
    }

    .drop_btn:hover {
        color: #555;
        border-top: 1px solid #E7E7E7;
        border-bottom: 1px solid #E7E7E7;
    }
</style>

{% endblock %}
{% block basecontent %}
    <div id="wrapper">
        <!-- Navigation -->
        <nav class="navbar navbar-default navbar-static-top" role="navigation"
             style="margin-bottom: 0">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse"
                        data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="https://www.opnfv.org/" class="navbar-left"><img
                        src="{% static "img/opnfv-logo.png" %}"></a>
                <a class="navbar-brand" href={% url 'dashboard:index' %}>Pharos Dashboard</a>
            </div>
            <!-- /.navbar-header -->

            <ul class="nav navbar-top-links navbar-right">
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                        <i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-user">
                        {% if user.is_authenticated %}
                            <li><a href="{% url 'account:settings' %}"><i
                                    class="fa fa-gear fa-fw"></i>
                                Settings</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="{% url 'account:logout' %}?next={{ request.path }}"><i
                                    class="fa fa-sign-out fa-fw"></i>
                                Logout</a>
                            </li>
                        {% else %}
                            <li><a href="{% url 'account:login' %}"><i
                                    class="fa fa-sign-in fa-fw"></i>
                                Login with Jira</a>
                            <li>
                        {% endif %}
                    </ul>
                    <!-- /.dropdown-user -->
                </li>
                <!-- /.dropdown -->
            </ul>
            <!-- /.navbar-top-links -->

            <div class="navbar-default sidebar" role="navigation">
                <div class="sidebar-nav navbar-collapse">
                    <ul class="nav" id="side-menu">
                        <li>
                            <a href="/"><i class="fa fa-fw"></i>Home</a>
                        </li>
                        <li style="width: 100%;">
                            <a href="javascript:toggle_create_drop();"><i class="fa fa-fw"></i>Create<i
                                    class="fa fa-fw fa-caret-down"></i>
                                </a>
                                {% csrf_token %}
                                <div id="create_drop" class="create_drop" style="display:none">
                                    <button class="btn drop_btn" onclick="location.href='/booking/quick/'">Express Booking</a>
                                    <button class="btn drop_btn" onclick="cwf(0)">Book a Pod</button>
                                    <button class="btn drop_btn" onclick="cwf(1)">Design a Pod</button>
                                    <button class="btn drop_btn" onclick="cwf(2)">Configure a Pod</button>
                                    <button class="btn drop_btn" onclick="cwf(3)">Create a Snapshot</button>
                                </div>
                        </li>
                        <li>
                            <a href="{% url 'resource:hosts' %}"><i
                                    class="fa fa-fw"></i>Hosts
                                </a>
                        </li>
                        {% if user.is_authenticated %}
                        <li>
                            <a href="{% url 'account:users' %}"><i
                                    class="fa fa-fw"></i>User List
                            </a>
                        </li>
                        {% endif %}
                        <li>
                            <a href="{% url 'booking:list' %}"><i
                                    class="fa fa-fw"></i>Booking List
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'booking:stats' %}"><i
                                    class="fa fa-fw"></i>Booking Statistics</a>
                        </li>
                        <li>
                            <a href="{% url 'api-root' %}"><i
                                    class="fa fa-fw"></i>API
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'account:my-account' %}"><i
                                    class="fa fa-fw"></i>Account
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'dashboard:all_labs' %}"><i
                                    class="fa fa-fw"></i>Lab Info
                            </a>
                        </li>
                        <li>
                            <a href="{% url 'notifier:messages' %}"><i
                                    class="fa fa-fw"></i>Inbox
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- /.sidebar-collapse -->
            </div>
            <!-- /.navbar-static-side -->
        </nav>

        <!-- Page Content -->
        <div id="page-wrapper">
            {% if title %}
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">{{ title }}</h1>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            {% endif %}
            <div id="bsm">{% bootstrap_messages %}</div>

            {% block content %}

            {% endblock content %}
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
{% endblock basecontent %}