{%load static %}

<div id="kt_aside" class="aside aside-extended" data-kt-drawer="true" data-kt-drawer-name="aside" data-kt-drawer-activate="{default: true, lg: false}" data-kt-drawer-overlay="true" data-kt-drawer-width="auto" data-kt-drawer-direction="start" data-kt-drawer-toggle="#kt_aside_mobile_toggle">
    <!-- begin::Primary -->
    <div class="aside-primary d-flex flex-column align-items-lg-center flex-row-auto">
        <!-- begin::Logo -->
        <div class="aside-logo d-none d-lg-flex flex-column align-items-center flex-column-auto py-6" id="kt_aside_logo">
            <a href="{% url 'landing:index' %}">
                <img alt="Logo" src="{% static 'images/logos/logo.png' %}" class="h-55px" />
            </a>
        </div>
        <!-- end::Logo -->
        <!-- begin::NavTop -->
        <div class="aside-nav d-flex flex-column align-items-center flex-column-fluid w-100 pt-5 pt-lg-2" id="kt_aside_nav">
            <!-- begin::Wrapper -->
            <div class="hover-scroll-overlay-y mb-5 px-5" data-kt-scroll="true" data-kt-scroll-activate="{default: true, lg: false}" data-kt-scroll-height="auto"  data-kt-scroll-wrappers="#kt_aside_nav" data-kt-scroll-dependencies="#kt_aside_logo, #kt_aside_footer" data-kt-scroll-offset="0px">
                <!-- begin::Nav -->
                <ul class="nav flex-column w-100" id="kt_aside_nav_tabs">
                    <!-- begin::Nav item -->
                    <li class="nav-item mb-2" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="Home">
                        <!-- begin::Nav link -->
                        <a class="nav-link btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light {% if page == 'dashboard' %}active{% endif %}" href="{% url 'landing:index' %}">
                            <span class="fad fa-th-large fa-lg"></span>
                        </a>
                        <!-- end::Nav link -->
                    </li>
                    <!-- end::Nav item -->
                    <!-- begin::Nav item -->
                    <li class="nav-item mb-2" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="WorkSpace">
                        <!-- begin::Nav link -->
                        <a class="nav-link btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light {% if page == 'workspace' %}active{% endif %}" href="{% url 'landing:workspace' %}">
                            <span class="fad fa-waveform-path fa-lg"></span>
                        </a>
                        <!-- end::Nav link -->
                    </li>
                    <!-- end::Nav item -->
                    <!-- begin::Nav item -->
                    <li class="nav-item mb-2" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="right" data-bs-dismiss="click" title="Voice Enhancement">
                        <!-- begin::Nav link -->
                        <a class="nav-link btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light {% if page == 'enhancement' %}active{% endif %}" href="{% url 'landing:enhancement' %}">
                            <span class="fad <i fa-microphone-slash fa-lg"></span>
                        </a>
                        <!-- end::Nav link -->
                    </li>
                    <!-- end::Nav item -->
                     
                </ul>
                <!-- end::Nav -->
            </div>
            <!-- end::Wrapper -->
        </div>
        <!-- end::NavTop -->
        <!--begin::Footer-->
        <div class="aside-footer d-flex flex-column align-items-center flex-column-auto">
            <!--begin::Support-->
            <div class="d-flex align-items-center mb-2">
                <div class="btn btn-icon btn-active-color-primary btn-color-gray-400 btn-active-light" data-bs-toggle="modal" data-bs-target="#kt_modal_new_ticket" data-kt-menu-trigger="click" data-kt-menu-overflow="true" data-kt-menu-placement="top-start" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-dismiss="click" title="Support">
                    <span class="fad fa-comment-alt-lines fa-xl"></span>
                </div>
            </div>
            <!--end::Support--> 
            <!-- begin::User -->
            <div class="d-flex align-items-center mb-10" id="kt_header_user_menu_toggle">
                
                <div class="cursor-pointer symbol symbol-40px" data-kt-menu-trigger="click" data-kt-menu-overflow="true" data-kt-menu-placement="right-end" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-dismiss="click" title="User profile">
                    <img src="{{ user.profile.avatar.url }}" alt="{{ user.get_full_name }} Avatar" />
                </div>
                <!-- begin::User account menu -->
                <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px" data-kt-menu="true">
                    <!-- begin::Menu item -->
                    <div class="menu-item px-3">
                        <div class="menu-content d-flex align-items-center px-3">
                            <!-- begin::Avatar -->
                            <div class="symbol symbol-40px me-5">
                                <img alt="{{ user.get_full_name }} Avatar" src="{{ user.profile.avatar.url }}" />
                            </div>
                            <!-- end::Avatar -->
                            <!-- begin::Username -->
                            <div class="d-flex flex-column">
                                <div class="fw-bold d-flex align-items-center fs-12">{% if user.get_full_name  %} {{ user.get_full_name }} {% else %} Guest {% endif %}
                                <span class="badge badge-light-success fw-bold fs-12 px-2 py-1 ms-2">{% if user.subscription.plan.plan_type  %} {{ user.subscription.plan.plan_name }} {% else %} Spam {% endif %}</span></div>
                                <a href="#" class="fw-semibold text-muted text-hover-primary fs-7 disabled-link">{{ user.email }}</a>
                            </div>
                            <!-- end::Username -->
                        </div>
                    </div>
                    <!-- end::Menu item -->
                    <!-- begin::Menu separator -->
                    <div class="separator my-2"></div>
                    <!-- end::Menu separator -->
                    <!-- begin::Menu item -->
                    <div class="menu-item px-5">
                        <a href="{% url 'profile:index' %}" class="menu-link px-5">My Profile</a>
                    </div>
                    <!-- end::Menu item -->
                    
                    
                    <!-- begin::Menu item -->
                    <div class="menu-item px-5 my-1">
                        <a href="{% url 'profile:settings' %}" class="menu-link px-5">Settings</a>
                    </div>
                    <!-- end::Menu item -->
                    <!-- begin::Menu item -->
                    <div class="menu-item px-5">
                        <a href="{% url 'accounts:signout' %}" class="menu-link px-5">Sign Out</a>
                    </div>
                    <!-- end::Menu item -->
                </div>
                <!-- end::User account menu -->
                <!-- end::Menu wrapper -->
            </div>
            <!-- end::User -->
        </div>
        <!--end::Footer-->
    </div>
    <!--end::Primary-->
    <!--begin::Secondary-->

    <!--end::Secondary-->
    <!--begin::Aside Toggle-->

    <!--end::Aside Toggle-->    
</div>