<x-app-layout>
    <x-slot name="header">
        <div class="flex items-center justify-between">
            <h2 class="text-xl font-semibold leading-tight">
                {{ $instance->displayname ?? 'Untitled Calendar' }}
            </h2>

            <div class="space-x-2">
                <a href="{{ route('calendar.edit', $calendar) }}"
                   class="inline-flex items-center px-3 py-1.5 bg-gray-200 rounded-md text-sm">
                    {{ __('Edit') }}
                </a>

                <a href="{{ route('calendar.event.create', $calendar) }}"
                   class="inline-flex items-center px-3 py-1.5 bg-blue-600 text-white rounded-md text-sm">
                    {{ __('Add Event') }}
                </a>
            </div>
        </div>
    </x-slot>

    <div class="py-6">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">

            {{-- Calendar meta --}}
            <div class="bg-white shadow-sm sm:rounded-lg p-6">
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('Description') }}</dt>
                        <dd class="mt-1 text-gray-900">{{ $instance->displayname ?? 'Untitled Calendar' }}</dd>
                    </div>

                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('Timezone') }}</dt>
                        <dd class="mt-1 text-gray-900"> {{ $instance?->timezone ?? __('Not set') }}</dd>
                    </div>

                    @php
                        $color = $calendar->meta->color ?? $instance->calendarcolor;
                    @endphp

                    @if ($color)
                    <div>
                        <dt class="text-sm font-medium text-gray-500">{{ __('Color') }}</dt>
                        <dd class="mt-1 text-gray-900">
                            <span class="inline-flex w-3 h-3 min-w-3 min-h-3 rounded-full" style="background: {{ $color }}"></span>
                            <span>{{ $color }}</span>
                        </dd>
                    </div>
                    @endif

                    @if ($caldavUrl)
                    <div>
                        <label class="text-sm text-gray-500">{{ __('CalDAV URL:') }}</label>
                        <div class="flex items-center space-x-2">
                            <input type="text" readonly
                                   value="{{ $caldavUrl }}"
                                   class="w-full px-2 py-1 border rounded-md text-sm bg-gray-50">
                            <button onclick="navigator.clipboard.writeText('{{ $caldavUrl }}')"
                                    class="px-3 py-1 bg-indigo-600 text-white text-sm rounded-md">
                                {{ __('Copy') }}
                            </button>
                        </div>
                    </div>
                    @endif
                </dl>
            </div>

            {{-- Events list --}}
            <div class="bg-white shadow-sm sm:rounded-lg">
                <div class="px-6 py-4 border-b font-semibold">
                    {{ __('Events') }}
                </div>

                <ul class="divide-y divide-gray-200">
                    @forelse($calendar->events as $event)
                        <li class="px-6 py-4">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="font-medium">{{ $event->meta->title }}</p>
                                    @php
                                        $start = $event->meta->start_at?->timezone($instance->timezone);
                                        $end   = $event->meta->end_at?->timezone($instance->timezone);
                                    @endphp

                                    @if ($start && $end)
                                    <p class="text-sm text-gray-500">
                                        {{ $start->toDayDateTimeString() }} — {{ $end->toDayDateTimeString() }}
                                    </p>
                                    @endif
                                </div>

                                <a href="{{ route('calendar.event.edit', [$calendar, $event]) }}" class="text-sm text-indigo-600">{{ __('Edit') }}</a>
                            </div>
                        </li>
                    @empty
                        <li class="px-6 py-4">{{ __('No events yet.') }}</li>
                    @endforelse
                </ul>
            </div>

        </div>
    </div>
</x-app-layout>
