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

SPDX-License-Identifier: AGPL-3.0-only
*}
{{- block formErrors(form) -}}
  {{- if !form.IsValid() -}}
    <div class="max-w-std" role="alert">
    {{- yield message(type="error") content -}}
      <strong class="text-red-800">{{ gettext("Errors") }}</strong>
      {{- if len(form.Errors()) > 0 -}}
        {{ range form.Errors() }}
          <p>{{ .Error() }}</p>
        {{- end -}}
      {{ else }}
        <p>{{ gettext("Please check your form for errors.") }}</p>
      {{ end }}
    {{- end -}}
    </div>
  {{- end -}}
{{- end -}}

{{- block ariaAttrs(attrs=attrList(), field, name, help) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if help }}{{ attrs.Set("aria-describedby", "description-"+name) }}{{ end }}
  {{- if field.Errors() -}}
    {{- attrs.Set("aria-errormessage", "errors-"+name) -}}
    {{- attrs.Set("aria-invalid", "true") -}}
  {{- end -}}
{{- end -}}

{{- block formField(field, name, label, help, class="", required=false, controlAttrs=attrList()) -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if field.Errors() -}}{{ class = class + " field--err" }}{{- end -}}

  <div class="field{{ if class }} {{ class }}{{ end }}">
    {{ if label -}}
      <label for="{{ name }}">
        {{- label -}}
        {{- if required -}}
          <span title="{{ gettext(`Required`) }}" aria-hidden="true" class="text-red-600">&#x2009;•</span>
          <span aria-hidden="true" class="sr-only">{{ gettext("Required") }}</span>
        {{- end -}}
      </label>
    {{- end }}
    <div {{ controlAttrs }}>
      {{ yield content }}
      {{ if field.Errors() }}
        <ul id="errors-{{ name }}" class="field--errors">
        {{- range field.Errors() }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span id="description-{{ name }}" class="field--help">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}


{{- block textField(
  field, value=nil, type="text", name, label, class="", required=false, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-input w-full"
) -}}
  {{- class = "field--text " + class -}}
  {{- if type == "password" -}}
    {{ value = "" }}
  {{- else if value == nil -}}
    {{ value = field.String() }}
  {{- end -}}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield ariaAttrs(attrs=inputAttrs, field=field, name=name, help=help) -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <input type="{{ type }}" id="{{ name }}" name="{{ name }}"
     value="{{ value }}" class="{{ inputClass }}" {{ inputAttrs }} />
    {{- yield content -}}
  {{- end -}}
{{- end -}}


{{- block dateField(
  field, value=nil, name, label, class, required, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-input",
) -}}
  {{ value = field.String() }}
  {{ yield textField(field=field, value=value, type="date", name=name,
                     label=label, class=class, required=required, help=help,
                     controlAttrs=controlAttrs, inputAttrs=inputAttrs,
                     inputClass=inputClass) }}
{{- end -}}


{{- block textAreaField(
  field, value=nil, type="text", name, label, class="", required=false, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-textarea w-full",
  rows=3
) -}}
  {{- class = "field--textarea " + class -}}
  {{ inputAttrs.Set("rows", rows) }}
  {{- if value == nil -}}
    {{ value = field.String() }}
  {{- end -}}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield ariaAttrs(attrs=inputAttrs, field=field, name=name, help=help) -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <textarea id="{{ name }}" name="{{ name }}" class="{{ inputClass }}" {{ inputAttrs }}>
    {{- value -}}
    </textarea>
    {{- yield content -}}
  {{- end -}}
{{- end -}}

{{- block checkboxField(
  field, checked=nil, name, label, class="", help
) -}}
  {{- class = "field--checkbox " + class -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if checked == nil }}{{ checked = field.Value() }}{{ end -}}
  {{- if field.Errors() -}}{{ class = class + " with-errors" }}{{ end }}
  <div class="field{{ if class }} {{ class }}{{ end }}">
    <span class="field--spacer"></span>
    <div>
      <input type="checkbox" id="{{ name }}" name="{{ name }}"
       class="form-checkbox" value="t"
       {{- if checked }} checked="checked"{{ end -}} />
      <input type="hidden" name="{{ name }}" value="f" />{* end with false so the field is bound *}
      <label for="{{ name }}">{{ label }}</label>
      {{ if field.Errors() }}
        <ul class="field--errors">
        {{- range field.Errors() }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span class="field--help">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}


{{- block selectField(
  field, value=nil, name, options, label, class="", required, help,
  controlAttrs=attrList(), inputAttrs=attrList(), inputClass="form-select w-full"
) -}}
  {{- class = "field--select " + class -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if value == nil -}}{{ value = field.Value() }}{{- end -}}
  {{- if !options -}}{{ options = field.Choices() }}{{- end -}}
  {{- if field.Errors() -}}{{ class = class + " with-errors" }}{{ end }}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield ariaAttrs(attrs=inputAttrs, field=field, name=name, help=help) -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <select name="{{ name }}" id="{{ name }}" class="{{ inputClass }}" {{ inputAttrs }}>
      {{- range options -}}
        <option value="{{ .Value }}" {{ if string(value) == string(.Value) }}selected="selected"{{ end }}>{{ .Name }}</option>
      {{- end -}}
    </select>
  {{- end -}}
{{- end -}}


