{{define "type:field_new"}}
<div class="card" id="field-new-{{.counter}}" style="padding: 10px; margin-top: 10px">
  <div class="row">
    <div class="col half">
      {{ widget_select (print "Fields-New-" .counter "-Widget_id") "Widget" "" .widgets `` }}
    </div>
    <div class="col half">
      <label for="Fields-New-{{.counter}}-Title">Title</label>
      <input type="text" id="Fields-New-{{.counter}}-Title" name="Fields-New-{{.counter}}-Title" value=""/>
    </div>
  </div>

  <div class="row">
    <div class="col half">
      <label for="Fields-New-{{.counter}}-Valid_values">Valid values</label>
      <input type="text" id="Fields-New-{{.counter}}-Valid_values" name="Fields-New-{{.counter}}-Valid_values" value=""/>
    </div>
    <div class="col half">
        {{ widget_select (print "Fields-"  .Type_field_id "-Ui_section") "Section" "general" $.uisections `` }}
    </div>
  </div>

  <div class="row">
    <p>{{ widget_checkbox (print "Fields-New-" .counter "-Show_on_list") "Show on list" "1" .Show_on_list }}</p>
    <p>{{ widget_checkbox (print "Fields-New-" .counter "-Show_on_view") "Show on view" "1" .Show_on_view }}</p>
    <p>{{ widget_checkbox (print "Fields-New-" .counter "-Is_multiple") "Multiple" "1" .Is_multiple }}</p>
  </div>
  <div class="bar">
    <button type="button" style="float:right; margin-right: 5px;" onclick="document.getElementById('field-new-{{.counter}}').remove()" class="delete"><i class="bi bi-file-minus" title="Remove"></i><span class="hide-xsmall"> Remove</span></button>
  </div>
</div>
{{ end }}
