<template>
  <ion-card>
    <ion-card-header class="two-column">
      <div class="header-column">
        <ion-card-title>HOME</ion-card-title>
        <ion-card-title>Board</ion-card-title>
        <ion-card-subtitle>v1.1.1</ion-card-subtitle>
      </div>
      <div style="flex-grow: 1"></div>
      <div>
        <ion-button @click="disconnect">Disconnect</ion-button>
      </div>
    </ion-card-header>

    <ion-card-content>
      <ion-button @click="update">Update</ion-button>
      <br>
      <ion-button @click="archive">View older versions</ion-button>
      <br>
      <ion-button @click="settings">Settings</ion-button>
    </ion-card-content>
  </ion-card>
</template>
<script setup lang="ts">
import {IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle} from "@ionic/vue";

const emit = defineEmits<{(e: 'update'): void, (e: 'archive'): void, (e: "disconnect"): void, (e: "settings"): void}>();

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

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

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

const settings = () => {
  emit("settings")
}

</script>

<style scoped>

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