<!-- Form Generator: renders a full HTML form from a FormtablerFormDefinition -->
{{define "formtabler_generator"}}
<div class="card{{if defaultVal "" .Class}} {{.Class}}{{end}}">
  {{if .Title}}
  <div class="card-header">
    <h3 class="card-title">{{.Title}}</h3>
  </div>
  {{end}}
  <div class="card-body">
    <form
      id="{{defaultVal "form-generator" .ID}}"
      method="{{defaultVal "POST" .Method}}"
      {{if .Action}}action="{{.Action}}"{{end}}
      {{if .Class}}class="{{.Class}}"{{end}}
      {{if .Enctype}}enctype="{{.Enctype}}"{{end}}
      {{if .NoValidate}}novalidate{{end}}
    >
      {{if .SuccessMessage}}
      <div class="alert alert-success" role="alert">
        {{.SuccessMessage}}
      </div>
      {{end}}

      {{if .FieldsetTitle}}
      <fieldset class="form-fieldset">
        <legend>{{.FieldsetTitle}}</legend>
        {{if .FieldsetDescription}}<p class="text-secondary mb-3">{{.FieldsetDescription}}</p>{{end}}
      {{end}}

      {{if gt .Columns 1}}
      <div class="row">
      {{end}}

      {{$cols := .Columns}}
      {{$layout := .Layout}}
      {{range $i, $field := .Fields}}
        {{if and (gt $cols 1) (eq $layout "horizontal")}}
        <div class="col-md-6 mb-3">
        {{else if gt $cols 1}}
          {{if eq $cols 2}}
          <div class="col-md-6 mb-3">
          {{else}}
          <div class="col-md-4 mb-3">
          {{end}}
        {{end}}

        {{if eq $field.Type "hidden"}}
          <input type="hidden" name="{{$field.Name}}" value="{{$field.Value}}">
        {{else if or (eq $field.Type "select") (eq $field.Type "multiselect")}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <select
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-select{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              {{if $field.Required}}required{{end}}
              {{if $field.Disabled}}disabled{{end}}
              {{if $field.Autofocus}}autofocus{{end}}
              {{if eq $field.Type "multiselect"}}multiple{{end}}
            >
              {{if not $field.Multiple}}<option value="">{{defaultVal "Select..." $field.Placeholder}}</option>{{end}}
              {{range $field.Options}}
              <option value="{{.Value}}"{{if .Selected}} selected{{end}}{{if .Disabled}} disabled{{end}}>{{.Label}}</option>
              {{end}}
            </select>
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
            {{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
          </div>
        {{else if eq $field.Type "textarea"}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <textarea
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              placeholder="{{defaultVal "" $field.Placeholder}}"
              {{if $field.Required}}required{{end}}
              {{if $field.Readonly}}readonly{{end}}
              {{if $field.Disabled}}disabled{{end}}
              {{if $field.Autofocus}}autofocus{{end}}
              {{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
              {{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
            >{{$field.Value}}</textarea>
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
            {{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
          </div>
        {{else if eq $field.Type "checkbox"}}
          <div class="mb-3">
            <div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
            {{if $field.Options}}
              {{range $field.Options}}
              <label class="form-check">
                <input
                  class="form-check-input"
                  type="checkbox"
                  name="{{$field.Name}}"
                  value="{{.Value}}"
                  {{if .Checked}}checked{{end}}
                  {{if .Disabled}}disabled{{end}}
                >
                <span class="form-check-label">{{.Label}}</span>
              </label>
              {{end}}
            {{else}}
              <label class="form-check">
                <input
                  class="form-check-input"
                  type="checkbox"
                  name="{{$field.Name}}"
                  value="1"
                  {{if eq $field.Value "true"}}checked{{end}}
                >
                <span class="form-check-label">{{defaultVal "Yes" $field.Placeholder}}</span>
              </label>
            {{end}}
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
          </div>
        {{else if eq $field.Type "radio"}}
          <div class="mb-3">
            <div class="form-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</div>
            {{range $field.Options}}
            <label class="form-check">
              <input
                class="form-check-input"
                type="radio"
                name="{{$field.Name}}"
                value="{{.Value}}"
                {{if .Checked}}checked{{end}}
                {{if .Disabled}}disabled{{end}}
              >
              <span class="form-check-label">{{.Label}}</span>
            </label>
            {{end}}
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
          </div>
        {{else if eq $field.Type "toggle"}}
          <div class="mb-3">
            <label class="form-check form-switch">
              <input
                class="form-check-input"
                type="checkbox"
                name="{{$field.Name}}"
                {{if eq $field.Value "true"}}checked{{end}}
                {{if $field.Disabled}}disabled{{end}}
              >
              <span class="form-check-label">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</span>
            </label>
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
          </div>
        {{else if eq $field.Type "file"}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <input
              type="file"
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              {{if $field.Required}}required{{end}}
              {{if $field.Disabled}}disabled{{end}}
              {{if $field.Multiple}}multiple{{end}}
              {{if $field.Accept}}accept="{{$field.Accept}}"{{end}}
            >
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
            {{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
          </div>
        {{else if eq $field.Type "color"}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <input
              type="color"
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-control form-control-color{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              value="{{defaultVal "#206bc4" $field.Value}}"
              {{if $field.Required}}required{{end}}
              {{if $field.Disabled}}disabled{{end}}
            >
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
          </div>
        {{else if eq $field.Type "range"}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <input
              type="range"
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-range{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              value="{{defaultVal "50" $field.Value}}"
              {{if $field.Min}}min="{{$field.Min}}"{{end}}
              {{if $field.Max}}max="{{$field.Max}}"{{end}}
              {{if $field.Step}}step="{{$field.Step}}"{{end}}
              {{if $field.Disabled}}disabled{{end}}
            >
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
          </div>
        {{else if eq $field.Type "phone"}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <div class="input-group">
              <span class="input-group-text">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 4h4l2 5l-2.5 1.5a11 11 0 0 0 5 5l1.5 -2.5l5 2v4a2 2 0 0 1 -2 2a16 16 0 0 1 -15 -15a2 2 0 0 1 2 -2" /></svg>
              </span>
              <input
                type="tel"
                id="field-{{$field.Name}}"
                name="{{$field.Name}}"
                class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
                placeholder="{{defaultVal "" $field.Placeholder}}"
                value="{{$field.Value}}"
                {{if $field.Required}}required{{end}}
                {{if $field.Readonly}}readonly{{end}}
                {{if $field.Disabled}}disabled{{end}}
                {{if $field.Autofocus}}autofocus{{end}}
                {{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
                {{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
              >
            </div>
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
            {{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
          </div>
        {{else}}
          {{/* Default: text, email, number, url, date, datetime-local, password, and any unknown type */}}
          <div class="mb-3">
            <label class="form-label" for="field-{{$field.Name}}">{{$field.Label}}{{if $field.Required}} <span class="text-danger">*</span>{{end}}</label>
            <input
              type="{{$field.Type}}"
              id="field-{{$field.Name}}"
              name="{{$field.Name}}"
              class="form-control{{if $field.Success}} is-valid{{end}}{{if $field.Error}} is-invalid{{end}}{{if defaultVal "" $field.Class}} {{$field.Class}}{{end}}"
              placeholder="{{defaultVal "" $field.Placeholder}}"
              value="{{$field.Value}}"
              {{if $field.Required}}required{{end}}
              {{if $field.Readonly}}readonly{{end}}
              {{if $field.Disabled}}disabled{{end}}
              {{if $field.Autofocus}}autofocus{{end}}
              {{if $field.Pattern}}pattern="{{$field.Pattern}}"{{end}}
              {{if $field.MaxLength}}maxlength="{{$field.MaxLength}}"{{end}}
              {{if $field.MinLength}}minlength="{{$field.MinLength}}"{{end}}
              {{if $field.Min}}min="{{$field.Min}}"{{end}}
              {{if $field.Max}}max="{{$field.Max}}"{{end}}
              {{if $field.Step}}step="{{$field.Step}}"{{end}}
            >
            {{if $field.HelpText}}<small class="form-hint">{{$field.HelpText}}</small>{{end}}
            {{if $field.ErrorText}}<div class="invalid-feedback">{{$field.ErrorText}}</div>{{end}}
          </div>
        {{end}}

        {{if and (gt $cols 1) (eq $layout "horizontal")}}
        </div>
        {{else if gt $cols 1}}
        </div>
        {{end}}
      {{end}}

      {{if gt .Columns 1}}
      </div>
      {{end}}

      {{if .FieldsetTitle}}
      </fieldset>
      {{end}}

      <div class="form-footer{{if .FieldsetTitle}} mt-2{{end}}">
        <button type="submit" class="btn btn-primary">{{defaultVal "Submit" .SubmitText}}</button>
        {{if .ShowReset}}
        <button type="reset" class="btn btn-link link-secondary ms-auto">{{defaultVal "Reset" .ResetText}}</button>
        {{end}}
      </div>
    </form>
  </div>
</div>
{{end}}