@extends('layouts.mobiangra.theme')

@section('title', __('Alertas e avisos') . ' - ' . __('MobiAngra') . ' - ' . config('app.name'))

@section('content')
    <section class="mobiangra-subpage">
        <div class="container">
            <x-mobiangra.breadcrumb :items="[
                ['label' => 'MobiAngra', 'url' => route('mobiangra.index')],
                ['label' => __('Alertas e avisos')],
            ]" />

            <div class="mobiangra-subpage-card">
                <x-mobiangra.subpage-header :title="__('Alertas e avisos')" />

                <div class="p-4 mobiangra-subpage-body">
                    <p class="lead mb-4">
                        {{ __('Informações sobre trânsito, transporte público e avisos gerais para os usuários do MobiAngra.') }}
                    </p>

                    <div class="ma-alerts ma-alerts--page">
                        <x-mobiangra.alertas-list
                            :alertas="$alertas"
                            :empty-message="__('Nenhum alerta publicado no momento. Volte em breve.')" />
                    </div>

                    @if ($alertas->hasPages())
                        <div class="mt-4 d-flex justify-content-center">
                            {{ $alertas->links() }}
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection