<div class="settings">

  <!-- BUTTONS -->
  <div class="settings__buttons">
    <button class="settings__button--primary" mat-button matTooltip="Save settings" (click)="onSave()">
      Save
      <mat-icon class="md-20">save</mat-icon>
    </button>

    <button class="settings__button--secondary" mat-stroked-button matTooltip="Revert changes" (click)="onReset()">
      Undo changes
      <mat-icon class="settings__icon md-20">restore</mat-icon>
    </button>
  </div>

  <div class="settings__content">
    <div *ngFor="let group of settings.schema">
      <h4 class="settings__domain-name"> {{group.displayName}} </h4>
      <div *ngFor="let member of group.members">

        <!-- STRING -->
        <div *ngIf="member.type == settingTypes.Text" class="settings__grid">
          <div class="settings__text"> {{member.displayName}} </div>
          <mat-form-field appearance="outline" class="settings__grid--two-columns">
            <mat-label class="{{member.key}}">{{member.displayName}}</mat-label>
            <input [(ngModel)]="settings[member.key]" matInput maxlength="{{member.max}}"
                   minlength="{{member.min}}"
                   placeholder="{{member.displayName}}"
                   type="text">
          </mat-form-field>
        </div>

        <!-- INTERVAL -->
        <div *ngIf="member.type == settingTypes.Interval" class="settings__grid">
          <div class="settings__text">{{member.displayName}}</div>

          <mat-form-field appearance="outline">
            <mat-label class="{{member.key}}">Lower boundary</mat-label>
            <input [(ngModel)]="settings[member.key][0]" matInput max="{{member.max}}"
                   min="{{member.min}}"
                   placeholder="Lower boundary" type="number">
          </mat-form-field>

          <mat-form-field appearance="outline">
            <mat-label class="{{member}}">Upper boundary</mat-label>
            <input [(ngModel)]="settings[member.key][1]" matInput max="{{member.max}}"
                   min="{{member.min}}"
                   placeholder="Upper boundary" type="number">
          </mat-form-field>
        </div>


        <!-- COLOR -->
        <div *ngIf="member.type == settingTypes.Color"
             class="settings__grid settings__color">
          <div class="settings__text">{{member.displayName}}</div>
          <input (change)="onColorChange(member.key)" class="settings__colors--input"
                 id="{{member.key}}" matInput
                 type="color" value="{{settings[member.key]}}">
        </div>

        <!-- JSON -->
        <div *ngIf="member.type == settingTypes.Json" class="settings__grid">
          <div class="settings__text">{{member.displayName}}</div>
          <mat-form-field appearance="outline" class="settings__grid--two-columns">
            <mat-label class="{{member.key}}">
              {{member.displayName}}
            </mat-label>
            <textarea [(ngModel)]="settings[member.key]" cdkAutosizeMaxRows="10"
                      cdkAutosizeMinRows="1"
                      cdkTextareaAutosize
                      matInput
                      placeholder="{{member.displayName}}"></textarea>
          </mat-form-field>
        </div>
      </div>
      <div class="settings__spacer"></div>
    </div>
  </div>
</div>
