{{-- Shared error panel. Vars: $code, $heading, $text, $icon, $buttons [[label, href, class]], $search (bool), $note (optional) --}}
@php
  $buttons = $buttons ?? [];
  $links = [['book-open', 'Browse courses', 'courses.index'], ['calendar', 'Batch calendar', 'calendar'], ['clipboard-check', 'Certification exams', 'exams.index'], ['shield', 'Verify a credential', 'verify'], ['briefcase', 'Career portal', 'careers.index'], ['phone', 'Contact us', 'contact']];
@endphp
<section class="er-wrap">
  <span class="blob b1" aria-hidden="true"></span><span class="blob b2" aria-hidden="true"></span>
  <div class="container er-grid">
    <div class="er-copy">
      <p class="er-kicker">Error {{ $code }}</p>
      <h1>{{ $heading }}</h1>
      <p class="lead">{{ $text }}</p>
      @isset($note)@if($note)<p class="er-note"><x-icon name="info" :size="16"/> {{ $note }}</p>@endif @endisset
      <div class="row er-actions">
        @foreach($buttons as [$label, $href, $cls])<a class="btn {{ $cls }} btn-lg" href="{{ $href }}" @if(str_starts_with($cls, 'btn-ghost')) @endif>{{ $label }}</a>@endforeach
      </div>
      @if($search ?? false)
        <form class="er-search" method="get" action="{{ route('courses.index') }}" role="search">
          <label class="sr-only" for="er-q">Search courses</label>
          <div class="searchbox"><x-icon name="search" :size="18"/><input id="er-q" class="input" type="search" name="q" placeholder="Search courses, e.g. AZ-104 or CCNA"></div>
          <button class="btn btn-secondary" type="submit">Search</button>
        </form>
      @endif
    </div>
    <div class="er-art" aria-hidden="true">
      <div class="er-hex"><x-icon :name="$icon" :size="76"/></div>
      <span class="er-ring r1"></span><span class="er-ring r2"></span>
      <span class="er-num">{{ $code }}</span>
    </div>
  </div>
  <div class="container er-links">
    <p class="er-links-title">Helpful places to go</p>
    <div class="grid g3">
      @foreach($links as [$ic, $label, $r])
        <a class="card card-hover er-link" href="{{ route($r) }}"><span class="cr-inc-ico"><x-icon :name="$ic" :size="20"/></span><b>{{ $label }}</b><x-icon name="arrow-right" :size="16"/></a>
      @endforeach
    </div>
  </div>
</section>