{{#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">
            <div class="popular-theme-name">
              <a href="{{theme.meta_url}}" 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}}" 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'><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 valueAttribute="value" content=createTypes value=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}}