{{- block multiSelectField(
  field, name, label, class="", help
) -}}
  {{- class = "field--multiselect " + class -}}
  {{- if !name -}}{{ name = field.Name() }}{{- end -}}
  {{- if field.Errors() -}}{{ class = class + " field--err" }}{{- end -}}
  {{- type := isList(field.V()) ? "checkbox" : "radio" -}}
  {{- inputClass := type == "radio" ? "form-radio" : "form-checkbox" -}}
  <div class="field{{ if class }} {{ class }}{{ end }}">
    <label>{{ label }}</label>
    <div>
      <input type="hidden" name="{{ name }}" value="&#xff00">{* null value to bind the field *}
      <ul class="field--choices">
        {{- range field.Choices() -}}
         <li>
          <input type="{{ type }}" name="{{ name }}" id="{{ name }}_{{ .Value }}" value="{{ .Value }}"
           class="{{ inputClass }}"
           aria-label="{{ label }}: {{ .Name }}"
           {{- if isList(field.V()) && .In(field.V()) || field.V() == .Value }} checked
           {{- end }}>
          <label for="{{ name }}_{{ .Value }}">{{ .Name }}</label>
         </li>
        {{- end -}}
      </ul>
      {{ if field.Errors() }}
        <ul class="field--errors">
        {{- range field.Errors() }}
          <li>{{ . }}</li>
        {{ end -}}
        </ul>
      {{ end }}
      {{ if help }}<span class="field--help">{{ help }}{{ end }}
    </div>
  </div>
{{- end -}}


{{- block passwordField(
  field, value=nil, name, label, class="", required=false, help,
  inputClass="form-input w-full", inputAttrs=attrList(),
) -}}
  {{- class = "field--text field--composed field--password " + class -}}
  {{- controlAttrs := attrList("data-controller", "pass-reveal") -}}
  {{- inputAttrs.Set("data-pass-reveal-target", "field") -}}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield ariaAttrs(attrs=inputAttrs, field=field, name=name, help=help) -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <div class="{{ inputClass }}">
      <input type="password" id="{{ name }}" name="{{ name }}" value="" {{ inputAttrs }} />
      <button type="button" data-pass-reveal-target="btn" data-action="pass-reveal#toggle"></button>
      <template data-pass-reveal-target="show">
        {{- yield icon(name="o-show", class="svgicon") -}}
      </template>
      <template data-pass-reveal-target="hide">
        {{- yield icon(name="o-hide", class="svgicon") -}}
      </template>
    </div>
  {{- end -}}
{{- end -}}


{{- block timeTokenField(
  field, value=nil, name, label, class, required=false, help,
  controlAttrs=attrList(), inputClass="form-input w-full",
) -}}
  {{ value = field.String() }}
  {{ class = "field--text field--composed field--timetoken " + class }}
  {{ inputAttrs := attrList("data-timetoken-target", "field") }}
  {{- if required -}}
    {{ inputAttrs.Set("required", true) }}
  {{- end -}}
  {{- yield ariaAttrs(attrs=inputAttrs, field=field, name=name, help=help) -}}

  {{- yield formField(field=field, name=name, label=label, help=help, class=class,
                      required=required, controlAttrs=controlAttrs) content -}}
    <div class="{{ inputClass }}"
     data-controller="timetoken"
     data-timetoken-hidden-class="hidden">
      <input type="text" id="{{ name }}" name="{{ name }}" value="{{ value }}" {{ inputAttrs }}>
      <button type="button" data-timetoken-target="btn">
        {{- yield icon(name="o-calendar") -}}
      </button>
      <template data-timetoken-target="template">
        <div class="timetoken">
          <label>{{ gettext("The previous") }}:</label>
          <div>
            <input type="number" size="3" min="0"
            class="form-input"
            data-timetoken-target="value"
            data-action="timetoken#update">
            <select class="form-select"
            data-action="timetoken#update"
            data-timetoken-target="unit">
              <option value="d">{{ gettext("Day(s)") }}</option>
              <option value="w">{{ gettext("Week(s)") }}</option>
              <option value="m">{{ gettext("Month(s)") }}</option>
              <option value="y">{{ gettext("Year(s)") }}</option>
            </select>
          </div>
          <p class="my-2">- {{ pgettext("word", "or") }} -</p>
          <input type="date" class="form-input" data-action="timetoken#update" data-timetoken-target="absolute">
        </div>
      </template>
    </div>
  {{- end -}}
{{- end -}}

{{- block fileDropField(
  field, name, label, help, class, required=false,
) -}}
  {{ yield textField(
    field=field,
    name=name,
    type="file",
    label=label,
    help=help,
    required=required,
    class="field--filedrop " + class,
    inputClass="js:hidden",
    controlAttrs=attrList(
      "data-controller", "dropzone",
      "data-dropzone-hidden-class", "hidden",
      "data-dropzone-focus-class", "bg-primary-100",
    ),
  ) content }}
    {{- if !name -}}{{ name = field.Name() }}{{- end -}}
    <p data-dropzone-target="zone">
      <button type="button" class="mx-auto link"
       data-dropzone-target="placeholder"
       data-action="click->dropzone#select">{{ gettext("Select or drop file") }}</button>
      <span class="max-w-full wrap-anywhere font-semibold" data-dropzone-target="fileinfo"></span>
      <button type="button" class="hidden text-btn-danger hf:text-btn-danger-hover"
       data-dropzone-target="clearbtn" data-action="dropzone#clear:stop:prevent">
        {{- gettext("remove") -}}
      </button>
    </p>
  {{ end }}
{{- end -}}