<form [formGroup]="form">
  <div nxLayout="grid nopadding">
    <div nxRow [rowJustify]="isExpertChannel ? 'start' : 'center'">
      <div [nxCol]="isExpertChannel ? '12,12,6' : '12,12,8'">
        <taly-headline i18n *aclTag="'headline'" data-testid="headline"
          >The Simple Building Block Headline</taly-headline
        >
        <div nxCopytext>
          It contains a complicated form and even has an asset:
          <img src="assets/Heart.svg" alt="Heart image" />
        </div>
        <div nxRow *aclTag="'person'" formGroupName="person" data-testid="person">
          <div nxCol="12,12,6">
            <nx-formfield
              *aclTag="'first-name'"
              i18n-label="@@pgr-simple.first-name"
              label="First Name"
              optionalLabel="Optional"
            >
              <input
                nxInput
                placeholder="Enter first name"
                i18n-placeholder="@@pgr-simple.first-name-placeholder"
                data-testid="person/first-name"
                formControlName="firstName"
              />
              <taly-validation-errors
                nxFormfieldError
                [errorMessages]="validationMap?.get('person.firstName')"
                [controlErrors]="form.get('person.firstName')?.errors"
              >
              </taly-validation-errors>
            </nx-formfield>
          </div>
          <div nxCol="12,12,6">
            <nx-formfield
              *aclTag="'last-name'"
              i18n-label="@@pgr-simple.last-name"
              label="Last Name"
              optionalLabel="Optional"
            >
              <input
                nxInput
                placeholder="Enter last name"
                i18n-placeholder="@@pgr-simple.last-name-placeholder"
                data-testid="person/last-name"
                formControlName="lastName"
              />
              <taly-validation-errors
                nxFormfieldError
                [errorMessages]="validationMap?.get('person.lastName')"
                [controlErrors]="form.get('person.lastName')?.errors"
              >
              </taly-validation-errors>
            </nx-formfield>
          </div>
        </div>
        <nx-formfield label="Enter Date" *aclTag="'date'" optionalLabel="Optional">
          <input nxDatefield nxInput formControlName="date" [datepicker]="dp" />
          <nx-datepicker-toggle [for]="dp" nxFormfieldSuffix></nx-datepicker-toggle>
          <nx-datepicker #dp></nx-datepicker>
          <taly-validation-errors
            nxFormfieldError
            [errorMessages]="validationMap?.get('date')"
            [controlErrors]="form.get('date')?.errors"
          >
          </taly-validation-errors>
        </nx-formfield>

        <nx-checkbox
          formControlName="boolean"
          *aclTag="'boolean'"
          data-testid="boolean"
          optionalLabel="Optional"
        >
          Should this be checked?
        </nx-checkbox>
        <taly-validation-errors
          nxFormfieldError
          [errorMessages]="validationMap?.get('boolean')"
          [controlErrors]="form.get('boolean')?.errors"
        >
        </taly-validation-errors>

        <taly-headline i18n *aclTag="'form-array-headline'">Form Array</taly-headline>

        <ng-container formArrayName="items" *aclTag="'items'">
          <ng-container *ngFor="let arrayControl of arrayItems.controls; let i = index">
            <div [formGroupName]="i" *aclTag="i + ''">
              <nx-formfield label="FormArray Item ID" *aclTag="'id'" optionalLabel="Optional">
                <input nxInput formControlName="id" />
                <taly-validation-errors
                  nxFormfieldError
                  [errorMessages]="validationMap?.get('items.*.id')"
                  [controlErrors]="arrayControl.get('id')?.errors"
                >
                </taly-validation-errors>
              </nx-formfield>
            </div>
          </ng-container>
        </ng-container>
        <button
          *aclTag="'add-array-item-button'"
          nxButton="secondary small"
          type="button"
          class="nx-margin-bottom-m"
          (click)="addArrayItem()"
        >
          Add array item
        </button>

        <nx-formfield
          label="Minimum value of the field below"
          *aclTag="'min-value'"
          data-testid="minValue"
          optionalLabel="Optional"
        >
          <input nxInput formControlName="minValue" />
        </nx-formfield>

        <nx-formfield
          *aclTag="'valid-number'"
          label="Enter a value greater than or equal to the field above. 👆"
          optionalLabel="Optional"
        >
          <input nxInput formControlName="validNumber" />
          <taly-validation-errors
            nxFormfieldError
            [errorMessages]="validationMap?.get('validNumber')"
            [controlErrors]="form.get('validNumber')?.errors"
          >
          </taly-validation-errors>
        </nx-formfield>

        <ng-container *aclTag="'done-button'">
          <button
            nxButton="secondary small"
            class="nx-margin-bottom-0"
            *ngIf="!form.value.done"
            (click)="doneBlock()"
          >
            Mark as "complete"
          </button>
          <ng-container *ngIf="form.value.done">
            <button nxButton="secondary small" class="nx-margin-bottom-0" (click)="resetBlock()">
              Reset "complete" state
            </button>
            ✅
          </ng-container>
        </ng-container>

        <ng-container *talyFrameSmallPrint><div>A non-index Footprint</div></ng-container>
        <ng-container *talyFrameSmallPrint="2"><div>2nd index Footprint</div></ng-container>
        <ng-container *talyFrameSmallPrint><div>B non-index Footprint</div></ng-container>
        <ng-container *ngIf="form.value.done"
          ><ng-container *talyFrameSmallPrint="1"
            ><div>1st index Footprint</div></ng-container
          ></ng-container
        >
      </div>
    </div>
  </div>
</form>