<template>
  <main>
    <div>
      <div v-if="pending">
        Pending...
      </div>
      <div v-else>
        {{ file.name }}

        <div class="ma-3">
          <p><nuxt-link to="/poc/1">Edit</nuxt-link></p>
        </div>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">


import {useEntityManager} from "~/composables/data/useEntityManager";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import File from "~/models/Core/File";

const { em }= useEntityManager()

const { fetch } = useEntityFetch()

const { data: file, pending, refresh } = fetch(File, 1)

</script>

<style>
a {
  color: blue;  /* !color! */
  cursor: pointer;
}
a:hover {
  text-decoration: underline;
}

button {
  border: grey solid 1px;   /* !color! */
  padding: 5px;
  margin: 5px;
  cursor: pointer;
}
button:hover {
  text-decoration: underline;
}
button:focus {
  background-color: lightgrey;   /* !color! */
}
</style>
