<script lang="ts">
  import type { StandaloneRequirement } from "$lib/models/project";
  import Status from "$lib/models/status";

  import CardEntry from "../layout/CardEntry.svelte";
  import EntryButton from "../layout/EntryButton.svelte";
  import EntryDescription from "../layout/EntryDescription.svelte";
  import EntryName from "../layout/EntryName.svelte";
  import EntryProgress from "../layout/EntryProgress.svelte";
  import EntryProgressRow from "../layout/EntryProgressRow.svelte";
  import EntryStatusIcon from "../layout/EntryStatusIcon.svelte";
  import EntryStatusLine from "../layout/EntryStatusLine.svelte";
  import Icon from "../layout/Icon.svelte";

  export let requirement: StandaloneRequirement
  export let compact: boolean = false;
  export let boat: number = null;
</script>

<a href="/{requirement.scope.id}/{requirement.project.id}?requirement={requirement.id}">
  <CardEntry>
    {#if requirement.status === Status.Active}
      <EntryButton>
        <Icon name="plus" />
      </EntryButton>
    {/if}
    <EntryStatusIcon status={requirement.status} />
    <EntryName subtitle={requirement.project.name}>{requirement.name}</EntryName>
    {#if !compact}
      <EntryStatusLine status={requirement.status} />
      <EntryDescription>{requirement.description}</EntryDescription>
    {/if}
    <EntryProgressRow>
      {#each requirement.stats as stat (stat.id)}
        <EntryProgress boat={boat} name={stat.name} acquired={stat.acquired} required={stat.required} />
      {/each}
    </EntryProgressRow>
  </CardEntry>
</a>

<style>
  a {
    text-decoration: none;
    color: inherit;
  }
</style>