<div class="align-items-center container d-flex h-100 justify-content-center">
  <div class="row w-100">
    <div class="col">
      <div class="align-items-center d-flex flex-column">
        <gf-membership-card
          [expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
          [name]="user?.subscription?.type"
        />
        <div
          *ngIf="user?.subscription?.type === 'Basic'"
          class="d-flex flex-column mt-5"
        >
          <ng-container
            *ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
          >
            <button color="primary" mat-flat-button (click)="onCheckout()">
              <ng-container *ngIf="user.subscription.offer === 'default'" i18n
                >Upgrade Plan</ng-container
              >
              <ng-container *ngIf="user.subscription.offer === 'renewal'" i18n
                >Renew Plan</ng-container
              >
            </button>
            <div *ngIf="price" class="mt-1 text-center">
              <ng-container *ngIf="coupon"
                ><del class="text-muted"
                  >{{ baseCurrency }}&nbsp;{{ price }}</del
                >&nbsp;{{ baseCurrency }}&nbsp;{{ price - coupon
                }}</ng-container
              >
              <ng-container *ngIf="!coupon"
                >{{ baseCurrency }}&nbsp;{{ price }}</ng-container
              >&nbsp;<span i18n>per year</span>
            </div>
          </ng-container>
          <div class="align-items-center d-flex justify-content-center mt-4">
            <a
              *ngIf="!user?.subscription?.expiresAt"
              class="mx-1"
              mat-stroked-button
              [href]="trySubscriptionMail"
              ><span i18n>Try Premium</span>
              <gf-premium-indicator
                class="d-inline-block ml-1"
                [enableLink]="false"
              />
            </a>
            <a
              *ngIf="hasPermissionToUpdateUserSettings"
              class="mx-1"
              i18n
              mat-stroked-button
              [routerLink]=""
              (click)="onRedeemCoupon()"
              >Redeem Coupon</a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
