<div class="col-12 mb-3">
    <div class="row d-flex flex-column align-items-center">
        <div class="col">
            <div class="card-slug mb-5" data-telefones-toggle-wrap>
                <h2 class="slug-telefone">{{ __('Contatos') }}</h2>

                <ul id="telefones-container" class="list-unstyled">
                    @forelse($telefones as $index => $telefone)
                    <li class="telefone-item {{ $index >= 5 ? 'd-none' : '' }}">
                        <h5 class="slug-summary mt-3">{{ $telefone['telefone'] }}</h5>
                        <ul class="list-unstyled">
                            @foreach($telefone['numeros'] as $numero)
                            <li>
                                <i class="bi bi-telephone icon-telefone" aria-hidden="true"></i>
                                <a class="text-dark text-decoration-none tel-number" href="tel:{{ $numero['link'] }}">
                                    {{ $numero['numero'] }}
                                </a>
                            </li>
                            @endforeach
                        </ul>
                    </li>
                    @empty
                        <li>{{ __('* Nenhum telefone encontrado!') }}</li>
                    @endforelse
                </ul>

                @if(count($telefones) > 5)
                <button type="button"
                        class="text-center btn text-secondary rounded-5 bg-light mt-3"
                        data-telefones-toggle-btn
                        data-label-more="{{ __('Ver mais') }}"
                        data-label-less="{{ __('Mostrar menos') }}">{{ __('Ver mais') }}</button>
                @endif

            </div>
        </div>
    </div>
</div>
@once
    @push('scripts')
        <script src="{{ asset('pmar/js/telefones-toggle.js') }}" defer></script>
    @endpush
@endonce
