@php
use Illuminate\Support\Facades\Storage;
@endphp

<nav class="navbar navbar-top fixed-top navbar-expand" id="navbarDefault">

    <div class="collapse navbar-collapse justify-content-between">
      <div class="navbar-logo">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarVerticalCollapse" aria-controls="navbarVerticalCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggle-icon">
                <span class="toggle-line"></span>
                <span class="toggle-line"></span>
                <span class="toggle-line"></span>
            </span>
        </button>
        <a class="navbar-brand me-1 me-sm-3" href="{{ route('dashboard') }}">
          <div class="d-flex align-items-center">
            <div class="d-flex align-items-center"><img src="{{ asset('img/logoNucleo55.png') }}" alt="Núcleo 55" width="27" />
              <h5 class="logo-text ms-2 d-none d-sm-block">Núcleo 55</h5>
            </div>
          </div>
        </a>
      </div>
      
      <ul class="navbar-nav navbar-nav-icons flex-row">
        <li class="nav-item">
          <div class="theme-control-toggle fa-icon-wait px-2">
            <input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggle" />
            <label class="mb-0 theme-control-toggle-label theme-control-toggle-light" for="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Mudar tema" style="height:32px;width:32px;"><span class="icon" data-feather="moon"></span></label>
            <label class="mb-0 theme-control-toggle-label theme-control-toggle-dark" for="themeControlToggle" data-bs-toggle="tooltip" data-bs-placement="left" data-bs-title="Mudar tema" style="height:32px;width:32px;"><span class="icon" data-feather="sun"></span></label>
          </div>
        </li>
        
        <li class="nav-item dropdown">
          <a class="nav-link lh-1 pe-0" id="navbarDropdownUser" href="#!" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
            <div class="avatar avatar-l">
              @if(Auth::user()->avatar)
                <img class="rounded-circle" src="{{ Storage::url(Auth::user()->avatar) }}" alt="Avatar do usuário" />
              @else
                <img class="rounded-circle" src="{{ asset('img/team/40x40/57.webp') }}" alt="Avatar padrão" />
              @endif
            </div>
          </a>
          <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="navbarDropdownUser">
            <div class="card position-relative border-0">
              <div class="card-body p-0">
                <div class="text-center pt-4 pb-3">
                  <div class="avatar avatar-xl">
                    @if(Auth::user()->avatar)
                      <img class="rounded-circle" src="{{ Storage::url(Auth::user()->avatar) }}" alt="Avatar do usuário" />
                    @else
                      <img class="rounded-circle" src="{{ asset('img/team/72x72/57.webp') }}" alt="Avatar padrão" />
                    @endif
                  </div>
                  <h6 class="mt-2 text-body-emphasis">{{ Auth::user()->name }}</h6>
                  <p class="fs-9 text-body-tertiary">{{ Auth::user()->email }}</p>
                </div>
              </div>
              
              <div class="overflow-auto scrollbar" style="height: auto;">
                <ul class="nav d-flex flex-column mb-2 pb-1">
                  <li class="nav-item">
                    <a class="nav-link px-3 d-block" href="{{ route('profile.edit') }}">
                      <span class="me-2 text-body align-bottom" data-feather="user"></span>
                      <span>Editar Perfil</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link px-3 d-block" href="{{ route('profile.avatar') }}">
                      <span class="me-2 text-body align-bottom" data-feather="camera"></span>
                      <span>Enviar Avatar</span>
                    </a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link px-3 d-block" href="{{ route('dashboard') }}">
                      <span class="me-2 text-body align-bottom" data-feather="pie-chart"></span>
                      <span>Dashboard</span>
                    </a>
                  </li>
                </ul>
              </div>
              
              <div class="card-footer p-0 border-top border-translucent">
                <div class="px-3 py-3">
                    <form method="POST" action="{{ route('logout') }}" style="display: inline;">
                        @csrf
                        <a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="{{ route('logout') }}"
                           onclick="event.preventDefault(); this.closest('form').submit();">
                            <span class="me-2" data-feather="log-out"></span>Sair
                        </a>
                    </form>
                </div>
                <div class="my-2 text-center fw-bold fs-10 text-body-quaternary">
                  <a class="text-body-quaternary me-1" href="#!">Privacidade</a>&bull;
                  <a class="text-body-quaternary mx-1" href="#!">Termos</a>&bull;
                  <a class="text-body-quaternary ms-1" href="#!">Cookies</a>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
</nav>