@extends('layouts.base')
@section('heading')
     {{-- {{ $car->name.' - ' . $car->number }} --}}
     {{ $user->name }}'s Car Documents
@endsection
@section('info')
    All Documents
@endsection
@section('focus_action')
    {{-- <form action="{{ route('cars.documents.create', $car->id) }}" method="get">
        @csrf
        <button type="submit" class="text-sm text-blue-500 hover:text-blue-700">
            ADD A DOCUMENT +
        </button>
    </form> --}}
@endsection
@section('body')
    <div>
        <div class="p-2 sm:grid sm:grid-cols-2 md:grid-cols-3_ gap-2">
            @php
                $documents = $user->documents()->paginate(10)
            @endphp
            @foreach ($documents as $document)
                <div class="m-2">
                    <a href="{{ route('documents.show', ['document' => $document->id]) }}" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500">
                        <div class="flex items-center_ space-x-3_">
                            {{-- <svg class="h-6 w-6 stroke-sky-500 group-hover:stroke-white" fill="none" viewBox="0 0 24 24"><!-- ... --></svg> --}}
                            <h3 class="text-slate-900 group-hover:text-white text-sm font-semibold">{{ $document->file->name ?? null }} | {{ $document->car->name }}</h3>
                        </div>
                        <p class="text-slate-500 group-hover:text-white text-sm">Reminders: {{ $document->file->name ?? null }} - {{ $document->car->number ?? null }}</p>
                    </a>
                </div>
            @endforeach
        </div>
        <div class="text-sm inline-flex items-center">
            {{ $documents->onEachSide(5)->links() }}
            {{-- {{ $project_projects->onEachSide(5)->links('vendor.pagination.hls-simple') }} --}}
        </div>
    </div>
@endsection