<script setup lang="ts">

import useArchiveStore from "@/stores/archive";
import updater from "@/utils/updater";
import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";
import { onBeforeMount, ref } from "vue";

const emit = defineEmits<{(e:"back"):void}>();
const archive = useArchiveStore();

const version = ref<string>("");

const back = () => {
  emit("back");
}

onBeforeMount(async () => {
  version.value = await updater.obj.getBoardVersion();
});
</script>

<template>
  <ion-card>
    <ion-card-header class="two-column">
      <div class="header-column">
        <ion-card-title>FLASH</ion-card-title>
        <ion-card-title>Board</ion-card-title>
        <ion-card-subtitle>{{ version }}</ion-card-subtitle>
      </div>
<!--      <div style="flex-grow: 1"></div>-->
<!--      <div>-->
<!--        <ion-button>Disconnect</ion-button>-->
<!--      </div>-->
    </ion-card-header>

    <ion-card-content>
      <p>{{ version }} -> {{ archive.getArchive[archive.getShownI].title }}</p> <br>
      <ion-button>Flash</ion-button>

      <ion-button @click="back">Cancel</ion-button>
    </ion-card-content>
  </ion-card>
</template>

<style scoped>
.two-column {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>