app/pages/freemium/events.vue

<template>
  <v-container fluid>
    <v-row>
      <!-- Bloc événements -->
      <v-col cols="12" md="8">
        <v-card>
          <v-tabs v-model="tab">
            <v-tab value="future">À venir</v-tab>
            <v-tab value="past">Passés</v-tab>
          </v-tabs>

          <v-tabs-window v-model="tab">
            <v-tabs-window-item value="future">
              <UiEventList
                :events="upcomingEvents"
                @load-next="loadNextUpcoming"
                @load-prev="loadPrevUpcoming"
                @edit="editEvent"
                @delete="deleteEvent"
              />
            </v-tabs-window-item>
            <v-tabs-window-item value="past">
              <UiEventList
                :events="pastEvents"
                @load-next="loadNextPast"
                @load-prev="loadPrevPast"
                @edit="editEvent"
                @delete="deleteEvent"
              />
            </v-tabs-window-item>
          </v-tabs-window>

          <v-card-actions>
            <v-btn color="primary" @click="addEvent">Ajouter un événement</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>

      <!-- Bloc structure -->
      <v-col cols="12" md="4">
        <v-card>
          <v-card-title>Structure</v-card-title>
          <v-card-text>
            <div><strong>Nom:</strong> {{ structure.name }}</div>
            <div><strong>Adresse:</strong> {{ structure.address }}</div>
            <div><strong>Email:</strong> {{ structure.email }}</div>
          </v-card-text>
          <v-card-actions>
            <v-btn color="secondary" @click="editStructure">Modifier la structure</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">

definePageMeta({
  name: 'freemium_events_page',
})

import { ref } from 'vue'

const tab = ref(null)

// Pagination state
const upcomingPage = ref(1)
const pastPage = ref(1)

const upcomingEvents = ref<Event[]>([{
  'id': 1,
  'name': "Mon événement",
  'date': "2025/10/25",
  'location': "Cluses",
  'image': "https://www.ville-lecastellet.fr/wp-content/uploads/sites/2/2022/04/declaration-devenements.jpg"
},
  {
    'id': 2,
    'name': "Noel",
    'date': "2025/12/25",
    'location': "Thyez",
    'image': "https://www.maisonvictor.fr/img/cms/sapin%20de%20noel.jpg"
  }
  ])
const pastEvents = ref<Event[]>([{
  'id': 3,
  'name': "Musique en stock",
  'date': "2025/07/03",
  'location': "Scionzier",
  'image': "https://musiquesenstock.fr/wp-content/uploads/MES2025_AFF_H-1024x695.jpg"
}])

const structure = ref({
  name: 'École de musique Demo',
  address: '123 rue de la Musique',
  email: 'contact@musique.fr'
})

function loadNextUpcoming() {
  upcomingPage.value++
  fetchUpcoming()
}

function loadPrevUpcoming() {
  if (upcomingPage.value > 1) upcomingPage.value--
  fetchUpcoming()
}

function loadNextPast() {
  pastPage.value++
  fetchPast()
}

function loadPrevPast() {
  if (pastPage.value > 1) pastPage.value--
  fetchPast()
}

function fetchUpcoming() {
  // TODO: call API with page=upcomingPage
  console.log('fetch upcoming events page', upcomingPage.value)
}

function fetchPast() {
  // TODO: call API with page=pastPage
  console.log('fetch past events page', pastPage.value)
}

function editEvent(eventId: number) {
  // TODO: navigate to event edit page
  console.log('edit event', eventId)
}

function deleteEvent(eventId: number) {
  // TODO: call delete API then refresh
  console.log('delete event', eventId)
}

function addEvent() {
  // TODO: navigate to add event page
  console.log('add new event')
}

function editStructure() {
  // TODO: navigate to edit structure page
  console.log('edit structure')
}
</script>

<style scoped>
.v-card {
  margin-bottom: 16px;
}
</style>