<script>
  import { OpenAPI, TrackService } from "@odit/lfk-client-js";
  OpenAPI.BASE = "http://localhost:4010";
  let tracks_promise = TrackService.trackControllerGetAll();
</script>

<h1>Tracks</h1>
{#await tracks_promise}
  <div
    class="bg-teal-lightest border-t-4 border-teal rounded-b text-teal-darkest px-4 py-3 shadow-md my-2"
    role="alert">
    <p class="font-bold">track data is being loaded...</p>
    <p class="text-sm">This might take a moment 👀</p>
  </div>
{:then tracks}
  {#if tracks.length > 0}
    <!-- content here -->
    <h4>{tracks.length}</h4>
    <hr />
    <ul>
      {#each tracks as item}
        <li>{item.distance}</li>
      {/each}
    </ul>
  {:else}keine Tracks{/if}
{:catch error}
  <div class="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-500">
    <span class="inline-block align-middle mr-8">
      <b class="capitalize">😢 Error</b>
      {error}
    </span>
  </div>
{/await}
