@php
    $aboutPages = require resource_path('data/frontend-v3-about.php');
    $authorities = $aboutPages['messages']['authorities'] ?? [];
@endphp

<section class="content-section authority-section" style="padding-top: 100px !important;">

    <div class="container">

        <div class="section-heading mb-4">
            <p class="section-kicker">Official Desk</p>
            <h2 class="section-title">Messages from Management</h2>
            <div class="title-divider">
                <span></span>
            </div>
        </div>

        <div class="authority-carousel-wrap">
            <div id="authorityMessagesCarousel" class="carousel slide authority-carousel" data-bs-ride="carousel"
                data-bs-interval="5200">
                <div class="carousel-indicators">
                    @foreach ($authorities as $authoritySlug => $authority)
                        <button type="button" data-bs-target="#authorityMessagesCarousel"
                            data-bs-slide-to="{{ $loop->index }}" class="{{ $loop->first ? 'active' : '' }}"
                            @if ($loop->first) aria-current="true" @endif
                            aria-label="{{ $authority['designation'] }} message"></button>
                    @endforeach
                </div>

                <div class="carousel-inner">
                    @foreach ($authorities as $authoritySlug => $authority)
                        <div class="carousel-item {{ $loop->first ? 'active' : '' }}">
                            <article class="authority-slide-card">
                                <div class="authority-photo-panel">
                                    <img src="{{ $authority['image'] }}" alt="{{ $authority['name'] }}"
                                        style="object-position: {{ $authority['carouselPosition'] ?? 'center' }};">
                                    <div class="authority-photo-caption">
                                        <span><i class="bi {{ $authority['icon'] }}"></i> {{ $authority['designation'] }}</span>
                                    </div>
                                </div>
                                <div class="authority-message">
                                    <span class="authority-message-icon"><i class="bi {{ $authority['icon'] }}"></i></span>
                                    <span class="authority-message-label">{{ $authority['desk'] }}</span>
                                    <h3>{{ $authority['title'] }}</h3>
                                    <p>{{ $authority['summary'] }}</p>
                                    <a href="{{ url('/about/messages/'.$authoritySlug) }}" class="publication-link">
                                        Read Message <i class="bi bi-arrow-right"></i>
                                    </a>
                                </div>
                            </article>
                        </div>
                    @endforeach
                </div>
            </div>

            <button class="authority-carousel-control prev" type="button"
                data-bs-target="#authorityMessagesCarousel" data-bs-slide="prev" aria-label="Previous message">
                <i class="bi bi-chevron-left"></i>
            </button>
            <button class="authority-carousel-control next" type="button"
                data-bs-target="#authorityMessagesCarousel" data-bs-slide="next" aria-label="Next message">
                <i class="bi bi-chevron-right"></i>
            </button>
        </div>

    </div>

</section>