<nav class="navbar navbar-vertical navbar-expand-lg navbar-light">
    <a class="navbar-brand mx-auto d-none d-lg-block my-2" href="/" style="text-align:center">
        <img src="/assets/img/logo-empresa.png" alt="Logo cliente" style="width:120px;">
        <img src="/assets/img/logo-empresa.png" alt="Logo cliente" class="white-logo2" >
    </a>
    <div class="navbar-collapse">
        <ul class="navbar-nav mb-2" id="collapseMenu" data-simplebar="init">
            <div class="simplebar-wrapper" style="margin: 0px;">
                <div class="simplebar-height-auto-observer-wrapper">
                    <div class="simplebar-height-auto-observer"></div>
                </div>
                <div class="simplebar-mask">
                    <div class="simplebar-offset" style="right: 0px; bottom: 0px;">
                        <div class="simplebar-content-wrapper"
                             style="height: 100%; overflow-y: auto; /overflow: hidden scroll/;">
                            <div class="simplebar-content" style="padding: 0px;">
                                    <li class="nav-item">
                                        <a class="nav-link py-2 px-4 d-flex justify-content-between align-items-center"
                                            data-bs-target="#dashboardMenu" data-bs-toggle="collapse"
                                            role="button" aria-expanded="{{ area == 'dashboard' ? 'true' : 'false' }}"
                                            aria-controls="dashboardMenu">
                                            <span>
                                                <i class="fa-solid fa-dashboard"></i>
                                                <span class="ms-1"><b>Dashboard</b></span>
                                            </span>
                                            <i class="fa fa-chevron-down rotate-icon ms-auto"></i>
                                        </a>   
                                        <div class="collapse collapse-box {{ area == 'dashboard' ? 'show' : '' }}"
                                            id="dashboardMenu" data-bs-parent="#collapseMenu">
                                            <ul class="nav nav-sm flex-column">
                                                <li class="nav-item">
                                                    <a href="/cpainel/conta/list"
                                                        class="nav-link {{ (area == 'cpainel' and type == 'conta') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Painel
                                                    </a>
                                                </li>                                        
                                            </ul>    
                                        </div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link py-2 px-4 d-flex justify-content-between align-items-center"
                                            data-bs-target="#comercialMenu" data-bs-toggle="collapse"
                                            role="button" aria-expanded="{{ area == 'comercial' ? 'true' : 'false' }}"
                                            aria-controls="comercialMenu">
                                            <span>
                                                <i class="fa-solid fa-store"></i>
                                                <span class="ms-1"><b>Comercial</b></span>
                                            </span>
                                            <i class="fa fa-chevron-down rotate-icon ms-auto"></i>
                                        </a>   
                                        <div class="collapse collapse-box {{ area == 'comercial' ? 'show' : '' }}"
                                            id="comercialMenu" data-bs-parent="#collapseMenu">
                                            <ul class="nav nav-sm flex-column">
                                                <li class="nav-item">
                                                    <a href="/lead/list"
                                                        class="nav-link {{ (area == 'comercial' and type == 'lead') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Leads/Clientes
                                                    </a>
                                                </li>                                        
                                                <li class="nav-item">
                                                    <a href="/agenda/calendar"
                                                        class="nav-link {{ (area == 'comercial' and type == 'agenda') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Agenda
                                                    </a>
                                                </li>                                        
                                                <li class="nav-item">
                                                    <a href="/whatsApp/conversa"
                                                        class="nav-link {{ (area == 'comercial' and type == 'whatsapp') ? 'active' : '' }}">
                                                        <span class="bullet"></span>WhatsApp
                                                    </a>
                                                </li>                                        
                                                <li class="nav-item">
                                                    <a href="/cpainel/conta/list"
                                                        class="nav-link {{ (area == 'comercial' and type == 'conta') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Orçamento/Proposta
                                                    </a>
                                                </li>                                        
                                                <li class="nav-item">
                                                    <a href="/cpainel/conta/list"
                                                        class="nav-link {{ (area == 'comercial' and type == 'conta') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Contratos
                                                    </a>
                                                </li>                                        
                                                <li class="nav-item">
                                                    <a href="/cpainel/conta/list"
                                                        class="nav-link {{ (area == 'comercial' and type == 'conta') ? 'active' : '' }}">
                                                        <span class="bullet"></span>Ocorrências
                                                    </a>
                                                </li>                                        
                                            </ul>    
                                        </div>
                                    </li>
                                {% if 'ic_listar_cpainel' in permissions %}
                                    <li class="nav-item">
                                        <a class="nav-link py-2 px-4 d-flex justify-content-between align-items-center"
                                            data-bs-target="#cpainelMenu" data-bs-toggle="collapse"
                                            role="button" aria-expanded="{{ area == 'cpainel' ? 'true' : 'false' }}"
                                            aria-controls="cpainelMenu">
                                            <span>
                                                <i class="fa-solid fa-code-branch"></i>
                                                <span class="ms-1"><b>Cpainel</b></span>
                                            </span>
                                            <i class="fa fa-chevron-down rotate-icon ms-auto"></i>
                                        </a>   
                                        <div class="collapse collapse-box {{ area == 'cpainel' ? 'show' : '' }}"
                                                id="cpainelMenu" data-bs-parent="#collapseMenu">
                                                <ul class="nav nav-sm flex-column">
                                        {% if 'ic_listar_contas' in permissions %}
                                            <li class="nav-item">
                                                <a href="/cpainel/conta/list"
                                                    class="nav-link {{ (area == 'cpainel' and type == 'conta') ? 'active' : '' }}">
                                                    <span class="bullet"></span>Conta
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if 'ic_listar_perfil-de-acesso' in permissions %}
                                            <li class="nav-item">
                                                <a href="/cpainel/perfil/list"
                                                    class="nav-link {{ (area == 'cpainel' and type == 'perfil') ? 'active' : '' }}">
                                                    <span class="bullet"></span>Perfil de acesso
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if 'ic_listar_usuarios' in permissions %}
                                            <li class="nav-item">
                                                <a href="/usuario/list"
                                                    class="nav-link {{ (area == 'cpainel' and type == 'usuario') ? 'active' : '' }}">
                                                    <span class="bullet"></span>Usuários
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if 'ic_listar_chatbot-option' in permissions %}
                                            <li class="nav-item">
                                                <a href="/chatbotOption/form"
                                                    class="nav-link {{ (area == 'cpainel' and type == 'chatbotOption') ? 'active' : '' }}">
                                                    <span class="bullet"></span>Config Chatbot
                                                </a>
                                            </li>
                                        {% endif %}
                                        </ul>
                                    </li>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </ul>
    </div>
</nav>
<main class="main-content">
<!--suppress HtmlUnknownTarget -->
<div class="header border-bottom border-gray-200 header-fixed" >
    <div class="px-3">
        <div class="header-body px-0 py-2" >
            <div class="row align-items-center">
                <a class="navbar-brand mx-auto d-lg-none col-auto px-0" href="/">
              
                </a>
                <div class="col d-flex align-items-center crm-badge">
                </div>
                <div class="col-auto d-flex flex-wrap align-items-center icon-blue-hover ps-0">
                    {% include '/structure/partials/menu.profile.twig' %}
                </div>
            </div>
        </div>
    </div>
</div>