---
import Base from "../Base.astro";
---

<Base title="D&D Utils" zoomable>
  <script>
    import "actor-typeahead";
    import { getAuth } from "../lib/auth";

    const [_, __, did] = await getAuth();
    const login = document.getElementById("login");
    const signup = document.getElementById("signup");

    if (!login || !signup) throw "no #login or #signup";
    if (did) {
      login.outerHTML = `<a id="login" href="/atproto/logout">Log out</a>`;
    } else {
      login.outerHTML = `<a id="login" href="/atproto/login">Log in</a>`;
      signup.style.display = "";
    }

    const astralUser = document.getElementById(
      "astral-user",
    ) as HTMLFormElement;
    astralUser.addEventListener("submit", (ev) => {
      if (!astralUser.checkValidity()) return;
      ev.preventDefault();
      // must exist due to valid state
      const handle = astralUser.querySelector("input")?.value;
      window.location.assign(`/astral/${handle}`);
    });
  </script>

  <style>
    form {
      display: grid;
      gap: 5px;
      grid-template: auto auto / minmax(20ch, 50ch) min-content;
    }

    label {
      grid-column: span 2;
    }

    actor-typeahead {
      --color-background: #2b2b2b;
      --color-border: #ffffff22;
      --color-shadow: #ffffff;
      --color-hover: #ffffff11;
    }

    input:not([type="submit"]) {
      box-sizing: border-box;
      width: 100%;
    }
  </style>

  <h1>D&D Utils</h1>
  <p style="height: 1lh">
    <a id="login" href="#" style="display: none;">Log in</a>
    <a id="signup" href="/atproto/sign-up" style="display: none;">Sign up</a>
  </p>
  <p>Pages:</p>
  <ul>
    <li><a href="/astral">Astral Powers</a></li>
    <li>
      <form id="astral-user">
        <label for="username"> View Astral Powers for </label>
        <actor-typeahead>
          <input required autocomplete="off" id="username" />
        </actor-typeahead>
        <input type="submit" value="Search" />
      </form>
    </li>
    <!-- <li><a href="/chip">Chip</a></li> -->
  </ul>
</Base>