@props(['signin', 'signup'])

<nav
  class="navbar navbar-expand-lg border-radius-lg z-index-3 position-absolute end-0 start-0 top-0 mx-4 mt-4 py-2 shadow blur"
>
  <div class="container-fluid pe-0 ps-2">
    <a
      class="navbar-brand font-weight-bolder ms-lg-0 d-flex flex-column ms-3"
      href="{{ route('dashboard') }}"
    >
      Material Dashboard 2
      <span>Laravel</span>
    </a>
    <button
      class="navbar-toggler ms-2 shadow-none"
      data-bs-toggle="collapse"
      data-bs-target="#navigation"
      type="button"
      aria-controls="navigation"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon mt-2">
        <span class="navbar-toggler-bar bar1"></span>
        <span class="navbar-toggler-bar bar2"></span>
        <span class="navbar-toggler-bar bar3"></span>
      </span>
    </button>
    <div
      class="navbar-collapse collapse"
      id="navigation"
    >
      <ul class="navbar-nav mx-auto">
        @auth
          <li class="nav-item">
            <a
              class="nav-link d-flex align-items-center active me-2"
              href="{{ route('dashboard') }}"
              aria-current="page"
            >
              <i class="fa fa-chart-pie opacity-6 text-dark me-1"></i>
              Dashboard
            </a>
          </li>
          <li class="nav-item">
            <a
              class="nav-link me-2"
              href="{{ route('profile') }}"
            >
              <i class="fa fa-user opacity-6 text-dark me-1"></i>
              Profile
            </a>
          </li>
        @endauth
        <li class="nav-item">
          <a
            class="nav-link me-2"
            href="{{ route($signup) }}"
          >
            <i class="fas fa-user-circle opacity-6 text-dark me-1"></i>
            Sign Up
          </a>
        </li>
        <li class="nav-item">
          <a
            class="nav-link me-2"
            href="{{ route($signin) }}"
          >
            <i class="fas fa-key opacity-6 text-dark me-1"></i>
            Sign In
          </a>
        </li>
      </ul>
      <ul class="navbar-nav d-lg-block d-none">
        <li class="nav-item">
          <a
            class="btn btn-sm bg-gradient-dark mb-0 me-1"
            href="https://www.creative-tim.com/product/material-dashboard-laravel"
            target="_blank"
          >Free
            download</a>
        </li>
      </ul>
    </div>
  </div>
</nav>
