@php
    $layout = Auth::check() ? 'app-layout' : 'guest-layout';
@endphp

<x-dynamic-component :component="$layout">
    <x-slot name="header">
            {{ $category }}
    </x-slot>

    <div class="py-0 md:py-12" id="custom-timebank-style">
        <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
            <div class="overflow-hidden bg-theme-background shadow-xl sm:rounded-lg">
                <div class="border-b border-theme-primary bg-theme-background p-6 sm:px-20 lg:px-32 lg:py-18">
                    @auth
                        <livewire:posts.manage-actions :post="$post" />
                    @endauth
                    <div class="mb-2 mt-0 md:mt-6 lg:mt-12">
                        <div class="text-xs lg:text-sm text-theme-secondary">{{ $update }}</div>
                    </div>
                    <h2 class="mt-4 lg:mt-8 text-3xl lg:text-5xl font-semibold leading-tight text-theme-primary">
                        {{ $translation->title }}
                    </h2>

                    @if ($post->poll->closes_at && !$post->poll->isClosed())
                        <h3 class="mt-4 lg:mt-8 text-xl lg:text-2xl font-semibold leading-tight text-theme-primary">
                            {{ __('Open until :date', ['date' => $post->poll->closes_at->locale(App::getLocale())->isoFormat('LLL')]) }}
                        </h3>
                    @endif

                    @if ($translation->excerpt)
                        <div class="mt-6">
                            <div class="px-0 py-2 text-xl lg:text-2xl leading-normal lg:leading-loose font-bold text-theme-primary">
                                {{ $translation->excerpt }}
                            </div>
                        </div>
                    @endif

                    <!-- Image -->
                    @if ($media)
                        <div class="my-4 lg:my-12">
                            {{ $media('hero', ['class' => 'w-full h-auto']) }}
                            @php
                                $imageCaption = $media->getCustomProperty('caption-' . App::getLocale());
                                if (!$imageCaption) {
                                    foreach (array_keys(config('laravellocalization.supportedLocales')) as $fallbackLocale) {
                                        $imageCaption = $media->getCustomProperty('caption-' . $fallbackLocale);
                                        if ($imageCaption) {
                                            break;
                                        }
                                    }
                                }
                                $captionText = implode(' ', array_filter([$imageCaption, $media->getCustomProperty('owner')]));
                            @endphp
                            @if ($captionText)
                                <div class="mt-1 lg:mt-2 text-right text-3xs lg:text-xs text-theme-secondary">
                                    {{ $captionText }}
                                </div>
                            @endif
                        </div>
                    @endif

                    @if ($translation->content)
                        <div class="post-content mt-2 lg:mt-6 mb-12 lg:mb-16 lg:mx-32 text-base lg:text-lg leading-relaxed md:leading-loose lg:leading-loose text-theme-primary">
                            {!! \App\Helpers\StringHelper::sanitizeHtml($translation->content) !!}
                        </div>
                    @endif

                    <!-- Poll -->
                    <div class="my-12 bg-theme-surface rounded-lg p-6 md:mx-32 border">
                        @auth
                            @if ($switchProfiles)
                                {{-- The active profile may not take part, another of the user's profiles may --}}
                                <div class="space-y-3">
                                    <p class="text-base text-theme-primary">{{ __('This poll is for another of your profiles. Switch to take part:') }}</p>
                                    <div class="flex flex-wrap gap-3">
                                        @foreach ($switchProfiles as $switchProfile)
                                            <x-jetstream.button onclick="window.location.href = '{{ $switchProfile['url'] }}'" class="bg-theme-brand hover:bg-opacity-80">
                                                {{ __('Take part as :name', ['name' => $switchProfile['name']]) }}
                                            </x-jetstream.button>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                            <livewire:polls.poll-form :pollId="$post->poll->id" context="page" :wire:key="'poll-page-'.$post->poll->id" />
                        @endauth
                    </div>

                    @auth
                        @if ($post->poll->verification !== 'off' && $post->poll->status !== 'draft')
                            <p class="mb-6 text-sm text-theme-secondary md:mx-32">
                                <a href="{{ route('polls.verify', $post->poll) }}" class="underline">{{ __('Verify this poll') }}</a>
                                @if ($post->poll->sealed_at)
                                    · {{ __('Sealed') }}: <code class="font-mono text-xs break-all">{{ substr($post->poll->seal_hash, 0, 16) }}…</code>
                                @endif
                            </p>
                        @endif
                    @endauth

                    <!-- Share -->
                    <div class="flex flex-wrap gap-2">
                        {!! Share::mastodon()->bluesky()->linkedin()->instagram()->facebook()->whatsapp()->text($translation->title)->render() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-dynamic-component>