<script>
  import { StartFarDisks } from "../wailsjs/go/main/App.js";
  
  /** @type {Array<import('./App.svelte').Disk>} */
  export let disks = [];
</script>

<div class="container mx-auto pt-4 mb-4">
  <div class="disk-panel text-neutral-300">
    {#each disks as disk}
      <div>
        {disk.Name}
        <a role="button" href="#top" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
          {disk.Free} Gb
        </a>
      </div>
    {/each}
  </div>
</div>

<style>
  .disk-panel {
    display: flex;
    justify-content: space-around;
  }
  .info {
    color: lightgreen;
  }
  .danger {
    color: red;
  }
  a:hover {
    text-decoration: underline;
  }
</style> 