<ng-container [formGroup]="datesForm">
  <div class="box">
    <div class="box-content">
      <div class="box-content-row" appBoxRow *ngIf="!editMode">
        <label for="deletionDate">{{ "deletionDate" | i18n }}</label>
        <select
          id="deletionDate"
          name="DeletionDateSelect"
          aria-describedby="deletionDateHelp"
          formControlName="selectedDeletionDatePreset"
          required
        >
          <option *ngFor="let o of deletionDatePresets" [ngValue]="o.value">{{ o.name }}</option>
        </select>
        <small id="deletionDateHelp" class="help-block">{{ "deletionDateDesc" | i18n }}</small>
      </div>
      <div class="box-content-row" *ngIf="selectedDeletionDatePreset.value === 0 || editMode">
        <label *ngIf="editMode" for="deletionDateCustom">{{ "deletionDate" | i18n }}</label>
        <input
          id="deletionDateCustom"
          type="datetime-local"
          name="deletionDate"
          aria-describedby="deletionDateCustomHelp"
          formControlName="defaultDeletionDateTime"
          required
          placeholder="MM/DD/YYYY HH:MM AM/PM"
        />
        <small id="deletionDateCustomHelp" class="help-block" *ngIf="editMode">{{
          "deletionDateDesc" | i18n
        }}</small>
      </div>
      <div class="box-content-row" appBoxRow *ngIf="!editMode">
        <label for="expirationDate">{{ "expirationDate" | i18n }}</label>
        <select
          id="expirationDate"
          name="expirationDateSelect"
          aria-describedby="expirationDateHelp"
          formControlName="selectedExpirationDatePreset"
          required
        >
          <option *ngFor="let o of expirationDatePresets" [ngValue]="o.value">{{ o.name }}</option>
        </select>
        <small id="expirationDateHelp" class="help-block">{{ "expirationDateDesc" | i18n }}</small>
      </div>
      <div class="box-content-row" *ngIf="selectedExpirationDatePreset.value === 0 || editMode">
        <label *ngIf="editMode" for="expirationDateCustom">{{ "expirationDate" | i18n }}</label>
        <input
          id="expirationDateCustom"
          type="datetime-local"
          name="expirationDate"
          aria-describedby="expirationDateCustomHelp"
          formControlName="defaultExpirationDateTime"
          required
          placeholder="MM/DD/YYYY HH:MM AM/PM"
        />
        <small *ngIf="editMode" id="expirationDateCustomHelp" class="help-block">{{
          "expirationDateDesc" | i18n
        }}</small>
      </div>
    </div>
  </div>
</ng-container>
