<div class="home" [formGroup]="boxForm" (ngSubmit)="applyChanges()">
  <div class="row">
    <div class="col">
      <label for="bgColorSelect">Background Color</label>
      <select id="bgColorSelect" class="custom-select" formControlName="backgroundColor">
        <option value="">Open this select menu</option>
        <option *ngFor="let option of colorOptions" [value]="option">
          {{option}}
        </option>
      </select>
    </div>
    <div class="col">
      <label for="textColorSelect">Text Color</label>
      <select id="textColorSelect" class="custom-select" formControlName="textColor">
        <option value="">Open this select menu</option>
        <option *ngFor="let option of colorOptions" [value]="option">
          {{option}}
        </option>
      </select>
    </div>
    <div class="col">
      <label for="borderRadiusSelect">Border Radius</label>
      <select id="borderRadiusSelect" class="custom-select" formControlName="borderRadius">
        <option value="">Open this select menu</option>
        <option *ngFor="let option of borderRadiusOptions" [value]="option">
          {{option}}
        </option>
      </select>
    </div>
    <div class="col">
      <label for="sizeSelect">Size</label>
      <select id="sizeSelect" class="custom-select" formControlName="size">
        <option value="">Open this select menu</option>
        <option *ngFor="let option of sizeOptions" [value]="option">
          {{option}}
        </option>
      </select>
    </div>
  </div>
  <div class="row submit-btn-container">
    <button class="btn btn-primary" type="submit" (click)="applyChanges()">Change Styles</button>
  </div>
  <div class="row" *ngIf="boxStyles">
    <div class="box" [ngStyle]="boxStyles">
      <div class="box__text">
        Hello World!
      </div>
    </div>
  </div>
</div>
