@extends('layouts.app')
@section('title', __('Learning room'))
@section('content')
<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
  @forelse($resources as $resource)
    <article class="panel-card p-5">
      <span class="inline-flex rounded-full bg-rose-50 px-3 py-1 text-xs font-bold text-rose-700">{{ $resource->category }}</span>
      <h2 class="mt-3 font-bold text-slate-900">{{ $resource->title }}</h2>
      @if($resource->description)<p class="mt-2 text-sm leading-6 text-slate-500">{{ $resource->description }}</p>@endif
      <a href="{{ $resource->url }}" target="_blank" rel="noopener noreferrer" class="mt-5 inline-flex rounded-xl bg-blue-900 px-4 py-2.5 text-sm font-bold text-white">{{ __('Open learning resource') }} <span class="ml-2" aria-hidden="true">↗</span></a>
    </article>
  @empty<div class="panel-card px-5 py-12 text-center text-sm text-slate-400 sm:col-span-2 xl:col-span-3">{{ __('No learning resources available yet.') }}</div>@endforelse
</section>
<div class="mt-5">{{ $resources->links() }}</div>
@endsection