@extends('layouts.'.env('THEME'))

@section('content')

<div class="container" id="main-container">

    <x-section_heading title="Local areas" subtitle="See the latest news for the local areas we operate within." rowclass="mt-5"/>

    <div class="row mt-2">
        <div class="col-12">
            <table class="table table-bordered" id="area_list">
                <tbody>
                    @foreach($areas as $area)
                    <tr style="font-size: 1.2rem; font-weight: 600;">
                        <td>
                            <a href="/areas/{{ urlencode($area->name) }}">
                                {{ $area->name }}
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>{{ $area->description }}</td>
                    </tr>
                    <tr>
                        <td colspan="2"></td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <x-section_heading title="Can't find your area?" subtitle="Let us know and we'll add it to our list." rowclass="mt-5"/>
     <x-contact />

</div>
@endsection