component AuthSplitLayout {
  props {
    size = "default"
    color = "primary"
    eyebrow = "Secure identity"
    title = "Welcome back"
    description = ""
    brand = "Police Management System"
    features = []
    class = ""
  }

  view {
    <main
      class="wire-auth-split wire-next--color-{color} wire-next--size-{size} {class}"
    >
      <section
        class="wire-auth-split__content"
      >
        <div
          class="wire-auth-split__brand"
        >
          <span
            class="icon-[lucide--shield-check]"
            aria-hidden="true"
          >
          </span>
          <span><strong>{brand}</strong><small>Unified identity and access</small></span>
        </div>
        <div
          class="wire-auth-split__message"
        >
          <span
            class="wire-auth-split__eyebrow"
          >
            {eyebrow}
          </span>
          <h1>{title}</h1>
          {#if description}
            <p>{description}</p>
          {/if}
          <div
            class="wire-auth-split__features"
          >
            {#each features as item}
              <article>
                <span
                  class="{item.icon || 'icon-[lucide--check-circle-2]'}"
                  aria-hidden="true"
                >
                </span>
                <span><strong>{item.label}</strong>
                  {#if item.description}
                    <small>{item.description}</small>
                  {/if}
                </span>
              </article>
            {/each}
          </div>
          <slot
            name="aside-extra"
          />
        </div>
        <small
          class="wire-auth-split__legal"
        >
          Authorised access only · Activity may be monitored and audited.
        </small>
      </section>
      <section
        class="wire-auth-split__form"
      >
        <div
          class="wire-auth-split__form-inner"
        >
          <slot
            name="form"
          />
        </div>
      </section>
    </main>
  }
}