@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-16"><div class="wrap max-w-4xl">
    <p class="eyebrow">Academy</p>
    <h1 class="display">{{ \App\Support\Text::accent('Learn the *systems* side.') }}</h1>
    <p class="lead mt-6">Courses from the Webnedrix team on building and running a business on better systems.</p>
</div></section>
<section class="on-light section !py-14"><div class="wrap">
    @if ($categories->isNotEmpty())
        <div class="mb-10 flex flex-wrap gap-2">
            <a class="chip {{ !$category ? 'bg-ink text-ice' : '' }}" href="{{ route('academy.index') }}">All</a>
            @foreach ($categories as $c)<a class="chip {{ $category === $c->slug ? 'bg-ink text-ice' : '' }}" href="{{ route('academy.index', ['category' => $c->slug]) }}">{{ $c->name }}</a>@endforeach
        </div>
    @endif
    @forelse ($courses as $c)
        <a href="{{ route('academy.show', $c->slug) }}" class="rule-row group">
            <span class="flex-1"><span class="font-display text-2xl tracking-tight">{{ $c->title }}</span>@if ($c->summary)<span class="mt-1 block text-muted">{{ $c->summary }}</span>@endif</span>
            <span class="chip">{{ $c->access->value === 'free' ? 'Free' : ($c->price ? $c->currency . ' ' . number_format((float) $c->price) : 'Paid') }}</span>
        </a>
    @empty
        <p class="max-w-xl text-lg text-muted">Courses are being prepared. Check back soon.</p>
    @endforelse
    <div class="mt-10">{{ $courses->links() }}</div>
</div></section>
@endsection