<ion-content>
  <div style="margin: 24px 24px 12px 24px; display: flex; flex-direction: column;">

    <ion-item style="padding-bottom: 8px;">
      <ion-label>
        <h1>{{ title }}</h1>
        <br />
        <p>{{ message }}</p>
      </ion-label>
    </ion-item>    

    <form (ngSubmit)="submit()">
      <div style="margin-left: 16px;">
        <p class="input-label">{{ label }}</p>
        <ion-item lines="none" color="dark">
          <ion-input [type]="useMask && !unmasked ? 'password' : 'text'" [(ngModel)]="value" name="value" [placeholder]="placeholder" (ionChange)="error = ''"></ion-input>
          <ion-button slot="end" *ngIf="useMask" fill="clear" color="light" (click)="toggleMask()">
            <ion-icon slot="icon-only" [name]="unmasked ? 'eye-off-outline' : 'eye-outline'" size="small"></ion-icon>
          </ion-button>
        </ion-item>
        <!-- error -->
        <p>
          <ion-text [color]="error ? 'danger' : 'medium'">{{ error || 'placeholder' }}</ion-text>
        </p>
      </div>
  
      <div class="ion-text-right">
        <ion-button fill="clear" (click)="cancel()">
          Cancel
        </ion-button>
        <ion-button fill="clear" type="submit" [disabled]="!value && !nullable">
          {{ buttonText }}
        </ion-button>
      </div>
    </form>
  </div>
</ion-content>
