{*
SPDX-FileCopyrightText: © 2021 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
{{ extends "./base" }}
{{ import "/_libs/forms" }}

{{- block title() -}}User Interface{{- end -}}

{{ block mainContent() }}<div class="max-w-std">

<h1 class="title text-h2">User Interface</h1>

<h2 class="title text-h3">Buttons</h2>

<div class="grid grid-cols-4 gap-8 mb-8">
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn">Click Me!</button>
    btn
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn btn-default">Click Me!</button>
    btn btn-default
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn btn-primary">Click Me!</button>
    btn btn-primary
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn btn-danger">Click Me!</button>
    btn btn-danger
  </div>

  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined">Click Me!</button>
    btn-outlined
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined btn-default">Click Me!</button>
    btn-outlined<br> btn-default
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined btn-primary">Click Me!</button>
    btn-outlined<br> btn-primary
  </div>
  <div class="inline-flex flex-col gap-2 items-center">
    <button class="btn-outlined btn-danger">Click Me!</button>
    btn-outlined<br> btn-danger
  </div>
</div>

<h3 class="title text-xl">Button group</h3>

<div class="grid grid-cols-4 gap-8 mb-8">
  <div class="inline-flex flex-col gap-2 items-center">
    <div class="btn-group btn-primary">
      <button class="btn-outlined btn-primary">A</button>
      <button class="btn-outlined btn-primary">B</button>
      <span><a class="btn-outlined btn-primary" href="#">C</a></span>
    </div>
  </div>
</div>

<h3 class="title text-xl">Button block</h3>

<div class="btn-block">
  <button class="btn btn-primary">Save</button>
  <button class="ml-auto btn-outlined btn-danger">Delete</button>
</div>

<hr class="my-8">
<h2 class="title text-h3">Menus</h2>

<details class="menu btn-group" data-controller="menu">
  <summary class="btn-outlined py-1">
    {{- yield icon(name="o-menu-dots") -}}
  </summary>
  <ul>
    <li><button>Item A</button></li>
    <li><button>Item B</button></li>
    <li role="separator"></li>
    <li><button>Item C</button></li>
  </ul>
</details>

<hr class="my-8">
<h2 class="title text-h3">Messages</h2>

{{- yield message() content -}}
Simple information message
{{- end -}}

{{- yield message(type="success") content -}}
<p>Success message with 2 paragraphs</p>
<p>You did it!</p>
{{- end -}}

{{- yield message(type="error") content -}}
<p>Error message</p>
<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>
{{- end -}}

{{- yield message(removable=true) content -}}
Removable message
{{- end -}}

{{- yield message() content -}}
<p class="flex items-center">
  <span class="flex-grow">Message with a call to action</span>
  <button class="btn btn-primary" name="cancel" value="1">Cancel</button>
</p>
{{- end -}}

{{- yield message() content -}}
<details>
  <summary>Message with details element</summary>
  <p>Revealed content</p>
</details>
{{- end -}}

<hr class="my-8">
<h2 class="title text-h3">Form Fields</h2>

{{ yield textField(
  field=.Form.Get("text"),
  label="Text Field",
  class="field-h",
) }}

{{ yield textField(
  field=.Form.Get("text"),
  name="required",
  required=true,
  label="Required Field",
  class="field-h",
  help="This field's help text",
) }}

{{ yield passwordField(
  field=.Form.Get("text"),
  name="password",
  label="Password Field",
  class="field-h",
  inputAttrs=attrList("autocomplete", "off"),
) }}

{{ yield dateField(
  field=.Form.Get("text"),
  name="date",
  label="Date Field",
  class="field-h",
) }}

{{ yield textAreaField(
  field=.Form.Get("text"),
  name="textarea",
  label="Textarea",
  class="field-h",
) }}

{{ yield selectField(
  field=.Form.Get("select"),
  name="select",
  label="Select",
  class="field-h"
) }}

{{ yield checkboxField(
  field=.Form.Get("text"),
  name="checkbox",
  label="Checkbox",
  class="field-h",
) }}

{{ yield timeTokenField(
  field=.Form.Get("text"),
  name="timetoken",
  label="Time Token",
  class="field-h",
) }}

{{ yield multiSelectField(
  field=.Form.Get("choices"),
  name="checkboxes",
  label="Checkboxes",
  class="field-h",
) }}

{{ yield multiSelectField(
  field=.Form.Get("select"),
  name="radio",
  label="Radio",
  class="field-h",
) }}

{{ yield fileDropField(
  field=.Form.Get("text"),
  name="dropzone",
  label="Drop Zone Field",
  class="field-h",
) }}

<hr class="my-8">
<h2 class="title text-h3">Form with errors</h2>

{{- yield formErrors(form=.FormErr) -}}

{{ yield textField(
  field=.FormErr.Get("text"),
  name="err-text",
  label="Text Field",
  class="field-h",
) }}

{{ yield multiSelectField(
  field=.FormErr.Get("choices"),
  name="err-checkboxes",
  label="Checkboxes",
  class="field-h",
) }}

</div>{{ end }}