<header class="site-header">
  <a class="site-logo" href="/">gitKeep</a>
  <nav class="site-nav" aria-label="Main navigation">
    <form method="POST" action="/logout">
      <button class="login-link" type="submit">Logout</button>
    </form>
  </nav>
</header>

<script lang="ts">
  import Config from "./Config.svelte";
  let activePanel = $state("configuration");
  let { data } = $props();;
</script>

<section class="container hero" id="intro">
  <h1> Welcome to gitKeep...</h1>

    <div class="dashboard-button-row">
      <div class="dashboard-button-column">
        <button
          class="dashboard-button"
          class:active={activePanel === "configuration"}
          aria-pressed={activePanel === "configuration"}
          on:click={() => activePanel = "configuration"}
        >Configure message</button>
      </div>

      <div class="dashboard-button-column">
        <button
          class="dashboard-button"
          class:active={activePanel === "vouchList"}
          aria-pressed={activePanel === "vouchList"}
          on:click={() => activePanel = "vouchList"}
        >Vouch list</button>
      </div>

      <div class="dashboard-button-column">
        <button
          class="dashboard-button"
          class:active={activePanel === "gitHelp"}
          aria-pressed={activePanel === "gitHelp"}
          on:click={() => activePanel = "gitHelp"}
        >Github setup</button>
      </div>
    </div>

    {#if activePanel === "configuration"}
    <Config markdown = {data.markdown} />
    {/if}
    

</section>
