{% extends "layout/pui-base.html" %}
{% block pweb_ui_base_head %}
    <link rel="stylesheet" href="{{ url_for('pweb-ui.static', filename='css/pui-admin-base.css') }}">
{% endblock %}

{% block pweb_ui_content %}
    <header>
        <div class="container-fluid">
            <div class="d-flex align-items-center justify-content-between">
                <!-- ============ Branding ============ -->
                <div class="header-content">
                    <div class="logo">
                        <a href="/">
                            <img src="{{ LOGO_URL }}" alt="logo">
                        </a>
                    </div>
                </div>
                <!-- ============ Branding End============ -->

                <!-- ============ Right Menu ============ -->
                <ul class="nav col-lg-auto my-2 justify-content-end my-md-0 nav-white">
                    <li class="nav-item navbar-dropdown dropdown-user dropdown">
                        <a class="nav-link hide-arrow" data-bs-toggle="dropdown">
                            <div class="avatar">
                                <img src="{{ url_for('pweb-ui.static', filename='img/default-img.jpg') }}"
                                     alt="profile pic"
                                     class="w-px-40 h-auto rounded-circle border"/>
                            </div>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end profile-dropdown">
{#                            <li>#}
{#                                <a class="dropdown-item" href="#">#}
{#                                    <div class="d-flex">#}
{#                                        <div class="flex-shrink-0 me-3">#}
{#                                            <div class="avatar">#}
{#                                                <img src="{{ url_for('pweb-ui.static', filename='img/default-img.jpg') }}" alt="profile pic" class="h-auto rounded-circle border"/>#}
{#                                            </div>#}
{#                                        </div>#}
{#                                        <div class="flex-grow-1 operator">#}
{#                                            <span class="fw-semi-bold d-block">Operator Name</span>#}
{#                                        </div>#}
{#                                    </div>#}
{#                                </a>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="dropdown-divider"></div>#}
{#                            </li>#}
{#                            <li>#}
{#                                <a class="dropdown-item drop-link" href="#">#}
{#                                    <span class="p-menu-icon">#}
{#                                         <i class="fa-solid fa-heart"></i>#}
{#                                    </span>#}
{#                                    <span class="align-middle">My Profile</span>#}
{#                                </a>#}
{#                            </li>#}
{#                            <li>#}
{#                                <div class="dropdown-divider"></div>#}
{#                            </li>#}
                            <li>
                                <a class="dropdown-item drop-link" href="{{ url_for("auth_controller.logout") }}">
                                    <span class="p-menu-icon">
                                        <i class="fa-solid fa-right-from-bracket"></i>
                                    </span>
                                    <span class="align-middle">Log Out</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <!-- ============ Right Menu End============ -->
            </div>
        </div>
    </header>
    <main>
        <div class="container-fluid">
            <div class="row">
                <!-- ============ Left Site ============ -->
                <div class="col-lg-2">
                    <div class="navbar-vertical-content">
                        <ul class="navbar-nav flex-column mb-2">
                            {% if navigation %}
                                {% for nav_item in navigation %}
                                    <li class="nav-item">
                                        <a class="nav-link" href="{{ nav_item.url }}">
                                            <div class="d-flex align-items-center">
                                            <span class="nav-link-icon">
                                               <i class="{{ nav_item.icon }}"></i>
                                            </span>
                                                <span class="nav-link-text ps-1">{{ nav_item.name }}</span>
                                            </div>
                                        </a>
                                    </li>
                                {% endfor %}
                            {% endif %}

                            {% if enable_default_left_nav %}
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ url_for("operator_controller.list") }}">
                                        <div class="d-flex align-items-center">
                                            <span class="nav-link-icon">
                                               <i class="fa-solid fa-boxes-stacked"></i>
                                            </span>
                                            <span class="nav-link-text ps-1">Operator</span>
                                        </div>
                                    </a>
                                </li>
                            {% endif %}

                        </ul>
                    </div>
                </div>
                {% block admin_layout %}{% endblock %}
            </div>
        </div>
    </main>
{% endblock %}

{% block pweb_ui_base_bottom %}
    {% block pweb_ui_admin_bottom %}{% endblock %}
{% endblock %}


