<script lang="ts">
  import * as dateFns from "date-fns";
  import { de } from "date-fns/locale";
  import type { Turnier } from "../model/models";
  import WithInlineHeader from "./WithInlineHeader.svelte";
  import WithHeader from "./WithHeader.svelte";

  const { turniere }: { turniere: Turnier[] } = $props();
</script>

<h3>{turniere.length > 1 ? "Turniere" : "Turnier"}</h3>
<table class="layout">
  <tbody>
    {#each turniere as turnier}
      <tr>
        <th style="width: 5em">
          {dateFns.format(new Date(turnier.datum), "dd.MM.")}</th
        ><td>
          <div style="margin-bottom: 0.5em">
            <b>
              {#if turnier.webseite}
                <a href={turnier.webseite} target="_blank"
                  >{turnier.veranstaltungbezeichnung}</a
                >
              {:else}
                {turnier.veranstaltungbezeichnung}
              {/if}
            </b>
          </div>
          <WithInlineHeader header="Adresse" value={turnier.adresse}>
            <a
              href="https://maps.google.com/maps?q={turnier.adresse}"
              target="_blank">{turnier.adresse}</a
            >
          </WithInlineHeader>
          <WithInlineHeader header="Ausrichter" value={turnier.ausrichter} />
          <WithHeader header="Zeitplan" value={turnier.turniere}>
            <table class="layout">
              <tbody>
                {#each turnier.turniere as t, idx}
                  <tr>
                    <td class="date-cell">
                      <div class="date-container">
                        {#if t.bezeichnung == turnier.bezeichnung}
                          <span class="arrow">&rarr;</span>
                        {/if}
                        <span
                          >{dateFns.format(new Date(t.datum), "eee", {
                            locale: de,
                          })},&nbsp;{t.startzeit}
                        </span>
                      </div>
                    </td>
                    <td
                      style={turnier.turniere!.length > idx + 1 &&
                      turnier.turniere![idx + 1].datum != t.datum
                        ? "padding-bottom: 0.5em"
                        : ""}>{t.bezeichnung}</td
                    >
                  </tr>
                {/each}
              </tbody>
            </table>
          </WithHeader>
          <WithInlineHeader
            header="Vorverkauf Telefon"
            value={turnier.vorverkauf_telefon}
          >
            <a href={"tel:" + turnier.vorverkauf_telefon}
              >{turnier.vorverkauf_telefon}</a
            >
          </WithInlineHeader>
          <WithInlineHeader
            header="Vorverkauf Webseite"
            value={turnier.vorverkauf_url}
          >
            <a href={turnier.vorverkauf_url} target="_blank"
              >{turnier.vorverkauf_url}</a
            >
          </WithInlineHeader>
          <WithHeader
            header="Zuschauerinformationen"
            value={turnier.info_zuschauer}
          />
          <WithHeader header="Anfahrt" value={turnier.anfahrt} />
          <div>&nbsp;</div>
        </td></tr
      >
    {/each}
  </tbody>
</table>

<style lang="scss">
  table.layout {
    tbody tr th,
    tbody tr td {
      text-align: left;
      vertical-align: top;
      padding: 0;
      margin: 0;
      font-weight: normal;
      border: none;

      &:first-child {
        padding-right: 10px;
      }
    }

    tbody tr td.bold {
      &,
      span {
        font-weight: bold;
      }
    }
  }

  .date-cell {
    position: relative;
  }

  .date-container {
    position: relative;
  }

  .arrow {
    position: absolute;
    left: -20px;
    top: 0;
    font-weight: bold;
    color: #333;
  }
</style>
