@unless ($breadcrumbs->isEmpty())
    <div class="card card-body py-3">
      <div class="row align-items-center">
        <div class="col-12">
          <div class="d-sm-flex align-items-center justify-space-between">
            <h4 class="mb-4 mb-md-0">
              @if(isset($breadcrumbs[count($breadcrumbs)-1]?->mainTitle))
                {{ $breadcrumbs[count($breadcrumbs)-1]?->mainTitle }}
              @else
                {{ $breadcrumbs[count($breadcrumbs)-1]?->title }}
              @endif
            </h4>
            <nav aria-label="breadcrumb" class="ms-auto">
              <ol class="breadcrumb">
                <li class="breadcrumb-item d-flex align-items-center">
                  <a class="text-muted text-decoration-none d-flex" href="{{ route('dashboard') }}">
                    <iconify-icon icon="solar:home-2-line-duotone" class="fs-6"></iconify-icon>
                  </a>
                </li>
                @foreach ($breadcrumbs as $breadcrumb)
                  @if ($breadcrumb->url && !$loop->last)
                    <li class="breadcrumb-item" aria-current="page">
                      <a href="{{ $breadcrumb->url }}">
                        <span class="badge fw-medium fs-2 bg-primary-subtle text-primary">
                          @if(isset($breadcrumb->icon))
                            <i class="{{ $breadcrumb->icon }} me-1" ></i>
                          @endif
                          {{ $breadcrumb->title }}
                        </span>
                      </a>
                    </li>
                  @else
                    <li class="breadcrumb-item" aria-current="page">
                      <span class="badge fw-medium fs-2 bg-primary-subtle text-primary">
                        @if(isset($breadcrumb->icon))
                          <i class="{{ $breadcrumb->icon }} me-1" ></i>
                        @endif
                        {{ $breadcrumb->title }}
                      </span>
                    </li>
                  @endif
                @endforeach

              </ol>
            </nav>
          </div>
        </div>
      </div>
    </div>
@endunless