<h2 mat-dialog-title>Edit {{ data.punishment.type }} #{{ data.punishment.id }}</h2>
<div mat-dialog-content>
  <div class="dialog-content">
    <mat-form-field appearance="fill">
      <mat-label>Reason</mat-label>
      <input matInput type="text" [(ngModel)]="reason" placeholder="Enter reason"/>
    </mat-form-field>

    <mat-checkbox [(ngModel)]="isPermanent"><span style="color: black">Permanent</span></mat-checkbox>

    @if (!isPermanent) {
      <div class="datetime-container">
        <mat-form-field appearance="fill" class="date-field">
          <mat-label>Expiry Date</mat-label>
          <input matInput [matDatepicker]="dateTimePicker" [(ngModel)]="expiryDate" [disabled]="isPermanent">
          <mat-hint>MM/DD/YYYY</mat-hint>
          <mat-datepicker-toggle matIconSuffix [for]="dateTimePicker"></mat-datepicker-toggle>
          <mat-datepicker #dateTimePicker></mat-datepicker>
        </mat-form-field>

        <mat-form-field appearance="fill" class="time-field">
          <mat-label>Expiry Time</mat-label>
          <input matInput type="time" [(ngModel)]="expiryTime" [disabled]="isPermanent">
          <mat-hint>HH:MM (24-hour)</mat-hint>
        </mat-form-field>
        <p>Time in timezone: {{ getTimezone() }}</p>
      </div>
    }

    @if (errorMessage()) {
      <div class="error">{{ errorMessage() }}</div>
    }
  </div>
</div>
<div mat-dialog-actions align="end">
  <button mat-button color="warn" (click)="onRemove()" [disabled]="isBusy()">Remove</button>
  <button mat-raised-button color="primary" (click)="onUpdate()" [disabled]="isBusy()">Update</button>
  <button mat-button (click)="onCancel()" [disabled]="isBusy()">Cancel</button>
</div>
