<!-- Desktop Events Tab -->
<div v-if="selectedTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0" class="h-full p-4 overflow-y-auto">
    <div class="space-y-4">
        <div v-for="event in selectedRecording.events" :key="event.id"
             class="bg-[var(--bg-tertiary)] rounded-lg p-4 border border-[var(--border-primary)] hover:border-[var(--border-accent)] transition-colors">
            <div class="flex justify-between items-start mb-3">
                <div class="flex-1">
                    <h3 class="text-lg font-semibold text-[var(--text-primary)] mb-1">
                        <i class="fas fa-calendar-check mr-2 text-[var(--text-accent)]"></i>
                        ${ event.title }
                    </h3>
                    <p v-if="event.description" class="text-sm text-[var(--text-secondary)] mb-2">
                        ${ event.description }
                    </p>
                </div>
                <div class="flex items-center gap-2">
                    <button @click="downloadEventICS(event)"
                            class="px-3 py-1.5 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-sm flex items-center gap-1.5"
                            :title="t('events.addToCalendar')">
                        <i class="fas fa-download"></i>
                        <span v-text="t('events.addToCalendar')"></span>
                    </button>
                    <button @click="deleteEvent(event)"
                            class="p-1.5 text-[var(--text-muted)] hover:text-red-500 hover:bg-red-500/10 rounded-lg transition-colors"
                            :title="t('events.delete')">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
            </div>

            <div class="space-y-2 text-sm">
                <div class="flex items-center gap-2" v-if="event.start_datetime">
                    <i class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                    <span class="text-[var(--text-secondary)]">
                        <strong v-text="t('events.start') + ':'"></strong> ${ formatEventDateTime(event.start_datetime) }
                    </span>
                </div>
                <div class="flex items-center gap-2" v-if="event.end_datetime">
                    <i class="fas fa-clock text-[var(--text-muted)] w-4"></i>
                    <span class="text-[var(--text-secondary)]">
                        <strong v-text="t('events.end') + ':'"></strong> ${ formatEventDateTime(event.end_datetime) }
                    </span>
                </div>
                <div class="flex items-center gap-2" v-if="event.location">
                    <i class="fas fa-map-marker-alt text-[var(--text-muted)] w-4"></i>
                    <span class="text-[var(--text-secondary)]">
                        <strong v-text="t('events.location') + ':'"></strong> ${ event.location }
                    </span>
                </div>
                <div class="flex items-start gap-2" v-if="event.attendees && event.attendees.length > 0">
                    <i class="fas fa-users text-[var(--text-muted)] w-4 mt-0.5"></i>
                    <div class="text-[var(--text-secondary)]">
                        <strong v-text="t('events.attendees') + ':'"></strong>
                        <span class="ml-1">${ event.attendees.join(', ') }</span>
                    </div>
                </div>
            </div>
        </div>

        <div v-if="selectedRecording.events.length === 0" class="text-center py-8">
            <i class="fas fa-calendar-times text-3xl text-[var(--text-muted)] mb-3"></i>
            <p class="text-[var(--text-muted)]" v-text="t('events.noEvents')"></p>
        </div>
    </div>
</div>
