{{#if this.editingThemeSetting}}
  {{outlet}}
{{else}}
  <div class="show-current-style">
    <span>
      <PluginOutlet
        @name="admin-customize-themes-show-top"
        @connectorTagName="div"
        @outletArgs={{hash theme=this.model}}
      />
    </span>

    <div class="title">
      {{#if this.editingName}}
        <TextField @value={{this.model.name}} @autofocus="true" />
        <DButton
          @action={{this.finishedEditingName}}
          @icon="check"
          class="btn-primary btn-small submit-edit"
        />
        <DButton
          @action={{this.cancelEditingName}}
          @icon="xmark"
          class="btn-small cancel-edit"
        />
      {{else}}
        <span>{{this.model.name}}</span>
        <DButton
          @action={{this.startEditingName}}
          @icon="pencil"
          class="btn-small"
        />
      {{/if}}
    </div>

    <PluginOutlet
      @name="admin-customize-theme-before-errors"
      @outletArgs={{hash theme=this.model}}
    />

    {{#each this.model.errors as |error|}}
      <div class="alert alert-error">{{error}}</div>
    {{/each}}

    {{#if this.finishInstall}}
      <div class="control-unit">
        {{#if this.sourceIsHttp}}
          <a class="remote-url" href={{this.remoteThemeLink}}>{{i18n
              "admin.customize.theme.source_url"
            }}{{d-icon "link"}}</a>
        {{else}}
          <div class="remote-url">
            <code>{{this.model.remote_theme.remote_url}}</code>
            {{#if this.model.remote_theme.branch}}
              (<code>{{this.model.remote_theme.branch}}</code>)
            {{/if}}
          </div>
        {{/if}}

        {{#if this.showRemoteError}}
          <div class="error-message">
            {{d-icon "triangle-exclamation"}}
            {{i18n "admin.customize.theme.repo_unreachable"}}
          </div>
          <div class="raw-error">
            <code>{{this.model.remoteError}}</code>
          </div>
        {{/if}}

        <DButton
          @action={{this.updateToLatest}}
          @icon="download"
          @label="admin.customize.theme.finish_install"
          class="btn-primary finish-install"
        />
        <DButton
          @action={{this.destroyTheme}}
          @label="admin.customize.delete"
          @icon="trash-can"
          class="btn-danger"
        />

        <span class="status-message">
          {{i18n "admin.customize.theme.last_attempt"}}
          {{format-date this.model.remote_theme.updated_at leaveAgo="true"}}
        </span>
      </div>
    {{else}}
      {{#unless this.model.supported}}
        <div class="alert alert-error">
          {{i18n "admin.customize.theme.required_version.error"}}
          {{#if this.model.remote_theme.minimum_discourse_version}}
            {{i18n
              "admin.customize.theme.required_version.minimum"
              version=this.model.remote_theme.minimum_discourse_version
            }}
          {{/if}}
          {{#if this.model.remote_theme.maximum_discourse_version}}
            {{i18n
              "admin.customize.theme.required_version.maximum"
              version=this.model.remote_theme.maximum_discourse_version
            }}
          {{/if}}
        </div>
      {{/unless}}

      {{#unless this.model.enabled}}
        <div class="alert alert-error">
          {{#if this.model.disabled_by}}
            {{i18n "admin.customize.theme.disabled_by"}}
            <UserLink @user={{this.model.disabled_by}}>
              {{avatar this.model.disabled_by imageSize="tiny"}}
              {{this.model.disabled_by.username}}
            </UserLink>
            {{format-date this.model.disabled_at leaveAgo="true"}}
          {{else}}
            {{i18n "admin.customize.theme.disabled"}}
          {{/if}}
          <DButton
            @action={{this.enableComponent}}
            @icon="check"
            @label="admin.customize.theme.enable"
            class="btn-default"
          />
        </div>
      {{/unless}}

      <div class="metadata control-unit">
        {{#if this.model.remote_theme}}
          {{#if this.model.remote_theme.remote_url}}
            {{#if this.sourceIsHttp}}
              <a class="remote-url" href={{this.remoteThemeLink}}>{{i18n
                  "admin.customize.theme.source_url"
                }}{{d-icon "link"}}</a>
            {{else}}
              <div class="remote-url">
                <code>{{this.model.remote_theme.remote_url}}</code>
                {{#if this.model.remote_theme.branch}}
                  (<code>{{this.model.remote_theme.branch}}</code>)
                {{/if}}
              </div>
            {{/if}}
          {{/if}}

          {{#if this.model.remote_theme.about_url}}
            <a
              class="url about-url"
              href={{this.model.remote_theme.about_url}}
            >{{i18n "admin.customize.theme.about_theme"}}{{d-icon "link"}}</a>
          {{/if}}

          {{#if this.model.remote_theme.license_url}}
            <a
              class="url license-url"
              href={{this.model.remote_theme.license_url}}
            >{{i18n "admin.customize.theme.license"}}{{d-icon "link"}}</a>
          {{/if}}

          {{#if this.model.description}}
            <span class="theme-description">{{this.model.description}}</span>
          {{/if}}

          {{#if this.model.remote_theme.authors}}<span class="authors"><span
                class="heading"
              >{{i18n "admin.customize.theme.authors"}}</span>
              {{this.model.remote_theme.authors}}</span>{{/if}}

          {{#if this.model.remote_theme.theme_version}}<span
              class="version"
            ><span class="heading">{{i18n
                  "admin.customize.theme.version"
                }}</span>
              {{this.model.remote_theme.theme_version}}</span>{{/if}}

          <div class="control-unit">
            {{#if this.model.remote_theme.is_git}}
              <div class="alert alert-info">
                {{html-safe
                  (i18n
                    "admin.customize.theme.remote_theme_edits"
                    repoURL=this.remoteThemeLink
                  )
                }}
              </div>

              {{#if this.showRemoteError}}
                <div class="error-message">
                  {{d-icon "triangle-exclamation"}}
                  {{i18n "admin.customize.theme.repo_unreachable"}}
                </div>
                <div class="raw-error">
                  <code>{{this.model.remoteError}}</code>
                </div>
              {{/if}}

              {{#if this.model.remote_theme.commits_behind}}
                <DButton
                  @action={{this.updateToLatest}}
                  @icon="download"
                  @label="admin.customize.theme.update_to_latest"
                  class="btn-primary"
                />
              {{else}}
                <DButton
                  @action={{this.checkForThemeUpdates}}
                  @icon="arrows-rotate"
                  @label="admin.customize.theme.check_for_updates"
                  class="btn-default"
                />
              {{/if}}

              <span class="status-message">
                {{#if this.updatingRemote}}
                  {{i18n "admin.customize.theme.updating"}}
                {{else}}
                  {{#if this.model.remote_theme.commits_behind}}
                    {{#if this.hasOverwrittenHistory}}
                      {{i18n "admin.customize.theme.has_overwritten_history"}}
                    {{else}}
                      {{i18n
                        "admin.customize.theme.commits_behind"
                        count=this.model.remote_theme.commits_behind
                      }}
                    {{/if}}
                    {{#if this.model.remote_theme.github_diff_link}}
                      <a href={{this.model.remote_theme.github_diff_link}}>
                        {{i18n "admin.customize.theme.compare_commits"}}
                      </a>
                    {{/if}}
                  {{else}}
                    {{#unless this.showRemoteError}}
                      {{i18n "admin.customize.theme.up_to_date"}}
                      {{format-date
                        this.model.remote_theme.updated_at
                        leaveAgo="true"
                      }}
                    {{/unless}}
                  {{/if}}
                {{/if}}
              </span>
            {{else}}
              <span class="status-message">
                {{d-icon "circle-info"}}
                {{i18n "admin.customize.theme.imported_from_archive"}}
              </span>
            {{/if}}
          </div>
        {{else}}
          <span class="heading">{{i18n "admin.customize.theme.creator"}}</span>
          <span>
            <UserLink @user={{this.model.user}}>
              {{format-username this.model.user.username}}
            </UserLink>
          </span>
        {{/if}}
      </div>

      {{#if this.showCheckboxes}}
        <div class="control-unit">
          {{#unless this.model.component}}
            <InlineEditCheckbox
              @action={{action "applyDefault"}}
              @labelKey="admin.customize.theme.is_default"
              @checked={{this.model.default}}
              @modelId={{this.model.id}}
            />
            <InlineEditCheckbox
              @action={{action "applyUserSelectable"}}
              @labelKey="admin.customize.theme.user_selectable"
              @checked={{this.model.user_selectable}}
              @modelId={{this.model.id}}
            />
          {{/unless}}
          {{#if this.model.remote_theme}}
            <InlineEditCheckbox
              @action={{action "applyAutoUpdateable"}}
              @labelKey="admin.customize.theme.auto_update"
              @checked={{this.model.auto_update}}
              @modelId={{this.model.id}}
            />
          {{/if}}
        </div>
      {{/if}}

      {{#unless this.model.component}}
        <section
          class="form-horizontal theme settings control-unit theme-settings__color-scheme"
        >
          <div class="row setting">
            <div class="setting-label">
              {{i18n "admin.customize.theme.color_scheme"}}
            </div>

            <div class="setting-value">
              <div class="color-palette-input-group">
                <ColorPalettes
                  @content={{this.colorSchemes}}
                  @value={{this.colorSchemeId}}
                  @icon="paintbrush"
                  @options={{hash filterable=true}}
                />
                {{#if this.colorSchemeId}}
                  <DButton
                    @icon="pencil"
                    @action={{this.editColorScheme}}
                    @title="admin.customize.theme.edit_color_scheme"
                  />
                {{/if}}
              </div>

              <div class="desc">{{i18n
                  "admin.customize.theme.color_scheme_select"
                }}</div>
            </div>

            <div class="setting-controls">
              {{#if this.colorSchemeChanged}}
                <DButton
                  @action={{this.changeScheme}}
                  @icon="check"
                  class="ok submit-edit"
                />
                <DButton
                  @action={{this.cancelChangeScheme}}
                  @icon="xmark"
                  class="cancel cancel-edit"
                />
              {{/if}}
            </div>
          </div>
        </section>
      {{/unless}}

      {{#if this.model.component}}
        <section class="form-horizontal theme settings control-unit">
          <div class="row setting">
            <ThemeSettingRelativesSelector
              @setting={{this.relativesSelectorSettingsForComponent}}
              @model={{this.model}}
              class="theme-setting"
            />
          </div>
        </section>
      {{else}}
        <section class="form-horizontal theme settings control-unit">
          <div class="row setting">
            <ThemeSettingRelativesSelector
              @setting={{this.relativesSelectorSettingsForTheme}}
              @model={{this.model}}
              class="theme-setting"
            />
          </div>
        </section>
      {{/if}}

      {{#unless this.model.remote_theme.is_git}}
        <div class="control-unit">
          <div class="mini-title">{{i18n
              "admin.customize.theme.css_html"
            }}</div>
          {{#if this.model.hasEditedFields}}
            <div class="description">{{i18n
                "admin.customize.theme.custom_sections"
              }}</div>
            <ul>
              {{#each this.editedFieldsFormatted as |field|}}
                <li>{{field}}</li>
              {{/each}}
            </ul>
          {{else}}
            <div class="description">
              {{i18n "admin.customize.theme.edit_css_html_help"}}
            </div>
          {{/if}}

          <DButton
            @action={{this.editTheme}}
            @label="admin.customize.theme.edit_css_html"
            class="btn-default edit"
          />
        </div>

        <div class="control-unit">
          <div class="mini-title">{{i18n "admin.customize.theme.uploads"}}</div>
          {{#if this.model.uploads}}
            <ul class="removable-list">
              {{#each this.model.uploads as |upload|}}
                <li>
                  <span class="col">${{upload.name}}:
                    <a
                      href={{upload.url}}
                      rel="noopener noreferrer"
                      target="_blank"
                    >{{upload.filename}}</a></span>
                  <span class="col">
                    <DButton
                      @action={{fn this.removeUpload upload}}
                      @icon="xmark"
                      class="second btn-default btn-default cancel-edit"
                    />
                  </span>
                </li>
              {{/each}}
            </ul>
          {{else}}
            <div class="description">{{i18n
                "admin.customize.theme.no_uploads"
              }}</div>
          {{/if}}
          <DButton
            @action={{this.addUploadModal}}
            @icon="plus"
            @label="admin.customize.theme.add"
            class="btn-default"
          />
        </div>
      {{/unless}}

      {{#if this.extraFiles.length}}
        <div class="control-unit">
          <div class="mini-title">{{i18n
              "admin.customize.theme.extra_files"
            }}</div>
          <details>
            <summary>
              {{#if this.model.remote_theme}}
                {{i18n "admin.customize.theme.extra_files_remote"}}
              {{else}}
                {{i18n "admin.customize.theme.extra_files_upload"}}
              {{/if}}
            </summary>
            <ul>
              {{#each this.extraFiles as |extraFile|}}
                <li>{{extraFile.name}}</li>
              {{/each}}
            </ul>
          </details>
        </div>
      {{/if}}

      {{#if this.hasSettings}}
        <div class="control-unit">
          <div class="mini-title">{{i18n
              "admin.customize.theme.theme_settings"
            }}</div>
          <p><i>{{i18n
                "admin.customize.theme.overriden_settings_explanation"
              }}</i></p>
          <section class="form-horizontal theme settings control-unit">
            {{#each this.settings as |setting|}}
              <ThemeSettingEditor
                @setting={{setting}}
                @model={{this.model}}
                class="theme-setting control-unit"
              />
            {{/each}}
          </section>
        </div>
      {{/if}}

      {{#if this.hasTranslations}}
        <div class="control-unit">
          <div class="translation-selector-container">
            <span class="mini-title">
              {{i18n "admin.customize.theme.theme_translations"}}
            </span>
            <ComboBox
              @valueProperty="value"
              @content={{this.availableLocales}}
              @value={{this.locale}}
              @onChange={{this.updateLocale}}
              @options={{hash filterable=true}}
              class="translation-selector"
            />
          </div>
          <section
            class="form-horizontal theme settings translations control-unit"
          >

            {{#each this.translations as |translation|}}
              <ThemeTranslation
                @translation={{translation}}
                @model={{this.model}}
                class="theme-translation"
              />
            {{/each}}
          </section>
        </div>
      {{/if}}

      <PluginOutlet
        @name="admin-customize-theme-before-controls"
        @outletArgs={{hash theme=this.model}}
      />
      <div class="theme-controls">
        <a
          href={{this.previewUrl}}
          title={{i18n "admin.customize.explain_preview"}}
          rel="noopener noreferrer"
          target="_blank"
          class="btn btn-default"
        >{{d-icon "desktop"}}{{i18n "admin.customize.theme.preview"}}</a>
        <a
          class="btn btn-default export"
          rel="noopener noreferrer"
          target="_blank"
          href={{this.downloadUrl}}
        >{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>

        {{#if this.showConvert}}
          <DButton
            @action={{this.switchType}}
            @label="admin.customize.theme.convert"
            @icon={{this.convertIcon}}
            @title={{this.convertTooltip}}
            class="btn-default btn-normal"
          />
        {{/if}}

        {{#if this.model.component}}
          {{#if this.model.enabled}}
            <DButton
              @action={{this.disableComponent}}
              @icon="ban"
              @label="admin.customize.theme.disable"
              class="btn-default"
            />
          {{else}}
            <DButton
              @action={{this.enableComponent}}
              @icon="check"
              @label="admin.customize.theme.enable"
              class="btn-default"
            />
          {{/if}}
        {{/if}}
        {{#if this.hasSettings}}
          <DButton
            @action={{this.showThemeSettingsEditor}}
            @label="admin.customize.theme.settings_editor"
            @icon="pencil"
            @title="admin.customize.theme.settings_editor"
            class="btn-default btn-normal"
          />
        {{/if}}
        <DButton
          @action={{this.destroyTheme}}
          @label="admin.customize.delete"
          @icon="trash-can"
          class="btn-danger"
        />
      </div>
    {{/if}}
  </div>
{{/if}}