<div class="label-wrapper">
  <span class="strong">{{i18n 'Delete Badge'}}</span>
</div>

<form class="cl-input-container">
  <p class="sub-text">
    {{i18n 'Remove your subscriber badge for the given subscription tenure requirement.'}}
  </p>

  <div style="margin: 20px 0;">
    <div style="display: inline-block; vertical-align: top; border-width: 2px; border-style: dashed; border-color: #bbb; height: 110px; width: 110px; text-align: center; margin-right: 10px;">
      <figure style="display: flex; justify-content: center; margin: auto; height: 85px;">
        <img src={{badge.image_1x_url}} alt={{i18n badge.title}} style="margin: auto;">
      </figure>

      <figcaption class="sub-text">{{i18n '18 x 18px'}}</figcaption>
    </div>

    <div style="display: inline-block; vertical-align: top; border-width: 2px; border-style: dashed; border-color: #bbb; height: 110px; width: 110px; text-align: center; margin-right: 10px;">
      <figure style="display: flex; justify-content: center; margin: auto; height: 85px;">
        <img src={{badge.image_2x_url}} alt={{i18n badge.title}} style="margin: auto;">
      </figure>

      <figcaption class="sub-text">{{i18n '36 x 36px'}}</figcaption>
    </div>

    <div style="display: inline-block; vertical-align: top; border-width: 2px; border-style: dashed; border-color: #bbb; height: 110px; width: 110px; text-align: center;">
      <figure style="display: flex; justify-content: center; margin: auto; height: 85px;">
        <img src={{badge.image_4x_url}} alt={{i18n badge.title}} style="margin: auto;">
      </figure>

      <figcaption class="sub-text">{{i18n '72 x 72px'}}</figcaption>
    </div>
  </div>

  <button type="submit"
    class="button {{if (or isConfirmationModalOpen isDeleting) 'button--disabled'}}"
    disabled={{or isConfirmationModalOpen isDeleting}}
    {{action 'openConfirmationModal'}}>

    {{#if isDeleting}}
      {{i18n 'Deleting Badge...'}}
    {{else}}
      {{i18n 'Delete Badge'}}
    {{/if}}
  </button>
</form>

{{#if isConfirmationModalOpen}}
  {{#ember-wormhole to='wormhole-overlays'}}
    {{! ember-wormhole@0.5.0 must have a stable root element in 2.10.0-beta's }}
    <div>
      {{#modal-dialog action=(action 'closeConfirmationModal')}}
        <div class="card">
          <div class="text-content">
            <div class="content-header">
              <h4>{{i18n 'Are you sure?'}}</h4>
            </div>

            <div class="item">
              <p>
                {{i18n 'Deleting your subscriber badge could negatively impact your subscribers.'}}
              </p>
            </div>

            <div class="buttons">
              <button type="button"
                      class="button button--text"
                      disabled={{isDeleting}}
                      {{action 'closeConfirmationModal'}}>

                {{t 'general.forms.cancel'}}
              </button>

              <button type="button"
                      class="button {{if isDeleting 'button--disabled'}}"
                      disabled={{isDeleting}}
                      {{action 'confirm'}}>

                {{#if isDeleting}}
                  {{i18n 'Deleting...'}}
                {{else}}
                  {{t 'general.forms.delete'}}
                {{/if}}
              </button>
            </div>
          </div>
        </div>
      {{/modal-dialog}}
    </div>
  {{/ember-wormhole}}
{{/if}}
