{{define "types:fields"}}
{{ range .fields }}
<div class="w3-card" style="padding: 10px; margin-top: 10px">
  <div id="Field-{{.Type_field_id}}">
    <div class="w3-row">
      <div class="w3-half">
        {{ widget_select (print "Fields-"  .Type_field_id "-Widget_id") "Widget" .Widget_id $.widgets `class="w3-input w3-border"` }}
      </div>
      <div class="w3-half">
        <label for="Fields-{{.Type_field_id}}-Title">Title</label>
        <input
          class="w3-input w3-border"
          type="text"
          id="Fields-{{.Type_field_id}}-Title"
          name="Fields-{{.Type_field_id}}-Title"
          value="{{.Title}}"
        />
      </div>
    </div>

    <div class="w3-row">
      <div class="w3-half">
        <label for="Fields-{{.Type_field_id}}-Valid_values"
          >Valid values</label
        >
        <input
          class="w3-input w3-border"
          type="text"
          id="Fields-{{.Type_field_id}}-Valid_values"
          name="Fields-{{.Type_field_id}}-Valid_values"
          value="{{.Valid_values}}"
        />
      </div>
      <div class="w3-half">
        {{ widget_select (print "Fields-"  .Type_field_id "-Ui_section") "Section" .Ui_section $.uisections `class="w3-input w3-border"` }}
      </div>
    </div>
    <div class="w3-row">
        <p>
          <input
            id="Fields-{{.Type_field_id}}-Show_on_list"
            name="Fields-{{.Type_field_id}}-Show_on_list"
            class="w3-check"
            type="checkbox"
            value="1"
            {{if eq .Show_on_list 1 }}
            checked="checked"
            {{end}}
          />
          <label for="Fields-{{.Type_field_id}}-Show_on_list"
            >Show on list</label
          >
        </p>
        <p>
          <input
            id="Fields-{{.Type_field_id}}-Show_on_view"
            name="Fields-{{.Type_field_id}}-Show_on_view"
            class="w3-check"
            type="checkbox"
            value="1"
            {{if eq .Show_on_view 1 }}
            checked="checked"
            {{end}}
          />
          <label for="Fields-{{.Type_field_id}}-Show_on_view"
            >Show on view</label
          >
        </p>
        <p>
          <input
            id="Fields-{{.Type_field_id}}-Is_multiple"
            name="Fields-{{.Type_field_id}}-Is_multiple"
            class="w3-check"
            type="checkbox"
            value="1"
            {{if eq .Is_multiple 1 }}
            checked="checked"
            {{end}}
          />
          <label for="Fields-{{.Type_field_id}}-Is_multiple"
            >Multiple</label
          >
        </p>    
    </div>
    <input
      type="hidden"
      id="Fields-{{.Type_field_id}}-ToRemove"
      name="Fields-{{.Type_field_id}}-ToRemove"
      value=""
    />
  </div>
  <div class="w3-bar">
    <button
      id="Delete-{{.Type_field_id}}"
      class="w3-right w3-btn w3-metro-dark-red w3-round-large"
      type="button"
      _="on click set {value: '1'} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Undelete-{{.Type_field_id}} then add .w3-opacity-max to #Field-{{.Type_field_id}}"
    >
      <i class="bi bi-file-minus" title="Remove"></i><span class="hide-small"> Remove</span>
    </button>
    <button
      id="Undelete-{{.Type_field_id}}"
      style="margin-right: 5px; display: none"
      class="w3-right w3-btn w3-metro-blue w3-round-large"
      type="button"
      _="on click set {value: ''} on #Fields-{{.Type_field_id}}-ToRemove then hide me then show #Delete-{{.Type_field_id}} then remove .w3-opacity-max from #Field-{{.Type_field_id}}">
      <i class="bi bi-arrow-counterclockwise" title="Undo"></i><span class="hide-small"> Undo</span>
    </button>
  </div>
</div>
{{ end }}
{{ end }}
