{% load static %}
{% load accounts_tags %}

<div class="app-sidebar__overlay" data-bs-toggle="sidebar"></div>
<aside class="app-sidebar">
    <div class="side-header">
        <a class="header-brand1" href="{% url 'core:dashboard' %}">
            <img src="{% static 'images/brands/logo_white.png' %}" class="header-brand-img desktop-logo" alt="logo">
            <img src="{% static 'images/Light mode  version.png' %}" class="header-brand-img light-logo" alt="logo">
            <img src="{% static 'images/Dark mode  version.png' %}" class="header-brand-img toggle-logo" alt="logo">
            <img src="{% static 'images/brands/logo_black.png' %}" class="header-brand-img light-logo1" alt="logo">
        </a><!-- LOGO -->
    </div>
    
    <ul class="side-menu mt-5">
        <!-- Main Dashboard -->
        <li><h3>Main</h3></li>
        <li class="slide">
            <a class="side-menu__item" href="{% url 'core:dashboard' %}">
                <i class="side-menu__icon fe fe-home"></i>
                <span class="side-menu__label">Dashboard</span>
            </a>
        </li> 

        <!-- Channels Management (if available) -->
        {% if user|user_can_access_channels %}
        <li><h3>Channel Management</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-tv"></i>
                <span class="side-menu__label">Channels</span>
                <i class="angle fe fe-chevron-down"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="javascript:void(0)" class="slide-item">TV Channels</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Zones</a></li>
                <li><a href="javascript:void(0)" class="slide-item">EPG</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Jingles</a></li>
            </ul>
        </li>
        {% endif %}

        <!-- Campaigns Management -->
        <li><h3>Campaigns</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-target"></i>
                <span class="side-menu__label">Campaigns</span>
                <i class="angle fe fe-chevron-down"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="javascript:void(0)" class="slide-item">All Campaigns</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Create Campaign</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Analytics</a></li>
            </ul>
        </li>

        
        <!-- Agency Management -->
        <li><h3>Agency Management</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-target"></i>
                <span class="side-menu__label">Agencies</span>
                <i class="angle fe fe-chevron-down"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="javascript:void(0)" class="slide-item">All Agencies</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Create Agency</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Analytics</a></li>
            </ul>
        </li>

                {% user_can_access_management user as can_access_management %}
        {% if can_access_management %}
        <!-- User Management Section -->
        <li><h3>User Management</h3></li>
        
        {% if user|has_perm:"accounts.view_user" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'accounts:user_list' %}">
                <i class="side-menu__icon fe fe-users"></i>
                <span class="side-menu__label">Users</span>
                {% if user|has_perm:"accounts.add_user" or user|has_perm:"accounts.change_user" %}
                <i class="angle fe fe-chevron-down"></i>
                {% endif %}
            </a>
            {% if user|has_perm:"accounts.add_user" or user|has_perm:"accounts.change_user" %}
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:user_list' %}" class="slide-item">All Users</a></li>
                {% if user|has_perm:"accounts.add_user" %}
                <li><a href="{% url 'accounts:user_create' %}" class="slide-item">Add User</a></li>
                {% endif %}
            </ul>
            {% endif %}
        </li>
        {% endif %}

        {% if user|has_perm:"accounts.view_role" %}
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="{% url 'accounts:role_list' %}">
                <i class="side-menu__icon fe fe-shield"></i>
                <span class="side-menu__label">Roles & Permissions</span>
                {% if user|has_perm:"accounts.add_role" or user|has_perm:"accounts.change_role" %}
                <i class="angle fe fe-chevron-down"></i>
                {% endif %}
            </a>
            {% if user|has_perm:"accounts.add_role" or user|has_perm:"accounts.change_role" or user|has_perm:"auth.view_permission" %}
            <ul class="slide-menu">
                <li><a href="{% url 'accounts:role_list' %}" class="slide-item">All Roles</a></li>
                {% if user|has_perm:"accounts.add_role" %}
                <li><a href="{% url 'accounts:role_create' %}" class="slide-item">Create Role</a></li>
                {% endif %}
                {% if user|has_perm:"auth.view_permission" %}
                <li><a href="{% url 'accounts:permission_list' %}" class="slide-item">Permissions</a></li>
                {% endif %}
            </ul>
            {% endif %}
        </li>
        {% endif %}
 
        {% endif %} <!-- End User Management Section -->
        
        <!-- Reports & Analytics -->
        <li><h3>Reports</h3></li>
        <li class="slide">
            <a class="side-menu__item" data-bs-toggle="slide" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-bar-chart-2"></i>
                <span class="side-menu__label">Analytics</span>
                <i class="angle fe fe-chevron-down"></i>
            </a>
            <ul class="slide-menu">
                <li><a href="javascript:void(0)" class="slide-item">Upload Analytics</a></li>
                <li><a href="javascript:void(0)" class="slide-item">Campaign Reports</a></li>
                <li><a href="javascript:void(0)" class="slide-item">User Analytics</a></li>
                <li><a href="javascript:void(0)" class="slide-item">System Metrics</a></li>
            </ul>
        </li>

        <!-- Settings -->
        <li><h3> Support & Docs </h3></li>
        <li class="slide">
            <a class="side-menu__item" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-comments-o"></i>
                <span class="side-menu__label">Support</span>
            </a>
        </li>

        <li class="slide">
            <a class="side-menu__item" href="javascript:void(0)">
                <i class="side-menu__icon fe fe-cubes"></i>
                <span class="side-menu__label">Documentations</span>
            </a>
        </li>
    </ul>
</aside>