@php
  $levels = $megaStudyLevels ?? collect();
@endphp
<div class="courses-mega" id="coursesMegaMenu" hidden>
  <div class="courses-mega__backdrop" data-mega-close tabindex="-1" aria-hidden="true"></div>
  <div class="courses-mega__panel" role="dialog" aria-label="Browse courses by study level">
    <div class="container courses-mega__inner">
      <div class="courses-mega__intro">
        <h3 class="courses-mega__headline">All your options for your Higher Education journey.</h3>
        <a href="{{ route('courses') }}" class="courses-mega__view-all">
          View All <i class="fas fa-arrow-up-right-from-square" aria-hidden="true"></i>
        </a>
        <button type="button" class="courses-mega__close" data-mega-close aria-label="Close courses menu">Close</button>
      </div>

      @if($levels->isNotEmpty())
        <div class="courses-mega__grid">
          @foreach($levels as $level)
            <a href="{{ route('courses.level', $level->slug) }}"
               class="courses-mega__item {{ request()->routeIs('courses.level') && request()->route('level') === $level->slug ? 'is-active' : '' }}">
              <span class="courses-mega__icon" aria-hidden="true">
                <i class="{{ $level->iconClass() }}"></i>
              </span>
              <span class="courses-mega__copy">
                <span class="courses-mega__title">{{ $level->name }}</span>
                <span class="courses-mega__desc">
                  {{ $level->description ?: 'Browse '.$level->name.' programmes with FBA UK LTD.' }}
                </span>
              </span>
            </a>
          @endforeach
        </div>
      @else
        <div class="courses-mega__empty">
          <p>Course study levels will appear here once they are published.</p>
          <a href="{{ route('courses') }}" class="btn btn-primary btn-sm">Browse all courses</a>
        </div>
      @endif
    </div>
  </div>
</div>