@extends('layouts.app')

@section('title', 'Familles · ' . $organization->name)
@section('eyebrow', 'Cockpit crèche')
@section('heading', 'Familles')

@section('content')
<div class="family-page">
    <div class="family-page-head">
        <div class="family-page-title">
            <span class="family-page-icon">
                <svg viewBox="0 0 24 24" aria-hidden="true">
                    <circle cx="9" cy="8" r="3"/>
                    <circle cx="17" cy="9" r="2.5"/>
                    <path d="M3.5 20c.4-4 2.4-6 5.5-6s5.1 2 5.5 6"/>
                    <path d="M14.5 15.2c.8-.8 1.7-1.2 2.8-1.2 2.3 0 3.7 1.7 4.2 4.8"/>
                </svg>
            </span>

            <div>
                <h2>Familles</h2>
                <p>Responsables, enfants et coordonnées regroupés au même endroit.</p>
            </div>
        </div>

        <a class="btn primary" href="{{ route('tenant.families.create') }}">
            + Ajouter une famille
        </a>
    </div>

    <form
        class="family-search"
        method="get"
        action="{{ route('tenant.families.index') }}"
        data-family-search
    >
        <span class="family-search-icon">
            <svg viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="11" cy="11" r="7"/>
                <path d="m16 16 5 5"/>
            </svg>
        </span>

        <label class="sr-only" for="family-search-input">
            Rechercher une famille
        </label>

        <input
            id="family-search-input"
            type="search"
            name="q"
            value="{{ $search }}"
            placeholder="Rechercher par famille, responsable ou enfant…"
            autocomplete="off"
            data-family-search-input
        >

        <button
            class="family-search-reset {{ $search === '' ? 'is-hidden' : '' }}"
            type="button"
            data-family-search-reset
        >
            Effacer
        </button>

        <button class="btn primary family-search-submit" type="submit">
            Rechercher
        </button>
    </form>

    <div
        class="family-search-loading"
        aria-live="polite"
        data-family-search-status
    ></div>

    <div data-family-results>
        @include('tenant.families.partials.list', [
            'families' => $families,
            'search' => $search,
        ])
    </div>
</div>
@endsection