@extends('layouts.app')

@section('content')
<div class="container">
    <h2 class="mb-4">Communes de l'Agglomération</h2>

    <div class="row row-cols-1 row-cols-md-3 g-4">
        @foreach($municipalities as $municipality)
        <div class="col">
            <div class="card h-100 shadow-sm hover-shadow">
                <div class="card-body">
                    <h5 class="card-title">{{ $municipality->name }}</h5>
                    <p class="card-text text-muted">{{ $municipality->zip_code }}</p>
                </div>
                <div class="card-footer bg-white border-top-0">
                    <a href="{{ route('municipalities.show', $municipality) }}" class="btn btn-primary w-100">Voir la fiche</a>
                </div>
            </div>
        </div>
        @endforeach
    </div>
</div>

<style>
.hover-shadow:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    transition: box-shadow 0.3s ease-in-out;
}
</style>
@endsection