<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="navbar-toggler-right">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar"
                aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">

            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse flex-column" id="navbar">
        <ul class="navbar-nav mr-auto">
            <a class="navbar-brand" href="#"><img id="logo" alt="Logo" src={% static "/images/logo_white.png" %}>
                <span>ExactEstate<b>Management Software</b></span>
            </a>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item dropdown mr-auto">
                <a class="nav-link dropdown-toggle" href="#"
                   id="navDropdown" role="button"
                   data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fas fa-user" style="color: white"></i> {{ request.sys_user.username }}
                </a>
                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'login_logout' CLIENT.id %}"><i
                            class="far fa-sign-out-alt"></i> Logout</a>
                </div>
            </li>
        </ul>

        <ul class="navbar-nav mr-auto">
            {# -------------------------------------------------------------------------------------------------------Users#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="fas fa-users" style="color:white;"></i> Users
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'users_create' CLIENT.id %}"><i
                            class="far fa-user-plus"></i> Register User</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'users_index' CLIENT.id %}"><i
                            class="fas fa-users"></i> Users</a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Applications#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                    <i class="fa fa-book" style="color:white;"></i> Applications
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'applications_create' CLIENT.id %}">
                        <i class="fas fa-file-plus"></i> New Application</a>

                    <a class="dropdown-item" href="{% url 'applications_index' CLIENT.id %}">
                        <i class="fas fa-cabinet-filing"></i> Existing Applications</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item"
                       href="{% url 'applications_processing_management' CLIENT.id %}">
                        <i class="far fa-ballot-check"></i> Management Processing</a>
                    <a class="dropdown-item"
                       href="{% url 'applications_processing_compliance' CLIENT.id %}">
                        <i class="fas fa-ballot-check"></i> Compliance Processing</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item"
                       href="{% url 'applications_preleasing' CLIENT.id %}">
                        <i class="fa fa-book"></i> Application Dashboard and Preleasing</a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Properties#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button">
                    <i class="far fa-building" style="color:white;"></i> Properties
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'properties_index' CLIENT.id %}">
                        <i class="far fa-building"></i> Properties</a>
                    <a class="dropdown-item" href="{% url 'properties_units_search' CLIENT.id %}">
                        <i class="fas fa-bed"></i> Units</a>
                    <a class="dropdown-item" href="{% url 'properties_water_billing_index' CLIENT.id %}">
                        <i class="far fa-tint"></i> Water Billing</a>

                    <a class="dropdown-item" href="{% url 'merchant_accounts_index' CLIENT.id %}">
                        <i class="far fa-usd-square"></i> Merchants</a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Prospects#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="far fa-layer-plus" style="color:white;"></i> Prospects
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'guest_cards_index' CLIENT.id %}">
                        <i class="fal fa-id-card-alt"></i> Guest Cards
                    </a>
                    <a class="dropdown-item" href="{% url 'appointments_index' CLIENT.id %}">
                        <i class="fal fa-phone"></i> Appointments
                    </a>

                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Residents#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="far fa-people-carry" style="color:white;"></i> Residents
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'residents_ledgers_index' CLIENT.id %}">
                        <i class="far fa-file-invoice-dollar"></i> Ledgers</a>
                    <a class="dropdown-item" href="{% url 'residents_late_fees' CLIENT.id %}">
                        <i class="far fa-file-invoice-dollar"></i> Late Fee Declaration</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'residents_index' CLIENT.id %}">
                        <i class="fas fa-search"></i> Resident Search</a>
                    <a class="dropdown-item" href="{% url 'residents_extras_index' CLIENT.id %}">
                        <i class="fas fa-plus-square"></i> Resident Extras</a>
                    <a class="dropdown-item" href="{% url 'residents_create' CLIENT.id %}">
                        <i class="fal fa-person-booth"></i> Enter Residents</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item" href="{% url 'residents_renewals' CLIENT.id %}">
                        <i class="fal fa-calendar-plus"></i> Renewals</a>
                    {#                    <a class="dropdown-item" href="{{ CLIENT.id }}residentsrenewal_settings">#}
                    {#                        <i class="fal fa-cog"></i> Renewal Settings</a>#}
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Tasks#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="fas fa-tasks" style="{% if OPEN_TASKS %}color:red;{% else %}color:white;{% endif %}"></i>&nbsp;Tasks
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'tasks_create' CLIENT.id %}">
                        <i class="far fa-plus"></i> Create </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'tasks_user' CLIENT.id %}">
                        <i class="fal fa-eye" style="{% if OPEN_USER_TASKS %}color:red;{% endif %}"></i> User Assigned Tasks
                    </a>
                    <a class="dropdown-item" href="{% url 'tasks_system' CLIENT.id %}">
                        <i class="fal fa-eye" style="{% if OPEN_SYSTEM_TASKS %}color:red;{% endif %}"></i> System Assigned Tasks
                    </a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Reports#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="fas fa-file-chart-line" style="color:white;"></i>&nbsp;Reports
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'reports_index' CLIENT.id %}">
                        <i class="far fa-file-chart-line"></i> Reports
                    </a>
                </div>
            </li>

        </ul>

        <ul class="navbar-nav mr-auto">
            {# -------------------------------------------------------------------------------------------------------Documents#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                    <i class="fas fa-folder-open" style="color:white;"></i> Documents
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'documents_upload' CLIENT.id %}">
                        <i class="far fa-file-upload"> </i> Upload Documents </a>
                    <a class="dropdown-item" href="{% url 'documents_index' CLIENT.id %}">
                        <i class="far fa-file-download"></i> Download Documents </a>
                    <a class="dropdown-item" href="{% url 'documents_builder_index' CLIENT.id %}">
                        <i class="far fa-hard-hat"></i> Document Builder </a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Forms#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown">
                    <i class="fab fa-wpforms" style="color:white;"></i> Forms
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'forms_index' CLIENT.id %}">
                        <i class="fab fa-wpforms"></i> Forms</a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Work Orders#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-toggle="dropdown">
                    <i class="far fa-people-carry" style="color:white;"></i> Work Orders
                </a>
                <div class="dropdown-menu" aria-labelledby="navDropdown">
                    <a class="dropdown-item" href="{% url 'work_orders_declarations' CLIENT.id %}">
                        <i class="fal fa-flag-checkered"></i> Work Order Declaration </a>
                    <a class="dropdown-item" href="{% url 'work_orders_index' CLIENT.id %}">
                        <i class="fal fa-eye"></i> View Work Orders
                    </a>
                    <a class="dropdown-item" href="{% url 'work_orders_submit' CLIENT.id %}">
                        <i class="fas fa-clipboard-list"></i> Submit Work Order
                    </a>
                </div>
            </li>
            {# -------------------------------------------------------------------------------------------------------Visitors#}
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#"
                   id="navbarDropdown" role="button"
                   data-toggle="dropdown" aria-haspopup="true"
                   aria-expanded="false">
                    <i class="fa fa-user-plus" style="color:white;"></i> Visitors
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="{% url 'visitors_enter' CLIENT.id %}"><i class="fas fa-user-plus"></i> Enter
                        Visitor</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="{% url 'visitors_index' CLIENT.id %}"><i class="fas fa-users"></i> Visitors</a>
                </div>
            </li>
        </ul>

    </div>
</nav>