@extends('layouts.site')

@section('content')
<section class="on-dark section !pb-16">
    <div class="wrap max-w-4xl">
        <p class="eyebrow">Work</p>
        <h1 class="display">{{ \App\Support\Text::accent('Projects we have *shipped*.') }}</h1>
    </div>
</section>

<section class="on-light section !py-14">
    <div class="wrap">
        <form method="get" class="mb-10 flex flex-wrap gap-4" aria-label="Filter case studies">
            <div><label class="label" for="industry">Industry</label>
                <select id="industry" name="industry" class="field" onchange="this.form.submit()">
                    <option value="">All</option>
                    @foreach ($industries as $i)<option value="{{ $i }}" @selected($industry === $i)>{{ $i }}</option>@endforeach
                </select></div>
            <div><label class="label" for="service">Service</label>
                <select id="service" name="service" class="field" onchange="this.form.submit()">
                    <option value="">All</option>
                    @foreach ($services as $s)<option value="{{ $s->slug }}" @selected($service === $s->slug)>{{ $s->name }}</option>@endforeach
                </select></div>
            <noscript><button class="btn btn-primary self-end">Filter</button></noscript>
        </form>

        @forelse ($cases as $c)
            <a href="{{ route('work.show', $c->slug) }}" class="rule-row group">
                <span class="flex-1 font-display text-2xl tracking-tight">{{ $c->title }}</span>
                <span class="hidden text-muted sm:block">{{ $c->client_name }}@if ($c->industry), {{ $c->industry }}@endif</span>
                <span class="text-violet">@include('partials.arrow')</span>
            </a>
        @empty
            <p class="max-w-xl text-lg text-muted">Case studies appear here as projects finish and clients agree to share them. Until then, <a class="text-violet underline underline-offset-4" href="{{ route('start-project.show') }}">tell us about your project</a>.</p>
        @endforelse

        <div class="mt-10">{{ $cases->links() }}</div>
    </div>
</section>
<x-cta-band />
@endsection