<template>
  <v-sheet color="transparent" rounded width="100%">
    <!-- SHOW MESSAGE IF NO QUEUED PACKAGES -->
    <template v-if="packages.length === 0">
      <span class="text-grey"> No packages queued.</span>
    </template>
    <!-- ELSE SHOW EXPANSION PANEL -->
    <template v-else>
      <!-- FULL LIST EXPANSION PANEL -->
      <v-expansion-panels>
        <v-expansion-panel bg-color="#303030" color="primary" elevation="0">
          <v-expansion-panel-title>
            Show all queued packages
            <span class="ms-1 text-disabled text-high-emphasis">({{ packages.length }})</span>
          </v-expansion-panel-title>
          <v-expansion-panel-text>
            <v-list bg-color="transparent" outlined rounded>
              <v-list-item v-for="(pkg, index) in packages" :key="index">
                <template #prepend>
                  <v-icon
                    icon="mdi-chevron-right"
                    style="margin-left: -20px; margin-right: -20px" />
                </template>
                <v-list-item-title>
                  {{ pkg.pkgbase }}
                  <span class="text-grey">({{ pkg.repo }})</span>
                </v-list-item-title>
                <v-list-item-subtitle>
                  {{ pkg.arch_version }}
                </v-list-item-subtitle>
              </v-list-item>
            </v-list>
          </v-expansion-panel-text>
        </v-expansion-panel>
      </v-expansion-panels>
    </template>
  </v-sheet>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'
import { components } from '@/api'

defineProps({
  packages: {
    type: Array<components['schemas']['Package']>,
    required: true,
    default: () => []
  }
})
</script>
