<h2>Edit '{{subtypeName}}' field</h2>
<div class="textfield-container {{if validator.isDisplayNameInvalid 'has-error'}}">
  <button class="btn btn-link wysiwyg-toggle" {{action "toggleDisplayNameWYSIWYG"}}>
    {{#if isDisplayNameWYSIWYGEnabled}}
      TEXT
    {{else}}
      WYSIWYG
    {{/if}}
  </button>
  <label class="control-label">
    Display Name
    {{#if isDisplayNameWYSIWYGEnabled}}
      {{tinymce-editor options=editorOptions value=model.display_name}}
    {{else}}
      {{input type="text" id="field-display-name" placeholder="(Display Name)" value=model.display_name class="form-control input-sm"}}
    {{/if}}
  </label>
</div>
<div class="{{if validator.isDataNameInvalid 'has-error'}}">
  <label class="control-label">
    Data Column Name
    {{input type="text" id="field-data-name" placeholder="(Data Column Name)" value=model.data_name class="form-control input-sm"}}
  </label>
</div>
<div class="{{if validator.isSlugInvalid 'has-error'}}">
  <label class="control-label">
    Slug
    {{input type="text" id="field-slug" placeholder="(field-name)" value=autoSlug class="form-control input-sm"}}
  </label>
</div>
<label>
  {{input type="checkbox" id="field-required" checked=model.required}}
  Required
</label>

<div class="{{if validator.isOptionListInvalid 'has-error'}}">
  <label class="control-label">
    Option List
    {{#if optionlistsReady}}
      {{#x-select value=model.option_list.content action=(action 'optionListChanged') class="form-control input-sm" as |xs|}}
        <option>Choose `Option Set`...</option>
        {{#each optionlists as |optionlist|}}
          {{#xs.option value=optionlist}}{{optionlist.name}}{{/xs.option}}
        {{/each}}
      {{/x-select}}
    {{else}}
      Loading
    {{/if}}
  </label>
</div>
{{#if hasOptionGroups}}
  <label class="control-label">
    Option Group
    {{#if optiongroupsReady}}
      {{#x-select value=model.option_group.content action=(action 'optionGroupChanged') class="form-control input-sm" as |xs|}}
        <option>Choose `Option Set`...</option>
        {{#each optiongroups as |optiongroup|}}
          {{#xs.option value=optiongroup}}{{optiongroup.name}}{{/xs.option}}
        {{/each}}
      {{/x-select}}
    {{else}}
      Loading
    {{/if}}
  </label>
{{/if}}
<label>
  Default Selected
  {{#if optionlistsReady}}
    {{#if supportsMultiValue}}
      {{#x-select value=model.default_options.content multiple=true action=(action 'defaultOptionChanged') class="form-control input-sm" as |xs|}}
        <option>Choose `Default Option`...</option>
        {{#each options as |option|}}
          {{#xs.option value=option}}{{option.name}}{{/xs.option}}
        {{/each}}
      {{/x-select}}
      {{!-- {{view "select"
        multiple="true"
        selection=default_options
        content=options
        optionValuePath="content"
        optionLabelPath="content.name"
        class="form-control input-sm"}} --}}
    {{else}}
      {{#x-select value=model.default_option.content action=(action 'defaultOptionChanged') class="form-control input-sm" as |xs|}}
        <option>Choose `Default Option`...</option>
        {{#each options as |option|}}
          {{#xs.option value=option}}{{option.name}}{{/xs.option}}
        {{/each}}
      {{/x-select}}
      {{!-- {{view "select"
        selection=default_option.content
        content=options
        prompt="Choose Default Option"
        optionValuePath="content"
        optionLabelPath="content.name"
        class="form-control input-sm"}} --}}
    {{/if}}
  {{else}}
    Loading
  {{/if}}
</label>

{{#if supportsMultiValue}}
  <label>
    Minimum Selections
    {{input type="text" id="field-minimum-selections" value=model.minimum_selections class="form-control input-sm"}}
  </label>
  <label>
    Maximum Selections
    {{input type="text" id="field-maximum-selections" value=model.maximum_selections class="form-control input-sm"}}
  </label>
{{else}}
  <label class="control-label">
    Default Text (unselected)
    {{input type="text" id="field-default-text" placeholder="(Choose one)" value=model.default_text class="form-control input-sm"}}
  </label>
{{/if}}

<div class="extras">
  <h4>Extras</h4>
  <label>
    Help Text
    {{input type="text" id="field-help-text" placeholder="" value=model.help_text class="form-control input-sm"}}
  </label>
  <label>
    CSS Class
    {{input type="text" id="field-css-class" value=model.css_class class="form-control input-sm"}}
  </label>
</div>

<button class="btn btn-primary" type="submit" {{action "doneEditingField"}}>Done</button>
