<!-- Mobile Events Panel -->
<div v-if="mobileTab === 'events' && selectedRecording.events && selectedRecording.events.length > 0" class="h-full flex flex-col space-y-4">
    <div class="flex items-center justify-end gap-2 flex-shrink-0 pr-3">
        <button @click="downloadICS" v-if="selectedRecording.events && selectedRecording.events.length > 0"
                class="copy-btn"
                :title="t('buttons.exportCalendar')">
            <i class="fas fa-calendar-plus"></i>
        </button>
    </div>
    <div class="flex-grow overflow-y-auto mobile-content-box">
        <div class="space-y-3">
            <div v-for="event in selectedRecording.events" :key="event.id"
                 class="bg-[var(--bg-tertiary)] rounded-lg p-3 border border-[var(--border-primary)]">
                <div class="flex justify-between items-start mb-2">
                    <div class="flex-1 min-w-0 pr-2">
                        <h3 class="text-base font-semibold text-[var(--text-primary)] mb-1">
                            <i class="fas fa-calendar-check mr-2 text-[var(--text-accent)] text-sm"></i>
                            ${ event.title }
                        </h3>
                        <p v-if="event.description" class="text-xs text-[var(--text-secondary)] mb-2">
                            ${ event.description }
                        </p>
                    </div>
                    <div class="flex items-center gap-1 flex-shrink-0">
                        <button @click="downloadEventICS(event)"
                                class="px-2 py-1 bg-[var(--bg-button)] text-[var(--text-button)] rounded-lg hover:bg-[var(--bg-button-hover)] transition-colors text-xs flex items-center gap-1"
                                :title="t('events.addToCalendar')">
                            <i class="fas fa-download text-xs"></i>
                            <span v-text="t('events.add')"></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 text-xs"></i>
                        </button>
                    </div>
                </div>
                <div class="grid grid-cols-1 gap-2 text-xs">
                    <div class="flex items-center text-[var(--text-muted)]">
                        <i class="fas fa-clock mr-2 text-[var(--text-accent)]"></i>
                        <span>
                            ${ formatEventDateTime(event.start_datetime) }
                            <template v-if="event.end_datetime">
                                - ${ formatEventDateTime(event.end_datetime, true) }
                            </template>
                        </span>
                    </div>
                    <div v-if="event.location" class="flex items-center text-[var(--text-muted)]">
                        <i class="fas fa-map-marker-alt mr-2 text-[var(--text-accent)]"></i>
                        <span>${ event.location }</span>
                    </div>
                    <div v-if="event.attendees && event.attendees.length > 0" class="flex items-start text-[var(--text-muted)]">
                        <i class="fas fa-users mr-2 text-[var(--text-accent)] mt-0.5"></i>
                        <div class="flex-1">
                            <span v-for="(attendee, index) in event.attendees" :key="index"
                                  class="inline-block bg-[var(--bg-secondary)] px-2 py-0.5 rounded mr-1 mb-1">
                                ${ attendee }
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
