<template>
  <div>
    <v-switch
      v-model="mirror"
      label="Toggle mirror"
    ></v-switch>
    <v-timeline
      :mirror="mirror"
    >
      <v-timeline-item
        v-for="n in 2"
        :key="n"
      >
        <template v-slot:opposite>
          <span>Tus eu perfecto</span>
        </template>
        <v-card class="elevation-1">
          <v-card-title class="text-headline-small">
            Lorem ipsum
          </v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
          </v-card-text>
        </v-card>
      </v-timeline-item>
    </v-timeline>
    <v-timeline
      :mirror="mirror"
      single-side="before"
    >
      <v-timeline-item
        v-for="n in 2"
        :key="n"
      >
        <template v-slot:opposite>
          <span>Tus eu perfecto</span>
        </template>
        <v-card class="elevation-1">
          <v-card-title class="text-headline-small">
            Lorem ipsum
          </v-card-title>
          <v-card-text>
            Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
          </v-card-text>
        </v-card>
      </v-timeline-item>
    </v-timeline>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const mirror = ref(true)
</script>

<script>
  export default {
    data: () => ({
      mirror: true,
    }),
  }
</script>
