<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head role="head">
	<title>NearBeach Beta</title>

    {% load static %}

    <!-- load the loader CSS -->
    <script async type="text/javascript" src="{% static 'NearBeach/loader.min.js' %}"></script>

    <!-- tinymce -->
    <link rel="preload" href="{% static 'NearBeach/tinymce/skins/ui/oxide/skin.min.css' %}" as="style">
    <link rel="preload" href="{% static 'NearBeach/tinymce/skins/content/default/content.min.css' %}" as="style">
    <link rel="preload" href="{% static 'NearBeach/tinymce/skins/ui/oxide/content.min.css' %}" as="style">
    <script defer type="text/javascript" src="{% static 'NearBeach/tinymce/tinymce.min.js' %}"></script>

    <!-- fav icon -->
    <link async rel="shortcut icon" type="image/png" href="{% static 'NearBeach/NearBeach_Small.png' %}"/>
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <!-- Navbar branding and burger menu -->
                <a class="navbar-brand" href="{% url 'dashboard' %}">
                    <img src="{% static 'NearBeach/images/NearBeach_logo.svg' %}" width="30" height="30" alt="">
                    NearBeach
                </a>
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent"
                        aria-expanded="false"
                        aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <!-- Menu Items -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <!-- Timeline -->
<!--                        <li class="nav-item active">-->
<!--                            <a class="nav-link" href="#">Timeline</a>-->
<!--                        </li>-->

                        <!-- New Objects -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                               href="#"
                               id="newObjectsDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false"
                            >
                                New Object
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="newObjectsDropdown">
                                <li><a class="dropdown-item" href="{% url 'new_customer' %}">New Customer</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_kanban' %}">New Kanban Board</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_organisation' %}">New Organisation</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_project' %}">New Project</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_request_for_change' %}">New Request For Change</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_requirement' %}">New Requirement</a></li>
                                <li><a class="dropdown-item" href="{% url 'new_task' %}">New Task</a></li>
                            </ul>
                        </li>

                        <!-- Find Objects -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                            href="#"
                            id="findObjectsDropdown"
                            role="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            >
                                Find Objects
                            </a>
                            <div class="dropdown-menu" aria-labelledby="findObjectsDropdown">
                                <a class="dropdown-item" href="{% url 'search' %}">List All</a>
                                <a class="dropdown-item" href="{% url 'search_customer' %}">List Customers</a>
                                <a class="dropdown-item" href="{% url 'search_organisation' %}">List Organisations</a>
                            </div>
                        </li>

                        <!-- Administration -->
                        {% if user.is_superuser %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                            href="#"
                            id="administrationDropdown"
                            role="button"
                            data-bs-toggle="dropdown"
                            aria-expanded="false"
                            >
                                Administration
                            </a>
                            <div class="dropdown-menu" aria-labelledby="administrationDropdown">
                                <a class="dropdown-item" href="{% url 'search_group' %}">Groups</a>
                                <a class="dropdown-item" href="{% url 'search_permission_set' %}">Permission Sets</a>
                                <a class="dropdown-item" href="{% url 'search_user' %}">Users</a>
                            </div>
                        </li>
                        {% endif %}
                    </ul>

                    <!-- Right side of navbar -->
                    <ul class="navbar-nav navbar-right">
                        <form class="d-flex"
                              action="{% url 'search' %}"
                              method="POST"
                        >
                            {% csrf_token %}
                            <input class="form-control mr-2"
                                   id="id_search"
                                   name="search"
                                   type="search"
                                   placeholder="Search"
                                   aria-label="Search"
                            >
                            <button class="btn btn-outline-success"
                                    type="submit"
                            >
                                Search
                            </button>
                        </form>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle"
                               href="#"
                               id="userDropdown"
                               role="button"
                               data-bs-toggle="dropdown"
                               aria-expanded="false"
                            >
                                User
                            </a>
                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                                <a class="dropdown-item" href="#">My Profile</a>
                                <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

    <!-- Simple loader -->
    <div class="loader" id="loader" role="complementary" style="background-color: #51CEFF;position:fixed;top: 0;left: 0;display:flex;height: 100%;width: 100%;z-index: 100;">
        <div class="loader-text">
            <strong>NearBeach</strong>
            <p>We care about your project</p>
        </div>
        <div class="loader-image">
            <img src="{% static 'NearBeach/images/NearBeach_logo.svg' %}"
                 alt="NearBeach logo"
            />
        </div>
    </div>
