<div>
    <!-- Principles Acceptance Modal - Only render if principles post exists -->
    @if($principlesPost && $principlesPost->translations->isNotEmpty())
        <x-jetstream.dialog-modal wire:model.live="showPrinciplesModal" maxWidth="4xl">
            <x-slot name="title">
                {{ __('Read this before you decide to register') }}
            </x-slot>

            <x-slot name="content">
                @php
                    $translation = $principlesPost->translations->first();
                @endphp

                <div class="space-y-6">
                    <!-- Title -->
                    @if($translation->title)
                        <h3 class="text-2xl font-semibold text-theme-primary">{{ $translation->title }}</h3>
                    @endif

                    <!-- Excerpt -->
                    @if($translation->excerpt)
                        <p class="text-base leading-relaxed text-theme-secondary">{{ $translation->excerpt }}</p>
                    @endif

                    <!-- Image -->
                    @if($principlesPost->hasMedia('*'))
                        <img src="{{ $principlesPost->getFirstMediaUrl('*') }}"
                             alt="{{ $principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale) }}"
                             class="w-full h-auto rounded-md">
                        @if($principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale))
                            <p class="text-sm text-theme-muted">
                                {{ $principlesPost->getFirstMedia('*')->getCustomProperty('caption-' . $translation->locale) }}
                            </p>
                        @endif
                    @endif

                    <!-- Content -->
                    @if($translation->content && strlen(trim(strip_tags($translation->content))) > 0)
                        <div class="prose max-w-none text-theme-primary">
                            {!! \App\Helpers\StringHelper::sanitizeHtml($translation->content) !!}
                        </div>
                    @endif

                    <!-- Acceptance Checkbox -->
                    <div class="mt-6 border-t pt-6">
                        <label class="flex items-start space-x-3 cursor-pointer">
                            <x-jetstream.checkbox wire:model="principlesAgreed" />
                            <span class="text-theme-primary">
                                {{ __('I have read and accept the platform principles described above.') }}
                            </span>
                        </label>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <div class="flex justify-end" x-data="{ agreed: @entangle('principlesAgreed') }">
                    <x-jetstream.button
                        wire:click="acceptPrinciples"
                        x-bind:disabled="!agreed"
                        wire:loading.attr="disabled">
                        <span wire:loading.remove wire:target="acceptPrinciples">
                            {{ __('Accept Principles') }}
                        </span>
                        <span wire:loading wire:target="acceptPrinciples">
                            {{ __('Processing...') }}
                        </span>
                    </x-jetstream.button>
                </div>
            </x-slot>
        </x-jetstream.dialog-modal>
    @endif

    <!-- Registration Form Modal -->
    <x-jetstream.dialog-modal wire:model.live="principlesAccepted" maxWidth="2xl">
        <x-slot name="title">
            {{ __('Register') }}
        </x-slot>

        <x-slot name="content">
          
            <form wire:submit="create">
                @csrf

                <div class="space-y-4 max-w-md">
                    <div>
                        <x-jetstream.label for="full_name" value="{{ __('Full name') }}" />
                        <x-jetstream.input :value="old('full_name')" autocomplete="name" autofocus
                                            placeholder="{{__('Your real, full name, only visible for') . ' ' . __('messages.platform_users')}}"
                                            class="mt-1 block w-full" name="full_name" required
                                            type="text" wire:model.blur="full_name" />
                        @error('full_name')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <x-jetstream.label for="name" value="{{ __('Username') }}" />
                        <x-jetstream.input :value="old('name')" autocomplete="username"
                                            placeholder="{{__('Unique and public name, also used outside this platform')}}"
                                            class="mt-1 block w-full" name="name" required
                                            type="text" wire:model.blur="name" />
                        @error('name')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <x-jetstream.label for="email" value="{{ __('Email') }}" />
                        <x-jetstream.input :value="old('email')" class="mt-1 block w-full" name="email" required
                                            type="email" wire:model.blur="email" />
                        @error('email')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div x-data="{ showPassword: false }">
                        <x-jetstream.label for="password" value="{{ __('Password') }}" />
                        <div class="relative">
                            <x-jetstream.input autocomplete="new-password" class="mt-1 block w-full pr-10"
                                                name="password" required ::type="showPassword ? 'text' : 'password'"
                                                wire:model.blur="password" />
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                                <button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                                    <template x-if="!showPassword">
                                        <x-icon name="eye" class="h-5 w-5" />
                                    </template>
                                    <template x-if="showPassword">
                                        <x-icon name="eye-slash" class="h-5 w-5" />
                                    </template>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div x-data="{ showPassword: false }">
                        <x-jetstream.label for="password_confirmation" value="{{ __('Confirm Password') }}" />
                        <div class="relative">
                            <x-jetstream.input class="mt-1 block w-full pr-10" name="passwordConfirmation" required
                                                ::type="showPassword ? 'text' : 'password'" wire:model.blur="password_confirmation" />
                            <div class="absolute inset-y-0 right-0 pr-3 flex items-center text-sm leading-5">
                                <button type="button" @click="showPassword = !showPassword" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:text-gray-700">
                                    <template x-if="!showPassword">
                                        <x-icon name="eye" class="h-5 w-5" />
                                    </template>
                                    <template x-if="showPassword">
                                        <x-icon name="eye-slash" class="h-5 w-5" />
                                    </template>
                                </button>
                            </div>
                        </div>
                        @error('password')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <div wire:init="emitLocationToChildren">
                        @livewire('locations.locations-dropdown')
                        @error('country')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        @error('division')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                        @error('city')
                            <p class="text-sm text-red-500">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- GDPR Age Verification -->
                    <div class="border-t pt-4">
                        <label class="flex items-start space-x-3 cursor-pointer">
                            <x-jetstream.checkbox wire:model="ageConfirmed" required />
                            <span class="text-sm text-theme-primary">
                                {{ __('I confirm that I am at least :age years old (or the age of digital consent in my country)', ['age' => timebank_config('auth.minimum_registration_age')]) }}
                            </span>
                        </label>
                        @error('ageConfirmed')
                            <p class="text-sm text-red-500 mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    @error('captcha')
                        <p class="text-sm text-red-500">{{ $message }}</p>
                    @enderror
                </div>
            </form>
        </x-slot>

        <x-slot name="footer">
            <div class="flex items-center justify-between w-full">
                @if ($waitMessage)
                    <span>{{ __('Please wait...') }}</span>
                @else
                    <a class="text-sm text-theme-secondary underline hover:text-theme-primary"
                        href="{{ route('login') }}">
                        {{ __('Already registered?') }}
                    </a>
                @endif
                <x-jetstream.button wire:click="create" wire:loading.attr="disabled">
                    <span wire:loading.remove wire:target="create">
                        {{ __('Register') }}
                    </span>
                    <span wire:loading wire:target="create">
                        {{ __('Processing...') }}
                    </span>
                </x-jetstream.button>
            </div>
        </x-slot>
    </x-jetstream.dialog-modal>
</div>
