<script lang="ts">
  import { goto } from "$app/navigation";
  import type Sprint from "$lib/models/sprint";

  import Option from "../layout/Option.svelte";
  import OptionsRow from "../layout/OptionsRow.svelte";
  import SprintBody from "./SprintBody.svelte";
  import { projectPrettyId, scopePrettyId } from "$lib/utils/prettyIds";
  import { getScopeContext } from "../contexts/ScopeContext.svelte";
  import Section from "../layout/Section.svelte";

  export let sprint: Sprint;
  const {scope} = getScopeContext();

  function gotoSprint() {
    goto(`/${scopePrettyId($scope)}/sprints#${projectPrettyId(sprint)}`)
  }
</script>

<Section noProgress title={sprint.name}>
  <OptionsRow slot="right">
    <Option on:click={gotoSprint}>View</Option>
    <Option open={{name: "sprint.edit", sprint}}>Edit</Option>
    <Option open={{name: "sprint.delete", sprint}} color="red">Delete</Option>
  </OptionsRow>
  <SprintBody sprint={sprint} />
</Section>