discourse/app/assets/javascripts/admin/addon/templates/customize-themes-show.hbs

<div class="show-current-style">
  <PluginOutlet @name="admin-customize-themes-show-top" @tagName="span" @connectorTagName="div" @args={{hash theme=model}} />
  <div class="title">
    {{#if editingName}}
      <TextField @value={{model.name}} @autofocus="true" />
      <DButton @action={{action "finishedEditingName"}} @class="btn-primary btn-small submit-edit" @icon="check" />
      <DButton @action={{action "cancelEditingName"}} @class="btn-small cancel-edit" @icon="times" />
    {{else}}
      <span>{{model.name}}</span>
      <DButton @action={{action "startEditingName"}} @icon="pencil-alt" @class="btn-small" />
    {{/if}}
  </div>

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

  {{#unless model.supported}}
    <div class="alert alert-error">
      {{i18n "admin.customize.theme.required_version.error"}}
      {{#if model.remote_theme.minimum_discourse_version}}
        {{i18n "admin.customize.theme.required_version.minimum" version=model.remote_theme.minimum_discourse_version}}
      {{/if}}
      {{#if model.remote_theme.maximum_discourse_version}}
        {{i18n "admin.customize.theme.required_version.maximum" version=model.remote_theme.maximum_discourse_version}}
      {{/if}}
    </div>
  {{/unless}}

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

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

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

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

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

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

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

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

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

  {{#unless model.component}}
    <DSection @class="form-horizontal theme settings control-unit">
      <div class="row setting">
        <div class="setting-label">
          {{i18n "admin.customize.theme.color_scheme"}}
        </div>
        <div class="setting-value">
          <ColorPalettes @content={{colorSchemes}} @value={{colorSchemeId}} @icon="paint-brush" @options={{hash
              filterable=true
            }} />

          <div class="desc">{{i18n "admin.customize.theme.color_scheme_select"}}</div>
        </div>
        <div class="setting-controls">
          {{#if colorSchemeChanged}}
            <DButton @action={{action "changeScheme"}} @class="ok submit-edit" @icon="check" />
            <DButton @action={{action "cancelChangeScheme"}} @class="cancel cancel-edit" @icon="times" />
          {{/if}}
        </div>
      </div>
    </DSection>
  {{/unless}}

  {{#if parentThemes}}
    <div class="control-unit">
      <div class="mini-title">{{i18n "admin.customize.theme.component_of"}}</div>
      <ul>
        {{#each parentThemes as |theme|}}
          <li><LinkTo @route="adminCustomizeThemes.show" @model={{theme}} @replace={{true}}>{{theme.name}}</LinkTo></li>
        {{/each}}
      </ul>
    </div>
  {{/if}}

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

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

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

    <div class="control-unit">
      <div class="mini-title">{{i18n "admin.customize.theme.uploads"}}</div>
      {{#if model.uploads}}
        <ul class="removable-list">
          {{#each 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={{action "removeUpload"}} @actionParam={{upload}} @class="second btn-default btn-default cancel-edit" @icon="times" />
              </span>
            </li>
          {{/each}}
        </ul>
      {{else}}
        <div class="description">{{i18n "admin.customize.theme.no_uploads"}}</div>
      {{/if}}
      <DButton @action={{action "addUploadModal"}} @class="btn-default" @icon="plus" @label="admin.customize.theme.add" />
    </div>
  {{/unless}}

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

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

  {{#if hasTranslations}}
    <div class="control-unit">
      <div class="mini-title">{{i18n "admin.customize.theme.theme_translations"}}</div>
      <DSection @class="form-horizontal theme settings translations control-unit">
        {{#each translations as |translation|}}
          <ThemeTranslation @translation={{translation}} @model={{model}} @class="theme-translation" />
        {{/each}}
      </DSection>
    </div>
  {{/if}}

  <div class="theme-controls">

    <a href={{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={{downloadUrl}}>{{d-icon "download"}} {{i18n "admin.export_json.button_text"}}</a>

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

    {{#if model.component}}
      {{#if model.enabled}}
        <DButton @class="btn-default" @action={{action "disableComponent"}} @icon="ban" @label="admin.customize.theme.disable" />
      {{else}}
        <DButton @class="btn-default" @action={{action "enableComponent"}} @icon="check" @label="admin.customize.theme.enable" />
      {{/if}}
    {{/if}}

    <DButton @action={{action "destroy"}} @label="admin.customize.delete" @icon="trash-alt" @class="btn-danger" />

  </div>

</div>