<nav id="sidebarMenu" class="sidebar d-md-block bg-primary text-white collapse px-4">
    <div class="sidebar-sticky pt-3 mx-auto">
        <div
            class="user-card d-flex d-md-none align-items-center justify-content-between justify-content-md-center pb-4">
            <div class="d-flex align-items-center">
                <div class="user-avatar lg-avatar mr-4">
                    {% if "yoda" in current_user.role %}
                    <img src="/static/assets/img/team/root.png" class="card-img-top rounded-circle border-white"
                        alt="root">
                    {% elif "darth_vader" in current_user.role %}
                    <img src="/static/assets/img/team/admin.png" class="card-img-top rounded-circle border-white"
                        alt="admin">
                    {% else %}
                    <img src="/static/assets/img/team/user.png" class="card-img-top rounded-circle border-white"
                        alt="user">
                    {% endif %}
                </div>
                <div class="d-block">
                    <h2 class="h6">
                        {{ current_user.username }}
                    </h2>
                    <a href="{{ url_for('base_blueprint.logout') }}" class="btn btn-secondary text-dark btn-xs">
                        <span class="mr-2"><span class="fas fa-sign-out-alt"></span></span>Sign Out</a>
                </div>
            </div>
            <div class="collapse-close d-md-none">
                <a href="#sidebarMenu" class="fas fa-times" data-toggle="collapse" data-target="#sidebarMenu"
                    aria-controls="sidebarMenu" aria-expanded="true" aria-label="Toggle navigation"></a>
            </div>
        </div>
        <ul class="nav flex-column">
            <li class="nav-item  {% if 'dashboard' in segment %} active {% endif %}">
                <a href="/dashboard" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-chart-pie"></span></span>
                    <span>Dashboard</span>
                </a>
            </li>

           {% if "yoda" in current_user.role or "darth_vader" in current_user.role %}
            <li class="nav-item">
                <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                    data-toggle="collapse" data-target="#submenu-components-users">
                    <span>
                        <span class="sidebar-icon"><span class="fas fa-users"></span></span>
                        Users
                    </span>
                    <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                </span>
                <div class="multi-level collapse " role="list" id="submenu-components-users" aria-expanded="false">
                    <ul class="flex-column nav">
                        <li class="nav-item "><a class="nav-link" href="/users-new">
                                <span class="sidebar-icon"><span class="fas fa-user-plus"></span>
                                    <span>New</span>
                            </a>
                        </li>
                        <li class="nav-item "><a class="nav-link" href="/users-list">
                                <span class="sidebar-icon"><span class="fas fa-user-edit"></span>
                                    <span>List</span></a></li>
                    </ul>
                </div>
                {% endif %}


            <li class="nav-item">
                <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                    data-toggle="collapse" data-target="#submenu-components-stacks">
                    <span>
                        <span class="sidebar-icon"><span class="fas fa-layer-group"></span></span>
                        Stacks
                    </span>
                    <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                </span>
                <div class="multi-level collapse " role="list" id="submenu-components-stacks" aria-expanded="false">
                    <ul class="flex-column nav">
                        {% if "yoda" in current_user.role or "darth_vader" in current_user.role %}
                        <li class="nav-item "><a class="nav-link" href="/stacks-new">
                                <span class="sidebar-icon"><span class="fas fa-plus"></span>
                                    <span>New</span>
                            </a>
                        </li>
                        {% endif %}
                        <li class="nav-item "><a class="nav-link" href="/stacks-list">
                                <span class="sidebar-icon"><span class="fas fa-database"></span>
                                    <span>List</span></a></li>
                    </ul>
                </div>
            </li>
            <li class="nav-item  {% if 'transactions' in segment %} active {% endif %}">
                <a href="/deploys-list" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-box-open"></span></span>
                    <span>Deploys</span>
                </a>
            </li>
            <li class="nav-item  {% if 'settings' in segment %} active {% endif %}">
                <a href="/tasks-logs" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-tasks"></span></span>
                    <span>Tasks</span>
                </a>
            </li>
            {% if "yoda" in current_user.role or "darth_vader" in current_user.role %}
            <li class="nav-item  {% if 'settings' in segment %} active {% endif %}">
                <a href="/activity-logs" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-chart-line"></span></span>
                    <span>Activity Logs</span>
                </a>
            </li>
            {% endif %}
            <li class="nav-item  {% if 'settings' in segment %} active {% endif %}">
                <a href="/user-setting" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-cog"></span></span>
                    <span>Settings</span>
                </a>
            </li>
            {% if "yoda" in current_user.role or "darth_vader" in current_user.role %}
            <li role="separator" class="dropdown-divider mt-4 mb-3 border-black"></li>
            <a href="" class="nav-link">
                <span class="sidebar-icon"><span class="fas fa-cloud"></span></span>
                <span>Cloud Accounts</span>
            </a>
            <li class="nav-item">
                <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                    data-toggle="collapse" data-target="#submenu-components-aws">
                    <span>
                        <span class="sidebar-icon"><span class="fab fa-aws"></span></span>
                        Aws
                    </span>
                    <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                </span>
                <div class="multi-level collapse " role="list" id="submenu-components-aws" aria-expanded="false">
                    <ul class="flex-column nav">

                        {% if "yoda" in current_user.role %}
                        <li class="nav-item "><a class="nav-link" href="/aws-new">
                                <span class="sidebar-icon"><span class="fas fa-plus"></span>
                                    <span>New</span>
                            </a>
                            {% endif %}
                        </li>
                        <li class="nav-item "><a class="nav-link" href="/aws-list">
                                <span class="sidebar-icon"><span class="fas fa-database"></span>
                                    <span>List</span></a></li>
                    </ul>
                </div>

            <li class="nav-item">
                <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                    data-toggle="collapse" data-target="#submenu-components-gcp">
                    <span>
                        <span class="sidebar-icon"><span class="fab fa-google"></span></span>
                        Gcp
                    </span>
                    <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                </span>
                <div class="multi-level collapse " role="list" id="submenu-components-gcp" aria-expanded="false">
                    <ul class="flex-column nav">
                        {% if "yoda" in current_user.role %}
                        <li class="nav-item "><a class="nav-link" href="/gcp-new">
                                <span class="sidebar-icon"><span class="fas fa-plus"></span>
                                    <span>New</span>
                            </a>
                        </li>
                        {% endif %}
                        <li class="nav-item "><a class="nav-link" href="/gcp-list">
                                <span class="sidebar-icon"><span class="fas fa-database"></span>
                                    <span>List</span></a></li>
                    </ul>
                </div>
            <li class="nav-item">
                <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                    data-toggle="collapse" data-target="#submenu-components-azure">
                    <span>
                        <span class="sidebar-icon"><span class="fab fa-microsoft"></span></span>
                        Azure
                    </span>
                    <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                </span>
                <div class="multi-level collapse " role="list" id="submenu-components-azure" aria-expanded="false">
                    <ul class="flex-column nav">
                        {% if "yoda" in current_user.role %}
                        <li class="nav-item "><a class="nav-link" href="/azure-new">
                                <span class="sidebar-icon"><span class="fas fa-plus"></span>
                                    <span>New</span>
                            </a>
                        </li>
                        {% endif %}
                        <li class="nav-item "><a class="nav-link" href="/azure-list">
                                <span class="sidebar-icon"><span class="fas fa-database"></span>
                                    <span>List</span></a></li>
                    </ul>
                </div>
                <li class="nav-item">
                    <span class="nav-link  collapsed  d-flex justify-content-between align-items-center"
                        data-toggle="collapse" data-target="#submenu-components-custom-provider">
                        <span>
                            <span class="sidebar-icon"><span class="fas fa-solid fa-rocket"></span></span>
                            Custom
                        </span>
                        <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
                    </span>
                    <div class="multi-level collapse " role="list" id="submenu-components-custom-provider" aria-expanded="false">
                        <ul class="flex-column nav">
                            {% if "yoda" in current_user.role %}
                            <li class="nav-item "><a class="nav-link" href="/custom-provider-new">
                                    <span class="sidebar-icon"><span class="fas fa-plus"></span>
                                        <span>New</span>
                                </a>
                            </li>
                            {% endif %}
                            <li class="nav-item "><a class="nav-link" href="/custom-provider-list">
                                    <span class="sidebar-icon"><span class="fas fa-database"></span>
                                        <span>List</span></a></li>
                        </ul>
                    </div>
                {% endif %}
            <li role="separator" class="dropdown-divider mt-4 mb-3 border-black"></li>
            <li class="nav-item">
                <a href="/" class="nav-link d-flex align-items-center">
                    <span class="sidebar-icon">
                    <span class="sidebar-icon"><span class="fas fa-layer-group text-danger"></span></span>
                    </span>
                    <strong>
                    <span class="mt-1">SLD</span>
                    </strong>
                </a>
            </li>
            <li class="nav-item">
                <a href="https://github.com/D10S0VSkY-OSS/Stack-Lifecycle-Deployment" class="nav-link d-flex align-items-center">
                    <span class="sidebar-icon"><span class="fas fa-book"></span></span>
                    <span>Tech Docs</span>
                </a>
            </li>

            <li class="nav-item">
                <a href="{{ url_for('base_blueprint.logout') }}" class="nav-link">
                    <span class="sidebar-icon"><span class="fas fa-sign-out-alt text-danger"></span></span>
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</nav>
