{{#d-modal-body class="upload-selector install-theme" title="admin.customize.theme.install"}}
  <div class="install-theme-items">
    {{install-theme-item value="popular" selection=selection label="admin.customize.theme.install_popular"}}
    {{install-theme-item value="local" selection=selection label="admin.customize.theme.install_upload"}}
    {{install-theme-item value="remote" selection=selection label="admin.customize.theme.install_git_repo"}}
    {{install-theme-item value="create" selection=selection label="admin.customize.theme.install_create" showIcon=true}}
  </div>
  <div class="install-theme-content">
    {{#if popular}}
      <div class="popular-theme-items">
        {{#each themes as |theme|}}
          <div class="popular-theme-item" data-name={{theme.name}}>
            <div class="popular-theme-name">
              <a href={{theme.meta_url}} rel="noopener noreferrer" target="_blank">
                {{#if theme.component}}
                  {{d-icon "puzzle-piece" title="admin.customize.theme.component"}}
                {{/if}}
                {{theme.name}}
              </a>
              <div class="popular-theme-description">
                {{theme.description}}
              </div>
            </div>

            <div class="popular-theme-buttons">
              {{#if theme.installed}}
                <span>{{i18n "admin.customize.theme.installed"}}</span>
              {{else}}
                {{d-button class="btn-small"
                  label="admin.customize.theme.install"
                  disabled=installDisabled
                  icon="upload"
                  action=(action "installThemeFromList" theme.value)}}

                {{#if theme.preview}}
                  <a href={{theme.preview}} rel="noopener noreferrer" target="_blank">{{d-icon "desktop"}} {{i18n "admin.customize.theme.preview"}}</a>
                {{/if}}
              {{/if}}
            </div>
          </div>
        {{/each}}
      </div>
    {{/if}}

    {{#if local}}
      <div class="inputs">
        <input onchange={{action "uploadLocaleFile"}} type="file" id="file-input" accept=".dcstyle.json,application/json,.tar.gz,application/x-gzip,.zip,application/zip"><br>
        <span class="description">{{i18n "admin.customize.theme.import_file_tip"}}</span>
      </div>
    {{/if}}

    {{#if remote}}
      <div class="inputs">
        <div class="repo">
          <div class="label">{{i18n "admin.customize.theme.import_web_tip"}}</div>
          {{input value=uploadUrl placeholder=urlPlaceholder}}
        </div>

        {{d-button
          class="btn-small advanced-repo"
          action=(action "toggleAdvanced")
          label="admin.customize.theme.import_web_advanced"}}

        {{#if advancedVisible}}
          <div class="branch">
            <div class="label">{{i18n "admin.customize.theme.remote_branch"}}</div>
            {{input value=branch placeholder="master"}}
          </div>

          <div class="check-private">
            <label>
              {{input type="checkbox" checked=privateChecked}}
              {{i18n "admin.customize.theme.is_private"}}
            </label>
          </div>
          {{#if showPublicKey}}
            <div class="public-key">
              <div class="label">{{i18n "admin.customize.theme.public_key"}}</div>
              {{textarea readonly=true value=publicKey}}
            </div>
          {{/if}}
        {{/if}}
      </div>
    {{/if}}

    {{#if create}}
      <div class="inputs">
        <div class="label">{{i18n "admin.customize.theme.create_name"}}</div>
        {{input value=name placeholder=placeholder}}

        <div class="label">{{i18n "admin.customize.theme.create_type"}}</div>
        {{combo-box
          valueProperty="value"
          content=createTypes
          value=selectedType
          onChange=(action (mut selectedType))
        }}
      </div>
    {{/if}}
  </div>

{{/d-modal-body}}

{{#unless popular}}
  <div class="modal-footer">
    {{d-button action=(action "installTheme") disabled=installDisabled class="btn btn-primary" label=submitLabel}}
    {{d-modal-cancel close=(route-action "closeModal")}}
  </div>
{{/unless}}