<script lang="ts">
  let { data } = $props<{ html: string }>();
  let people = $state(data.people);
  let tents = $state(data.tents);
  let cars = $state(data.cars);

  function add(type) {
    if (type == "people") people += 1;
    if (type == "tents") tents += 1;
    if (type == "cars") cars += 1;
  }
  function subtract(type) {
    if (type == "people") people -= 1;
    if (type == "tents") tents -= 1;
    if (type == "cars") cars -= 1;
  }
</script>

<section>
  <h1>How many people are at Sludge Fest {data.year}?</h1>
  <div>
    <div>
      <h3>~{people} people</h3>
      <button onclick={() => add("people")}>+</button>
      <button onclick={() => subtract("people")}>-</button>
    </div>
    <div>
      <h3>~{tents} tents</h3>
      <button onclick={() => add("tents")}>+</button>
      <button onclick={() => subtract("tents")}>-</button>
    </div>
    <div>
      <h3>~{cars} cars</h3>
      <button onclick={() => add("cars")}>+</button>
      <button onclick={() => subtract("cars")}>-</button>
    </div>
  </div>
  <form method="POST">
    <input hidden name="people" value={people} />
    <input hidden name="cars" value={cars} />
    <input hidden name="tents" value={tents} />
    <button>Save</button>
  </form>
</section>

<style lang="scss">
  @use "/src/app.scss" as *;
  @use "sass:color";

  section {
    max-width: 60rem;
    margin: 1rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    h1 {
      font-size: 1.5rem;
    }

    div {
      text-align: center;
      width: 100%;
      div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        h3 {
          font-size: 1.75rem;
          grid-column: 1 / 3;
        }
        button {
          background: $yellow;
          border: solid 3px $yellow;
          border-radius: 0.25rem;
          margin: 0 1rem;
          font-size: 2rem;
        }
      }
    }
    form button {
      font-size: 2rem;
      margin: 1rem;
      background: $yellow;
      border: solid 3px $yellow;
      border-radius: 0.25rem;
    }
  }
</style>
