@if (auth()->user()?->role == "admin")    
<a
  href="/app/dashboard"
  class="btn btn-sm btn-primary text-white"
>
  Dashboard
</a>
@else
<div class="dropdown dropdown-end">
  <label
    tabIndex="0"
    class="btn btn-ghost btn-circle avatar"
  >
    <div class="w-10 normal-case border-2 rounded-full">
      <img
        src={{auth()->user()?->picture ?? "/image/user.png"}}
        alt="Account"
        width="50"
      />
    </div>
  </label>
  <ul
    tabIndex="0"
    class="p-2 mt-3 shadow dropdown-content bg-base-100 rounded-box w-max z-50"
  >
    <li class="p-4 h-max">
      <div class="flex flex-col items-center justify-center gap-y-6">
        <div class="flex flex-row items-start gap-x-3">
          <div class="avatar">
            <div class="w-10 h-10 border-2 rounded-full">
              <img
                src={{auth()->user()?->picture ?? "/image/user.png"}}
                alt="Account"
                width="50"
              />
            </div>
          </div>
          <div class="flex flex-col w-full">
            <div class="font-bold">
              {{auth()->user()?->name}}
            </div>
            <p class="text-sm">
              {{auth()->user()?->email}}
            </p>
          </div>
        </div>
        <div class="flex flex-wrap items-center justify-between w-full gap-2">
          <a
            class="text-gray-700 cursor-pointer hover:text-primary"
            href="/"
          >
            <div class="flex flex-col items-center gap-2">
              <i class="fas fa-2x fa-home"></i>
              <p class="text-sm">Home</p>
            </div>
          </a>
          <a
            class="text-gray-700 cursor-pointer hover:text-primary"
            href="/app/dashboard"
          >
            <div class="flex flex-col items-center gap-2">
              <i class="fas fa-2x  fa-tachometer-alt"></i>
              <p class="text-sm">Dashboard</p>
            </div>
          </a>
          <form action="/logout" method="POST">
            @csrf
            <button
              type="submit"
              class="text-gray-700 cursor-pointer hover:text-primary"
            >
              <div class="flex flex-col items-center gap-2">
                <i class="fas fa-2x fa-sign-out-alt"></i>
                <p class="text-sm">Logout</p>
              </div>
            </button>
          </form>
        </div>
      </div>
    </li>
  </ul>
</div>    
@endif