@php
    $cards  = $data['modal_cards'] ?? [];
    $chunks = collect($cards)->chunk(4);
@endphp

<div class="cwm-section">
    <div class="auto-container">
        @foreach ($chunks as $chunkIndex => $chunk)
            @php
                // Each card sits in a 25%-wide column (col-3). When a row has fewer
                // than 4 cards they get centered, so the green connector must shrink
                // to link only the first and last card centers of that row.
                $count  = $chunk->count();
                $inset  = (4 - $count) * 12.5 + 12.5;
            @endphp
            <div class="cwm-row">
                @if ($count > 1)
                    <div class="cwm-connector" style="left: {{ $inset }}%; right: {{ $inset }}%;"></div>
                @endif
                <div class="row justify-content-center">
                    @foreach ($chunk as $card)
                        @php $globalIndex = $chunkIndex * 4 + $loop->index; @endphp
                        <div class="col-lg-3 col-md-3 col-6 d-flex justify-content-center mb-4">
                            <button type="button"
                                    data-toggle="modal"
                                    data-target="#cwmModal_{{ $globalIndex }}"
                                    class="cwm-card wow fadeInUp">
                                <div class="cwm-img{{ empty($card['card_image']) ? ' cwm-img--placeholder' : '' }}"
                                     @if (!empty($card['card_image']))
                                         style="background-image: url('{{ Storage::url($card['card_image']) }}')"
                                     @endif>
                                </div>
                                <div class="cwm-name tiptap-content">
                                    {!! tiptap_converter()->asHTML(translate_data($card['card_text'])) !!}
                                </div>
                            </button>
                        </div>
                    @endforeach
                </div>
            </div>
        @endforeach
    </div>
</div>

@foreach ($cards as $cardIndex => $card)
    <div class="modal fade" id="cwmModal_{{ $cardIndex }}" tabindex="-1" role="dialog"
         aria-labelledby="cwmModalLabel_{{ $cardIndex }}" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header bg-green3">
                    <h5 class="modal-title text-white" id="cwmModalLabel_{{ $cardIndex }}">
                        {{ translate_data($card['modal_title']) }}
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="modal-body2 tiptap-content">
                        {!! tiptap_converter()->asHTML(translate_data($card['modal_content'])) !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach