@extends('layouts.app')

@section('meta')
<title>Henrico Mugshots - Arrest Information & Booking Photos</title>
@endsection

@section('content')
    <h2 class="mt-10 mb-3 font-semibold text-center text-3xl">
        Recent Arrests
    </h2>

    <div class="grid  grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 sm:gap-2 lg:gap-4">
        @foreach ( $recent_arrests as $mugshot )
                    <div class="flex flex-col">
                <a href="{{$mugshot->url}}" class="hover:underline text-sm text-horange-200 flex flex-col items-center">
                    <div class="border border-solid border-gray-200 rounded-sm p-1">
                        <img src="{{$mugshot['image']}}" class="img-thumbnail" alt="Mugshot Photo of {{$mugshot['first_name']}} {{$mugshot['last_name']}}" title="Mugshot Photo of {{$mugshot['first_name']}} {{$mugshot['last_name']}}">
                    </div>
                    <span>{{$mugshot['first_name']}} {{$mugshot['last_name']}}</span>
                </a>
                <div class="flex flex-col items-center text-gray-600 text-sm">
                    <span>{{$mugshot['location']}}</span>
                    <span>{{$mugshot->booking_date}}</span>
                </div>
            </div>
        @endforeach
    </div>

    @include('shared.recent-news', ['news' => $news, 'news_mugshot' => $news_mugshot])


@endsection