<popup-page>
  <popup-header slot="header" pageTitle="{{ 'premiumMembership' | i18n }}" showBackButton>
    <ng-container slot="end">
      <app-pop-out></app-pop-out>
    </ng-container>
  </popup-header>

  <div class="tw-flex tw-flex-col tw-p-2">
    <h2 class="tw-font-medium">{{ "premiumFeatures" | i18n }}</h2>
    <bit-section>
      <bit-card>
        <div class="tw-flex tw-flex-col tw-p-2">
          <ul class="tw-list-disc tw-pl-5 tw-space-y-2 tw-break-words tw-mb-0">
            <li>
              {{ "premiumSignUpStorageV2" | i18n: `${storageProvidedGb} GB` }}
            </li>
            <li>
              {{ "premiumSignUpTwoStepOptions" | i18n }}
            </li>
            <li>
              {{ "premiumSignUpEmergency" | i18n }}
            </li>
            <li>
              {{ "premiumSignUpReports" | i18n }}
            </li>
            <li>
              {{ "premiumSignUpTotp" | i18n }}
            </li>
            <li>
              {{ "premiumSignUpSupport" | i18n }}
            </li>
            <li>
              {{ "premiumSignUpFuture" | i18n }}
            </li>
          </ul>
        </div>
        <p class="tw-mt-5 tw-mb-0">{{ priceString }}</p>
      </bit-card>
    </bit-section>
    <button
      bitButton
      type="submit"
      buttonType="primary"
      (click)="purchase()"
      class="tw-mb-3"
      endIcon="bwi-external-link"
    >
      <b>{{ "premiumPurchase" | i18n }}</b>
    </button>
    <button type="button" (click)="refresh()" [loading]="refreshing" bitButton>
      {{ "premiumRefresh" | i18n }}
    </button>
  </div>
</popup-page>
