<div class="ext-manager tower tower--nowrap tower--xs-1-2">
  <div class="brick brick--pd-sm brick--theme-grey col-xs-4 mg-r-1" data-test-selector="ext-installed-list">
    <h4 class="mg-y-1">{{i18n 'Installed Extensions'}}</h4>
    {{#if installedExtensions}}
      {{#each installedExtensions as |ext|}}
        {{settings/extension-manager/installed-card
          installedExtension=ext
          availableSlots=availableSlots
          activateExtension=(action 'activateExtension')
          deactivateExtension=(action 'deactivateExtension')
          configureExtension=(action 'configureExtension')
          uninstallExtension=(action 'uninstallExtension')
        }}
      {{/each}}
    {{else}}
      {{!-- TODO: Get final copy for this state --}}
      <p class="mg-b-2">{{i18n 'No installed extensions.'}}</p>
    {{/if}}
  </div>
  <div class="brick brick--pd-sm brick--theme-grey col-xs-8 mg-0" data-test-selector="ext-available-list">
    <h4 class="mg-y-1">{{i18n 'Channel Extensions'}}</h4>
    {{#if availableExtensions}}
      {{#each availableExtensions as |ext|}}
        {{settings/extension-manager/available-card
          extension=ext
          installExtension=(action 'installExtension' ext)
        }}
      {{/each}}
    {{else}}
      {{!-- TODO: Get final copy for this state --}}
      <p class="mg-b-2">{{i18n 'No extensions are available to install.'}}</p>
    {{/if}}
  </div>
</div>
{{settings/extension-dialogs
  installedExtension=installedExtension
  extensionToUninstall=extensionToUninstall
  onProceed=uninstallExtension
}}
{{#common/modal-dialog onClose=(action 'closeExtensionReplaceDialog') defaultShowModal=extensionToReplace renderInPlace=false}}
  <div class="card pd-2">
    <h5 data-test-selector="ext-modal-header">{{i18n 'You are replacing an active panel'}}</h5>
    <hr>
    <p data-test-selector="ext-modal-message">{{i18n "Performing this action with cause the following panel to be deactivated"}}</p>
    <p class="mg-t-1 mg-b-2">
      {{extensionToReplaceBodyText}}
    </p>
    <p data-test-selector="ext-modal-message">{{i18n "Are you sure you want to proceed?"}}</p>
    <hr>
    <div class="align-center">
      {{#common/button-element onClick=(action 'closeExtensionReplaceDialog') isHollow=true testSelector='ext-modal-cancel'}}
        {{i18n 'Cancel'}}
      {{/common/button-element}}
      &nbsp;
      {{#common/button-element onClick=(action 'replaceExtension') testSelector='ext-modal-proceed'}}
        {{i18n 'Replace'}}
      {{/common/button-element}}
    </div>
  </div>
{{/common/modal-dialog}}
{{#common/modal-dialog onClose=(action 'closeExtensionActivationDialog') defaultShowModal=activatedExtension renderInPlace=false}}
  <div class="card pd-2">
    <h5 data-test-selector="ext-modal-header">{{i18n 'Extension is now Active!'}}</h5>
    <hr>
    <p data-test-selector="ext-modal-message">
      {{activatedExtensionBodyText}}
    </p>
    <hr>
    <div class="align-center">
      {{#common/button-element onClick=(action 'closeExtensionActivationDialog') testSelector='ext-modal-proceed'}}
        {{i18n 'Done'}}
      {{/common/button-element}}
    </div>
  </div>
{{/common/modal-dialog}}