<ion-header>
  <ion-toolbar>
    <ion-title class="responsive-text">{{ 'PAYMENT_PERIOD_TITLE' | translate }}</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="cancel(false)" strong color="light">{{ 'all.close' | translate }}</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <form #formPeriod="ngForm" (ngSubmit)="createPaymentSchedule()">
    <ion-list>
      <ion-item class="inputBorderRadius ion-margin-bottom" lines="none" *ngIf="periods.length">
        <ion-label position="stacked" style="margin-bottom: 10px;">
          {{ 'PAYMENT_PERIOD' | translate }}</ion-label>
        <ion-select interface="popover" placeholder="{{ 'TEXT_OK_SELECT' | translate }}"
          class="ion-text-center placeholder-select" name="period" okText="{{ 'TEXT_OK_SELECT' | translate }}"
          cancelText="{{ 'TEXT_CANCEL_SELECT' | translate }}" required [(ngModel)]="period">
          <ion-select-option *ngFor="let item of periods" [value]="item.id">
            <p *ngIf="item.discount">
              {{ item.name + ' (' + item.discount + '% de Descuento)'}}
            </p>
            <p *ngIf="!item.discount">
              {{ item.name }}
            </p>
          </ion-select-option>
        </ion-select>
      </ion-item>
    </ion-list>

    <ion-button type="submit" color="primary" shape="round" expand="block" fill="solid" class="ion-margin"
      *ngIf="period && (month || !showMonthSelect)">
      {{ 'TUTORIAL_CONTINUE_BUTTON' | translate }}
    </ion-button>
  </form>

</ion-content>