@extends('layouts.promu.default')

@section('content')
    <section class="row container-pdm">
        <article id="procuradorias" class="container-fluid">
            <div class="container inner-pgPROMU">
                <div class="col-md-12">
                    <h2 class="title-promu">Procuradorias <br>Municipais</h2>
                    <p>Um dos principais objetivos da ProMu é a criação e consolidação de Procuradorias Municipais da
                        Mulher, instâncias do Poder Legislativo que darão suporte às causas femininas no interior do Paraná.
                    </p>
                </div>


            </div>
            <div class="container inner-pgPROMU">


                <table class="table table-striped">

                    <thead class="thead-dark">
                        <tr>
                            <th>MUNIC&Iacute;PIO</th>
                            <th>CARGO DA PROCURADORA</th>
                            <th>NOME DA PROCURADORA</th>
                            <th>EMAIL</th>
                            <th>TELEFONE DA PROMU</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($procuradorias as $procuradoria)
                            <tr>
                                <td>{{ $procuradoria->municipio }}</td>
                                <td>{{ $procuradoria->cargo_da_procuradora }}</td>
                                <td>{{ $procuradoria->nome_da_procuradora }}</td>
                                <td>{{ $procuradoria->email }}</td>
                                <td>{{ $procuradoria->telefone_da_promu }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>

            </div>

        </article>
    </section>

    <style>
        thead.thead-dark {
            background-color: #cd98ba;
        }

        .table-striped>tbody>tr:nth-of-type(odd) {
            --bs-table-accent-bg: #cd98ba45;
            color: #503e4f;
        }
    </style>
@endsection