/services/id/account/createAccount

import { button, buttons } from "@hedia/hexui/components/button";
import { checkbox } from "@hedia/hexui/components/checkbox";
import { content } from "@hedia/hexui/components/content";
import { footer } from "@hedia/hexui/components/footer";
import { form } from "@hedia/hexui/components/form";
import { header } from "@hedia/hexui/components/header";
import { input } from "@hedia/hexui/components/input";
import { navbar } from "@hedia/hexui/components/navbar";
import { prose } from "@hedia/hexui/components/prose";
import { screen } from "@hedia/hexui/components/screen";
import { select } from "@hedia/hexui/components/select";
import { a, br, h2, option, p, span } from "@hedia/html/elements";
import {
  chevLeftOutlineIcon,
  earthOutlineIcon,
  lockOutlineIcon,
  mailOutlineIcon,
  userOutlineIcon,
} from "@hedia/iconly/outline";

export default function () {
  return screen(
    header(navbar(a({ href: "#" }, chevLeftOutlineIcon()), h2("Sign up"))),
    content(
      prose(h2("Create account"), p("Create an account to access Hedia.")),
      form(
        { id: "signup-form" },
        input({
          type: "email",
          name: "email",
          placeholder: "Email",
          required: true,
          leadingIcon: mailOutlineIcon(),
        }),
        select(
          {
            leadingIcon: earthOutlineIcon(),
            name: "country",
            placeholder: "Country",
            required: true,
          },
          option("Denmark"),
          option("Norway"),
          option("Sweden"),
        ),
        input({ type: "text", placeholder: "Name", required: true, leadingIcon: userOutlineIcon() }),
        input({
          leadingIcon: lockOutlineIcon(),
          minlength: 8,
          placeholder: "Password",
          required: true,
          type: "password",
          passwordStrengthMeter: {
            hintText: "Password strength:",
            strengthText: {
              weak: "Weak",
              fair: "Fair",
              good: "Good",
              strong: "Strong",
            },
          },
        }),
        br(),
        checkbox({
          checkboxPosition: "left",
          contained: true,
          description: span("I have read and agree to Hedia's ", a({ href: "#" }, "Terms and conditions")),
          required: true,
        }),
      ),
    ),
    footer(buttons({ arrangement: "horizontal" }, button({ kind: "primary", form: "signup-form" }, "Next"))),
  );
}