@extends('frontend-v3.pages.layout')

{{-- Admin-managed newsletter issue (App\Models\Newsletter). Same design as the event page: reuses the events styles/scripts
     partials (.cultural-event-*). Body HTML is sanitised on save (App\Support\HtmlSanitizer). --}}
@section('page')
    @include('frontend-v3.pages.events.styles')
    @include('frontend-v3.pages.newsletters.styles')
    <div class="cultural-event-page" data-skip-entry-animation>
        <section class="cultural-event-hero" aria-labelledby="newsletter-title">
            <div class="container">
                <nav class="cultural-event-breadcrumb" aria-label="Breadcrumb"><a href="{{ url('/') }}">Home</a><span>/</span><span>Archives</span><span>/</span><a href="{{ route('frontend-v3.newsletters.index') }}">Monthly Newsletter</a><span>/</span><span aria-current="page">{{ $newsletterTitle }}</span></nav>
                <div class="cultural-event-hero-grid">
                    <div class="cultural-event-copy" data-event-hero>
                        <span class="cultural-event-label">Monthly Newsletter @if (filled($issueLabel))&middot; {{ $issueLabel }}@endif</span>
                        <h1 id="newsletter-title">{{ $newsletterTitle }}</h1>
                        @if (filled($newsletterSummary))
                            <div class="cultural-event-divider" aria-hidden="true"><span></span><i></i><span></span></div>
                            <p>{{ $newsletterSummary }}</p>
                        @endif
                        @if ($pdfUrl || filled($newsletterBody))
                            <div class="newsletter-hero-actions">
                                @if ($pdfUrl)
                                    <a class="btn hero-btn hero-btn-red newsletter-download" href="{{ $pdfUrl }}" target="_blank" rel="noopener">Download PDF<i class="bi bi-download" aria-hidden="true"></i></a>
                                @endif
                                @if (filled($newsletterBody))
                                    <a class="cultural-event-discover" href="#newsletter-story"><span class="cultural-event-arrow" aria-hidden="true">&#8595;</span><span>Read the issue</span></a>
                                @endif
                            </div>
                        @endif
                    </div>
                    <figure class="cultural-event-visual" data-event-hero><span class="cultural-event-visual-border" aria-hidden="true"></span><img src="{{ $newsletterImage }}" alt="{{ $newsletterImageAlt }}" fetchpriority="high"></figure>
                </div>
            </div>
        </section>
        @if (filled($newsletterBody))
            <section class="cultural-event-story" id="newsletter-story" aria-label="Newsletter">
                <div class="container">
                    <div class="cultural-event-story-body" data-event-reveal>{!! $newsletterBody !!}</div>
                    @if ($pdfUrl)
                        <div class="newsletter-story-actions">
                            <a class="btn hero-btn hero-btn-red newsletter-download" href="{{ $pdfUrl }}" target="_blank" rel="noopener">Download PDF<i class="bi bi-download" aria-hidden="true"></i></a>
                        </div>
                    @endif
                </div>
            </section>
        @endif
    </div>
    @include('frontend-v3.pages.events.scripts')
@endsection