{{-- Header --}}
<div class="d-flex align-items-center justify-content-between flex-wrap p-8 bgi-size-cover bgi-no-repeat rounded-top" style="background-image: url('{{ asset('img/layout/ez-bg.png') }}')">
    <div class="d-flex align-items-center mr-2">
        {{-- Symbol --}}
        <div class="symbol mr-3">
            <span class="symbol-label text-white font-weight-bold font-size-h4 bg-primary">{{$user_first_letter}}</span>
        </div>

        {{-- Text --}}
        <div class="text-white m-0 flex-grow-1 mr-3 font-size-h5 d-inline-block text-truncate" style="width: 160px;">{{$user_name}}
            @if ($_SESSION["user_type"] == "agente")
            <div class="ramal-box-number">
                <small class="agent-role">Ramal: {{ ucfirst($_SESSION['exten']);}}</small>
            </div>
            @endif
        </div>
    </div>

    <span class="label label-primary label-lg font-weight-bold label-inline">Agente</span>
</div>

{{-- Nav --}}
<div class="navi navi-spacer-x-0">
    <!-- {{-- Item --}}
    <a href="#" class="navi-item px-8" id="kt_quick_user_toggle">
        <div class="navi-link">
            <div class="navi-icon mr-2">
                <i class="fas fa-calendar text-primary"></i>
            </div>
            <div class="navi-text">
                <div class="font-weight-bold">
                    Minha escala
                </div>
                <div class="text-muted">
                    Acompanhe sua escala semanal
                </div>
            </div>
        </div>
    </a>
    <a href="#" class="navi-item px-8 EditPerfil" id="kt_quick_user_toggle" data-toggle="modal" data-target="#modalEditProfile">
        <div class="navi-link">
            <div class="navi-icon mr-2">
                <i class="fas fa-user  text-primary"></i>
            </div>
            <div class="navi-text">
                <div class="font-weight-bold">
                    Perfil Usuario
                </div>
                <div class="text-muted">
                </div>
            </div>
        </div>
    </a>
    {{-- Footer --}}
    <div class="navi-separator mt-3"></div> -->
    <div class="navi-footer p-5">
        <a href="#" class="btn btn-light-success font-weight-bold" id="redial" data-toggle="popover focus" tabindex="0" data-placement="bottom" data-trigger="manual" data-content="Discando..."><i class="fas fa-phone mr-2 mt-n1"></i>Reconectar</a>
        <a href="{{ route('logout') }}" class="btn btn-clean font-weight-bold ml-2"><i class="fas fa-sign-out-alt mr-2 mt-n1"></i>Desconectar</a>
    </div>
</div>