{% load static %}

<div class="navbar-custom">
    <ul class="list-unstyled topbar-menu float-end mb-0">
        <li class="dropdown notification-list topbar-dropdown">
            <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
               aria-haspopup="false" aria-expanded="false">
                <i class="mdi mdi-chart-box-plus-outline mdi-18px me-0 me-sm-1"></i>
                <span class="align-middle d-none d-sm-inline-block mb-1">Other Reports</span> <i
                    class="mdi mdi-chevron-down d-none d-sm-inline-block align-middle mb-1"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu">

                <a href="{% url 'daily_ledger_summary' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Daily Ledger summary</span>
                </a>

                <a href="{% url 'daily_member_report' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Daily Member Report</span>
                </a>

                <a href="{% url 'member_summary' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Member Summary Report</span>
                </a>

                <a href="{% url 'savings_report' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Savings Report</span>
                </a>

{#                <a href="{% url 'running_loans_report' %}" class="dropdown-item notify-item">#}
{#                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>#}
{#                    <span class="align-middle">Running Loans</span>#}
{#                </a>#}

                <a href="{% url 'expenses_report' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Expenses Report</span>
                </a>

                <a href="{% url 'inactive_accounts' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Inactive Accounts</span>
                </a>

                <a href="{% url 'dormant_accounts' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Dormant Accounts</span>
                </a>

                <a href="{% url 'audit_trials' %}" class="dropdown-item notify-item">
                    <span class="mdi mdi-chevron-right mdi-18px align-middle"></span>
                    <span class="align-middle">Audit Trial Report</span>
                </a>

            </div>
        </li>

        <li class="dropdown notification-list d-none">
            <a class="nav-link dropdown-toggle arrow-none" data-bs-toggle="dropdown" href="#" role="button"
               aria-haspopup="false" aria-expanded="false">
                <i class="dripicons-bell noti-icon"></i>
                <span class="noti-icon-badge"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated dropdown-lg">

                <!-- item-->
                <div class="dropdown-item noti-title">
                    <h5 class="m-0">
                                            <span class="float-end">
                                                <a href="javascript: void(0);" class="text-dark">
                                                    <small>Clear All</small>
                                                </a>
                                            </span>Notification
                    </h5>
                </div>

                <div style="max-height: 230px;" data-simplebar>
                    <!-- item-->
                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                        <div class="notify-icon bg-primary">
                            <i class="mdi mdi-comment-account-outline"></i>
                        </div>
                        <p class="notify-details">Caleb Flakelar commented on Admin
                            <small class="text-muted">1 min ago</small>
                        </p>
                    </a>

                    <!-- item-->
                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                        <div class="notify-icon bg-info">
                            <i class="mdi mdi-account-plus"></i>
                        </div>
                        <p class="notify-details">New user registered.
                            <small class="text-muted">5 hours ago</small>
                        </p>
                    </a>


                    <!-- item-->
                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                        <div class="notify-icon bg-primary">
                            <i class="mdi mdi-comment-account-outline"></i>
                        </div>
                        <p class="notify-details">Caleb Flakelar commented on Admin
                            <small class="text-muted">4 days ago</small>
                        </p>
                    </a>


                    <!-- item-->
                    <a href="javascript:void(0);" class="dropdown-item notify-item">
                        <div class="notify-icon bg-info">
                            <i class="mdi mdi-heart"></i>
                        </div>
                        <p class="notify-details">Carlos Crouch liked
                            <b>Admin</b>
                            <small class="text-muted">13 days ago</small>
                        </p>
                    </a>
                </div>

                <!-- All-->
                <a href="javascript:void(0);" class="dropdown-item text-center text-primary notify-item notify-all">
                    View All
                </a>

            </div>
        </li>

        {# ==== Logged in user dropdown #}
        <li class="dropdown notification-list">
            <a class="nav-link dropdown-toggle nav-user arrow-none me-0" data-bs-toggle="dropdown" href="#"
               role="button" aria-haspopup="false"
               aria-expanded="false">
                                    <span class="account-user-avatar">
                                        <img src="
                                                {{ request.user.staff.biodata.photo_url|default_if_none:'https://www.bcc-phil.com/wp-content/uploads/2020/08/facebookanon.jpg' }}"
                                             alt="user-image" class="rounded-circle">
                                    </span>
                <span>
                                        <span class="account-user-name">{{ request.user.staff.biodata.name }}</span>
                                        <span class="account-position">{{ request.user.staff.position.title }}</span>
                                    </span>
            </a>
            <div class="dropdown-menu dropdown-menu-end dropdown-menu-animated topbar-dropdown-menu profile-dropdown">
                <!-- item-->
                <div class=" dropdown-header noti-title">
                    <h6 class="text-overflow m-0">Welcome !</h6>
                </div>

                <!-- item-->
                <a href="{% url 'profile' %}" class="dropdown-item notify-item">
                    <i class="mdi mdi-account-circle me-1"></i>
                    <span>My Profile</span>
                </a>

                <!-- item-->
                <a href="{% url 'business_profile' %}" class="dropdown-item notify-item">
                    <i class="mdi mdi-office-building me-1"></i>
                    <span>{{ request.user.staff.biodata.business.short_name }}</span>
                </a>

                <!-- item-->
                <a href="{% url 'business_selector' %}" class="dropdown-item notify-item">
                    <i class="mdi mdi-swap-horizontal"></i>
                    <span>Switch Business</span>
                </a>

                <!-- item-->
                <a href="{% url 'logout' %}" class="dropdown-item notify-item">
                    <i class="mdi mdi-logout me-1"></i>
                    <span>Logout</span>
                </a>
            </div>
        </li>

    </ul>
    <button class="button-menu-mobile text-dark open-left">
        <i class="mdi mdi-menu"></i>
    </button>
</div>