/services/licensing/register

import { button, buttons } from "@hedia/hexui/components/button";
import { content } from "@hedia/hexui/components/content";
import { form } from "@hedia/hexui/components/form";
import { header } from "@hedia/hexui/components/header";
import { input } from "@hedia/hexui/components/input";
import { list, listItem } from "@hedia/hexui/components/list";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { a, h2, img, p } from "@hedia/html/elements";
import { chevRightOutlineIcon } from "@hedia/iconly/outline";

export default function () {
  return screen(
    header(navbar(a({ href: "#" }, "Close"), h2("Register License"))),
    content(
      { alignment: "top" },
      prose(
        h2("Register your license "),
        p("Enter your Hedia license key provided by your health care professional."),
      ),
      form(
        { autosubmit: true },
        input({
          maxlength: 14,
          minlength: 14,
          name: "license-key",
          pattern: "[A-Z0-9]{4}-[A-Z0-9]{4}-[A-Z0-9]{4}",
          placeholder: "XXXX-XXXX-XXXX",
          required: true,
          textTransform: "uppercase",
          variant: "license-key",
        }),
        buttons({ arrangement: "vertical" }, button({ kind: "primary", type: "submit" }, "Register")),
      ),
      prose(p({ class: "align-items-center" }, "or")),
      list(
        listItem({
          leading: [img({ src: "/apps/appthera/icon.svg", width: "32", height: "32" })],
          title: "AppThera",
          trailing: [chevRightOutlineIcon()],
        }),
        listItem({
          leading: [img({ src: "/services/licensing/glooko.png", width: "32", height: "32" })],
          title: "Glooko",
          trailing: [chevRightOutlineIcon()],
        }),
      ),
    ),
  );
}