@extends('layouts.app')

@section('title', $title)
@section('description', $description)
@section('canonical', $canonical)
@section('robots', $robots)

@push('head')
    @if ($posts->previousPageUrl())<link rel="prev" href="{{ $posts->previousPageUrl() }}">@endif
    @if ($posts->nextPageUrl())<link rel="next" href="{{ $posts->nextPageUrl() }}">@endif
@endpush

@section('content')
    @if ($isHome)
        <section class="hero">
            <div>
                <h1>{{ $h1 }}</h1>
                <p>Post healthcare jobs for free, and find nursing, allied health, therapy, pharmacy and other healthcare jobs worldwide. English-language listings. Candidates apply through a private relay, so your email stays private.</p>
            </div>
            <div class="hero-cta">
                <a class="btn accent" href="{{ route('post-a-job') }}" data-ga-event="cta_click" data-ga-cta="post_a_job" data-ga-place="board">Post a job free</a>
                <a class="btn" href="{{ route('job-alerts') }}" data-ga-event="cta_click" data-ga-cta="job_alerts" data-ga-place="board">Get job alerts</a>
            </div>
        </section>
    @else
        <nav class="crumbs" aria-label="Breadcrumb"><a href="{{ route('home') }}">Jobs</a><span>›</span>{{ $h1 }}</nav>
        <section class="hero">
            <div>
                <h1>{{ $h1 }}</h1>
                <p>{{ $description }}</p>
            </div>
            <div class="hero-cta">
                <a class="btn accent" href="{{ route('post-a-job') }}" data-ga-event="cta_click" data-ga-cta="post_a_job" data-ga-place="board">Post a job free</a>
                <a class="btn" href="{{ route('job-alerts') }}" data-ga-event="cta_click" data-ga-cta="job_alerts" data-ga-place="board">Get job alerts</a>
            </div>
        </section>
    @endif

    <form class="board" method="get" action="{{ $formAction }}" id="board-form">
        <div class="searchrow">
            <input type="search" name="q" value="{{ $f['q'] }}" placeholder="Job title, credential or employer (e.g. RN, travel, PRN)" aria-label="Search jobs">
            <input type="search" name="loc" value="{{ $f['loc'] }}" placeholder="City, state or country" aria-label="Location" class="loc">
            <button class="btn primary" type="submit">Search</button>
        </div>
        <div class="layout">
            <details class="filters-wrap" open>
                <summary class="btn mobile-filter-toggle">Filters</summary>
                @include('board._filters')
            </details>
            <div>
                <div class="resultbar">
                    <div><strong class="num">{{ number_format($posts->total()) }}</strong> <span class="muted">{{ $posts->total() === 1 ? 'job' : 'jobs' }}</span></div>
                    <label class="muted small">Sort
                        <select name="sort" aria-label="Sort">
                            <option value="new" @selected($f['sort'] === 'new')>Newest first</option>
                            <option value="pay" @selected($f['sort'] === 'pay')>Highest pay</option>
                            <option value="closing" @selected($f['sort'] === 'closing')>Closing soon</option>
                        </select>
                    </label>
                </div>
                @if ($chips)
                    <div class="chips">
                        @foreach ($chips as [$label, $href])
                            <a class="chip x" href="{{ $href }}" aria-label="Remove filter: {{ $label }}">{{ $label }}</a>
                        @endforeach
                    </div>
                @endif

                @if ($posts->isEmpty())
                    <div class="card empty">
                        <h2>No jobs match yet</h2>
                        <p>Try fewer filters, or get new matching jobs by email.</p>
                        <p><a class="btn" href="{{ route('job-alerts') }}" data-ga-event="cta_click" data-ga-cta="job_alerts" data-ga-place="board">Get job alerts</a> <a class="btn accent" href="{{ route('post-a-job') }}" data-ga-event="cta_click" data-ga-cta="post_a_job" data-ga-place="board">Post a job free</a></p>
                    </div>
                @else
                    <div class="list" data-seen="{{ \App\Services\Analytics\SeenToken::make('results', $posts->getCollection()->pluck('id')->all(), ($posts->currentPage() - 1) * $posts->perPage()) }}">
                        @php $group = null; @endphp
                        @foreach ($posts as $p)
                            @if ($f['sort'] === 'new')
                                @php
                                    $age = $p->bumped_at ? $p->bumped_at->diffInHours(now()) : 999;
                                    $g = $age < 24 ? 'Today' : ($age < 48 ? 'Yesterday' : ($age < 168 ? 'This week' : 'Older'));
                                @endphp
                                @if ($p->isFeatured())
                                    @php $g = 'Featured'; @endphp
                                @endif
                                @if ($g !== $group)
                                    <div class="grp">{{ $g }}</div>
                                    @php $group = $g; @endphp
                                @endif
                            @endif
                            @include('board._row', ['p' => $p])
                            @if (isset($slots[$loop->index]))
                                @include('partials.sponsor', ['s' => $slots[$loop->index]])
                            @endif
                        @endforeach
                    </div>
                    {{ $posts->onEachSide(1)->links('pagination::simple-default') }}
                @endif
            </div>
        </div>
    </form>

    @if ($isHome && $latestPosts->isNotEmpty())
        <section class="home-blog">
            <div class="adm-head"><h2>From the blog</h2><a href="{{ route('blog.index') }}">All articles →</a></div>
            <div class="post-grid three">
                @foreach ($latestPosts as $post)
                    @include('blog._card', ['post' => $post])
                @endforeach
            </div>
        </section>
    @endif
@endsection