{{--
    Apple-glass RSVP popup (#4). One instance lives in the public layout so the
    RSVP menu item and the bottom "Confirm Attendance" button (any element with
    [data-rsvp-open]) open the same sheet. Bottom-sheet on mobile, centred glass
    card on desktop. Closes on the close button, the backdrop, or Escape.
--}}
@php($wording = app(\App\Services\LandingPageWording::class))
<div x-data="rsvpModal"
     x-show="open"
     x-cloak
     class="lg-sheetmodal"
     x-transition.opacity
     @keydown.escape.window="close()"
     role="presentation">
    <div class="lg-sheetmodal__backdrop" @click="close()"></div>

    <div class="lg-sheetmodal__sheet"
         role="dialog"
         aria-modal="true"
         aria-label="{{ $wording('landing.navigation.rsvp') }}"
         @click.stop>
        <button type="button" class="lg-sheetmodal__close" @click="close()" aria-label="{{ $wording('landing.common.close') }}">&times;</button>
        <div class="lg-sheetmodal__body">
            <livewire:rsvp-form :popup="true" />
        </div>
    </div>
</div>