<script>
// @ts-nocheck

  import { StartFarDisks } from "../wailsjs/go/main/App.js";
  import PopoverTrigger from "./components/PopoverTrigger.svelte";
  
  /** @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, i}
      <PopoverTrigger 
        maxWidth="200px"
        align={i === 0 ? "left" : i === disks.length - 1 ? "right" : "center"}
      >
        <div slot="trigger">
          {disk.Name}
          <a role="button" href="#top" on:click={StartFarDisks} class={disk.normal ? "info" : "danger"}>
            {disk.Free} Gb
          </a>
        </div>

        <div slot="content" class="popover-content">
          <div class="title">Диск {disk.Name}</div>
          <div class="info-row">
            <span class="label">Свободно:</span>
            <span class="value">{disk.Free} Gb</span>
          </div>
          <div class="info-row">
            <span class="label">Состояние:</span>
            <span class="value">{disk.normal ? 'нормальное' : 'требует внимания'}</span>
          </div>
        </div>
      </PopoverTrigger>
    {/each}
  </div>
</div>

<style>
  .disk-panel {
    display: flex;
    justify-content: space-around;
  }
  .info {
    color: lightgreen;
  }
  .danger {
    color: red;
  }
  a:hover {
    text-decoration: underline;
  }
  :global(.popover-content) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  :global(.popover-content .title) {
    font-weight: bold;
    margin-bottom: 0.5rem;
  }
  :global(.popover-content .info-row) {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  :global(.popover-content .label) {
    color: #888;
  }
</style> 