<div class="ext-details">
  <div class="brick brick--theme-grey pd-0">
    <div class="flex flex--nowrap flex--stretch">
      {{#link-to 'settings.extensions.index' class='flex__item pd-x-1 fill-grey-10'}}
        {{svg-icon path='svg/close' iconModifier='ext-details__icon'}}
      {{/link-to}}
      <div class="flex__item flex__item--grow pd-1 border-l">
        <h4>{{i18n 'Extension Details'}}</h4>
      </div>
    </div>
  </div>
  <div class="ext-details__body brick brick--theme-grey brick--pd-lg">
    <div class="flex flex--nowrap flex--verticalCenter">
      <img src="{{extension.iconUrl}}" class="square-5 flex__item flex__item--noShrink" data-test-selector="ext-icon">
      <div class="flex__item flex__item--grow mg-l-1">
        <h4 class="mg-0 pd-0" data-test-selector="ext-name">{{extension.name}}</h4>
        <p class="ext-details__author ext-author mg-0 pd-0" data-test-selector="ext-author">{{authorText}}</p>
      </div>
      {{#if extensionInstallation}}
        <div class="flex__item mg-x-1">
          {{#link-to 'settings.extensions.configure' extension.id classNames='button button--text button--large'}}
            {{i18n 'Config'}}
          {{/link-to}}
        </div>
        <div class="flex__item">
          {{#common/button-element onClick=(action 'onUninstallClicked') isHollow=true}}
            {{i18n 'Uninstall'}}
          {{/common/button-element}}
        </div>
      {{else}}
        <div class="flex__item mg-r-2">
          {{#common/button-element onClick=(action 'onInstallClicked') testSelector='ext-install' hasIcon=true size='large'}}
            {{svg-icon path='svg/plus'}}
            <span>{{i18n 'Install'}}</span>
          {{/common/button-element}}
        </div>
      {{/if}}
    </div>
    <div class="tower tower--gutter-none pd-t-1">
      <div class="col-xs-7 pd-r-1">
        <div class="brick brick--theme-white">
          <div class="ext-screens__listing">
            <div class="pos-relative js-ext-screens-scroller tower tower--nowrap tower--xs-1-2 tower--gutter-xs" data-test-selector="ext-screens">
              {{#each extension.screenshotUrls as |img|}}
                <div class="js-ext-screens-item">
                  <img src="{{img}}">
                </div>
              {{/each}}
            </div>
          </div>
        </div>
        <div class="pd-1 align-center">
          {{#each galleryIconIndicies as |index|}}
            <a {{action 'onScrollGallery' index}} class="{{if (eq index currentImageIndex) 'ext-screens__scroll-item--active' ''}} ext-screens__scroll-item">
            </a>
          {{/each}}
        </div>
      </div>
      <div class="col-xs-5">
        <div class="ext-details__description brick brick--theme-white">
          {{#if extension.description}}
            <h6 class="pd-0 mg-0">{{t 'general.common.details'}}</h6>
            <p class="pd-b-1">{{extension.description}}</p>
          {{/if}}
          {{#if showAdditionalInfo}}
            <div class="border-t mg-t-1 pd-t-1">
              <h6>{{i18n 'Additional Information'}}</h6>
              {{#if extension.supportEmail}}
                <p>{{i18n 'Support'}}: <a href="mailto:{{extension.supportEmail}}">{{extension.supportEmail}}</a></p>
              {{/if}}
              {{#if extension.authorName}}
                <p>
                  <span>{{i18n 'Associated Username'}}: </span>
                  {{#link-to 'profile.index' extension.authorName}}
                    {{extension.authorName}}
                  {{/link-to}}
                </p>
              {{/if}}
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>
</div>
{{settings/extension-dialogs
  installedExtension=installedExtension
  extensionToUninstall=extensionToUninstall
  onProceed=uninstallExtension
  onCancel=continueBrowsing
}}
