<div class="flex flex-col">

    {{-- HEADER --}}
    <div class="px-6 py-4 border-b border-gray-200 flex items-center gap-3">
        <div class="w-10 h-10 rounded-xl bg-red-100 flex items-center justify-center">
            ⚠
        </div>

        <div>
            <div class="text-sm font-semibold text-gray-900">
                {{ t('agent.conflict.title') }}
            </div>

            <div class="text-xs text-gray-500">
                {{ t('agent.conflict.subtitle') }}
            </div>
        </div>
    </div>


    {{-- BODY --}}
    <div class="px-6 py-5 space-y-5">

        {{-- DEIN TERMIN --}}
        <div class="bg-gray-50 border border-gray-200 rounded-xl p-4">
            <div class="text-xs text-gray-500 mb-1">{{ t('agent.conflict.your_event') }}</div>

            <div class="text-sm font-medium text-gray-900">
                {{ \Carbon\Carbon::parse($meta['start'])->format('d.m.Y H:i') }}
                -
                {{ \Carbon\Carbon::parse($meta['end'])->format('H:i') }}
            </div>
        </div>


        {{-- FRÜHER --}}
        @if(!empty($meta['suggestion_prev']))
            <div
                wire:click="selectSlot('prev')"
                class="cursor-pointer border rounded-xl p-4 transition-all duration-150
        {{ $selectedSlot === 'prev'
            ? 'border-green-400 bg-green-100 shadow-sm'
            : 'border-green-100 bg-green-50 hover:bg-green-100 hover:border-green-200' }}"
            >

                <div class="text-xs mb-1
            {{ $selectedSlot === 'prev' ? 'text-green-700' : 'text-green-600' }}">
                    {{ t('agent.conflict.earlier') }}
                </div>

                <div class="text-sm font-medium
            {{ $selectedSlot === 'prev' ? 'text-green-800' : 'text-green-700' }}">
                    {{ \Carbon\Carbon::parse($meta['suggestion_prev'])->format('d.m.Y H:i') }}
                </div>

            </div>
        @endif

        {{-- SPÄTER --}}
        @if(!empty($meta['suggestion_next']))
            <div
                wire:click="selectSlot('next')"
                class="cursor-pointer border rounded-xl p-4 transition-all duration-150
        {{ $selectedSlot === 'next'
            ? 'border-indigo-400 bg-indigo-100 shadow-sm'
            : 'border-indigo-100 bg-indigo-50 hover:bg-indigo-100 hover:border-indigo-200' }}"
            >

                <div class="text-xs mb-1
            {{ $selectedSlot === 'next' ? 'text-indigo-700' : 'text-indigo-600' }}">
                    {{ t('agent.conflict.later') }}
                </div>

                <div class="text-sm font-medium
            {{ $selectedSlot === 'next' ? 'text-indigo-800' : 'text-indigo-700' }}">
                    {{ \Carbon\Carbon::parse($meta['suggestion_next'])->format('d.m.Y H:i') }}
                </div>

            </div>
        @endif


        {{-- INFO --}}
        <div class="text-xs text-gray-500">
            {{ t('agent.conflict.hint') }}
        </div>

    </div>


    {{-- FOOTER --}}
    <div class="px-6 py-4 border-t border-gray-200 flex justify-end items-center">

        <div class="flex items-center gap-2 pt-4">

            {{-- CANCEL --}}
            <button
                wire:click="$dispatch('closeModal')"
                class="px-4 py-2 text-sm bg-background border border-border text-gray-700 rounded-lg outline-none transition hover:bg-gray-50 hover:border-gray-300 hover:text-gray-900">
                {{ t('common.cancel') }}
            </button>
            {{-- DYNAMISCHER BUTTON --}}
            <button
                wire:click="save"
                class="px-5 py-2.5 text-sm rounded-lg transition font-medium
    @if($selectedSlot === 'prev')
        bg-success/90 hover:bg-success text-white
    @elseif($selectedSlot === 'next')
        bg-primary/90 hover:bg-primary text-white
    @else
        bg-danger/80 hover:bg-danger text-white
    @endif"
            >
                @if($selectedSlot === 'prev')
                    {{ t('agent.conflict.use_earlier') }}
                @elseif($selectedSlot === 'next')
                    {{ t('agent.conflict.use_later') }}
                @else
                    {{ t('agent.conflict.save_anyway') }}
                @endif
            </button>
        </div>

    </div>

</div>
