<pa-modal-dialog>
  <pa-modal-title>
    <h2>{{ 'billing.unsubscribe-title' | translate }}</h2>
  </pa-modal-title>
  <pa-modal-content>
    <div>{{ 'billing.unsubscribe-help' | translate }}</div>
    <div>
      <div class="title-s">
        {{ 'billing.subscription-end' | translate }}:
        <pa-datetime
          [datetime]="data?.endBillingPeriod || ''"
          format="human"
        dateOnly></pa-datetime>
      </div>
    </div>
    @if (!!data && data.overCost > 0) {
      <div>
        <div class="title-s">
          {{ 'billing.current-over-cost' | translate }}:
          <span class="price">{{ data.overCost | currency: data.currency }}</span>
        </div>
        <div>{{ 'billing.current-over-cost-help' | translate }}</div>
      </div>
    }
    <div>
      <pa-button
        kind="destructive"
        (click)="confirm()">
        {{ 'billing.end-subscription' | translate }}
      </pa-button>
    </div>
  </pa-modal-content>
</pa-modal-dialog>
