<aside class="sidebar">
    <div class="brand">
        <a href="#" class="brand-logo">
            <span>
                <img src="{{ url_for('static', filename='img/Logo (5).png') }}" alt="Logo"
                    style="height: 45px; vertical-align: middle;">
            </span>
        </a>
    </div>

    <div class="nav-section">
        <div class="nav-header">Main</div>
        <div class="nav-item {% if request.endpoint == 'company.dashboard' %}active{% endif %}">
            <a href="{{ url_for('company.dashboard') }}" class="nav-link">
                <i class="fa-light fa-house"></i>
                <span>Dashboard</span>
            </a>
        </div>
    </div>

    <div class="nav-section">
        <div class="nav-header">Management</div>
        <div class="nav-item {% if request.endpoint == 'company.chat_history' %}active{% endif %}">
            <a href="{{ url_for('company.chat_history') }}" class="nav-link">
                <i class="fa-light fa-comments"></i>
                <span>Chat History</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <!-- <div class="nav-item {% if request.endpoint == 'company.whatsapp_history' %}active{% endif %}">
            <a href="{{ url_for('company.whatsapp_history') }}" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
                    <path
                        d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
                </svg>
                <span style="margin-left: 10px;">WhatsApp Chats</span>
                <i class="fa-light fa-angle-right arrow"></i>
            </a>
        </div> -->
        <div class="nav-item {% if request.endpoint == 'company.packages' %}active{% endif %}">
            <a href="{{ url_for('company.packages') }}" class="nav-link">
                <i class="fa-light fa-box"></i>
                <span>Packages</span>
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.company_billing' %}active{% endif %}">
            <a href="{{ url_for('company.company_billing') }}" class="nav-link">
                <i class="fa-light fa-file-invoice-dollar"></i>
                <span>Billing</span>
            </a>
        </div>
        <!-- <div class="nav-item">
            <a href="#" class="nav-link">
                <i class="fa-light fa-calendar"></i>
                <span>Meetings</span>
                <i class="fa-light fa-angle-right arrow"></i>
            </a>
        </div> -->
        <!-- app/templates/layouts/partials/sidebar.html -->
        <div class="nav-item {% if request.endpoint == 'company.meetings' %}active{% endif %}">
            <a href="{{ url_for('company.meetings') }}" class="nav-link">
                <i class="fa-light fa-calendar"></i>
                <span>Meetings</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.files' %}active{% endif %}">
            <a href="{{ url_for('company.files') }}" class="nav-link">
                <i class="fa-light fa-file-pdf"></i>
                <span>Files</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <!-- <div class="nav-item {% if request.endpoint == 'company.campaigns' %}active{% endif %}">
            <a href="" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-mail">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
                    <path d="M3 7l9 6l9 -6" />
                </svg>
                <span style="margin-left: 10px;">Email Campaigns</span>
                <i class="fa-light fa-angle-right arrow"></i>
            </a>
        </div> -->
        <div class="nav-item {% if request.endpoint == 'company.call_campaign' %}active{% endif %}">
            <a href="{{ url_for('company.call_campaign') }}" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-phone">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path
                        d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" />
                </svg>
                <span style="margin-left: 10px;">Call Campaigns</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.bookings' %}active{% endif %}">
            <a href="{{ url_for('company.bookings') }}" class="nav-link">
                <i class="fa-light fa-calendar-check"></i>
                <span>Bookings</span>
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.contacts' %}active{% endif %}">
            <a href="{{ url_for('company.contacts') }}" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-users">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" />
                    <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                    <path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
                </svg>
                <span style="margin-left: 10px;">Contacts</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.contact_groups' %}active{% endif %}">
            <a href="{{ url_for('company.contact_groups') }}" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-users-group">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                    <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1" />
                    <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                    <path d="M17 10h2a2 2 0 0 1 2 2v1" />
                    <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                    <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                </svg>
                <span style="margin-left: 10px;">Contacts Groups</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <div class="nav-item {% if request.endpoint == 'company.support_tickets' or request.endpoint == 'company.view_support_ticket' %}active{% endif %}">
            <a href="{{ url_for('company.support_tickets') }}" class="nav-link">
                <i class="fa-light fa-ticket"></i>
                <span>Support Tickets</span>
            </a>
        </div>
    </div>

    <div class="nav-section">
        <div class="nav-header">Settings</div>
        <div class="nav-item {% if request.endpoint == 'company.show_settings' %}active{% endif %}">
            <a href="{{ url_for('company.show_settings') }}" class="nav-link">
                <i class="fa-light fa-cog"></i>
                <span>Settings</span>
                <!-- <i class="fa-light fa-angle-right arrow"></i> -->
            </a>
        </div>
        <!-- <div class="nav-item {% if request.endpoint == 'company.whatsapp_settings' %}active{% endif %}">
            <a href="" class="nav-link">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                    class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp">
                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                    <path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" />
                    <path
                        d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" />
                </svg>
                <span style="margin-left:10px">Whatsapp Settings</span>
                <i class="fa-light fa-angle-right arrow"></i>
            </a>
        </div> -->
    </div>

</aside>