<div class="edit-main-nav admin-controls">
  <nav>
    <ul class="nav nav-pills target">
      {{#each this.visibleTargets as |target|}}
        <li>
          <LinkTo
            @route={{this.editRouteName}}
            @models={{array this.theme.id target.name this.fieldName}}
            @replace={{true}}
            title={{this.field.title}}
            class={{if target.edited "edited" "blank"}}
          >
            {{#if target.error}}{{d-icon "exclamation-triangle"}}{{/if}}
            {{#if target.icon}}{{d-icon target.icon}}{{/if}}
            {{i18n (concat "admin.customize.theme." target.name)}}
          </LinkTo>
        </li>
      {{/each}}

      {{#if this.allowAdvanced}}
        <li>
          <a
            {{on "click" this.toggleShowAdvanced}}
            href
            title={{i18n
              (concat
                "admin.customize.theme."
                (if this.showAdvanced "hide_advanced" "show_advanced")
              )
            }}
            class="no-text"
          >
            {{d-icon
              (if this.showAdvanced "angle-double-left" "angle-double-right")
            }}
          </a>
        </li>
      {{/if}}
      <li class="spacer"></li>
      <li>
        <label>
          <Input
            @type="checkbox"
            @checked={{this.onlyOverridden}}
            {{on
              "click"
              (action "onlyOverriddenChanged" value="target.checked")
            }}
          />
          {{i18n "admin.customize.theme.hide_unused_fields"}}
        </label>
      </li>
    </ul>
  </nav>
</div>

<div class="admin-controls">
  <nav>
    <ul class="nav nav-pills fields">
      {{#each this.visibleFields as |field|}}
        <li>
          <LinkTo
            @route={{this.editRouteName}}
            @models={{array this.theme.id this.currentTargetName field.name}}
            @replace={{true}}
            title={{field.title}}
            class={{if field.edited "edited" "blank"}}
          >
            {{#if field.error}}{{d-icon "exclamation-triangle"}}{{/if}}
            {{#if field.icon}}{{d-icon field.icon}}{{/if}}
            {{field.translatedName}}
          </LinkTo>
        </li>
      {{/each}}

      {{#if this.showAddField}}
        <li>
          {{#if this.addingField}}
            <Input
              @type={{this.text}}
              @value={{this.newFieldName}}
              @enter={{action "addField"}}
              @escape-press={{action "cancelAddField"}}
            />
            <DButton
              @class="ok"
              @action={{action "addField" this.newFieldName}}
              @icon="check"
            />
            <DButton
              @class="cancel"
              @action={{action "cancelAddField"}}
              @icon="times"
            />
          {{else}}
            <a href {{on "click" this.toggleAddField}} class="no-text">
              {{d-icon "plus"}}
            </a>
          {{/if}}
        </li>
      {{/if}}

      <li class="spacer"></li>
      <li>
        <a href {{on "click" this.toggleMaximize}} class="no-text">
          {{d-icon this.maximizeIcon}}
        </a>
      </li>
    </ul>
  </nav>
</div>

{{#if this.error}}
  <pre class="field-error">{{this.error}}</pre>
{{/if}}

{{#if this.warning}}
  <pre class="field-warning">{{html-safe this.warning}}</pre>
{{/if}}

<AceEditor
  @content={{this.activeSection}}
  @editorId={{this.editorId}}
  @mode={{this.activeSectionMode}}
  @autofocus="true"
  @placeholder={{this.placeholder}}
  @htmlPlaceholder={{true}}
  @save={{action "save"}}
  @setWarning={{action "setWarning"}}
/>