<div [formGroup]="appearanceSettingsForm">
  <div class="row">
    <div class="col-md-8">
      <div data-cy="c8y-dashboard-layout-picker">
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend>{{ 'Layout' | translate }}</legend>
          <div class="d-col gap-8">
            <label
              class="c8y-radio a-i-start"
              title="{{ 'Grid' | translate }}"
              data-cy="c8y-dashboard-layout-picker--layout-option"
            >
              <input
                type="radio"
                value="grid"
                formControlName="layout"
              />
              <span></span>
              <span class="d-flex a-i-start gap-4">
                <i
                  [c8yIcon]="'th'"
                  aria-hidden="true"
                ></i>
                <span class="d-col">
                  <span>{{ 'Grid' | translate }}</span>
                  <small class="text-muted">
                    {{
                      'Widgets snap to a fixed grid. Resize and reposition them freely.' | translate
                    }}
                  </small>
                </span>
              </span>
            </label>
            <label
              class="c8y-radio a-i-start m-b-8"
              title="{{ 'Responsive' | translate }}"
              data-cy="c8y-dashboard-layout-picker--layout-option"
            >
              <input
                type="radio"
                value="custom"
                formControlName="layout"
              />
              <span></span>
              <span class="d-flex a-i-start gap-4">
                <i
                  [c8yIcon]="'cogs'"
                  aria-hidden="true"
                ></i>
                <span class="d-col">
                  <span>{{ 'Responsive' | translate }}</span>
                  <small class="text-muted">
                    {{
                      'Control the number of columns and rows. Optionally scale row height to fit the viewport.'
                        | translate
                    }}
                  </small>
                </span>
              </span>
            </label>
          </div>
          <div
            class="collapse"
            [isAnimated]="true"
            [collapse]="appearanceSettingsForm.value.layout !== 'custom'"
          >
            <div class="p-l-40 d-flex-md row p-t-16">
              <div class="col-md-6">
                <div class="input-group">
                  <div class="input-group-addon">
                    <label
                      class="m-0"
                      for="customColumns"
                    >
                      {{ 'Columns' | translate }}
                      <button
                        class="btn-help btn-help--sm"
                        [attr.aria-label]="'Help' | translate"
                        popover="{{
                          'Controls how many columns the grid is divided into. More columns allow finer control over widget width and placement.'
                            | translate
                        }}"
                        placement="right"
                        triggers="focus"
                        container="body"
                        type="button"
                      ></button>
                    </label>
                  </div>
                  <c8y-form-group>
                    <input
                      class="form-control"
                      id="customColumns"
                      type="number"
                      min="1"
                      max="48"
                      formControlName="columns"
                    />
                  </c8y-form-group>
                </div>
              </div>
              <div class="col-md-6">
                <label
                  class="c8y-switch"
                  title="{{ 'Free positioning' | translate }}"
                >
                  <input
                    type="checkbox"
                    formControlName="float"
                  />
                  <span></span>
                  <span
                    >{{ 'Free positioning' | translate }}

                    <button
                      class="btn-help btn-help--sm"
                      [attr.aria-label]="'Help' | translate"
                      popover="{{
                        'Widgets stay where placed. Empty space is not filled automatically.'
                          | translate
                      }}"
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    ></button>
                  </span>
                </label>
              </div>
            </div>
            <div class="p-l-40 d-flex-md row p-t-24">
              <div class="col-md-6">
                <label
                  class="c8y-switch"
                  title="{{ 'Fit rows to viewport' | translate }}"
                >
                  <input
                    type="checkbox"
                    formControlName="alignViewHeight"
                  />
                  <span></span>
                  <span
                    >{{ 'Fit rows to viewport' | translate }}
                    <button
                      class="btn-help btn-help--sm"
                      [attr.aria-label]="'Help' | translate"
                      popover="{{
                        'Row height scales so all rows fill the screen. Enables percentage-based widget heights.'
                          | translate
                      }}"
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    ></button
                  ></span>
                </label>
              </div>
              <div class="col-md-6">
                @if (appearanceSettingsForm.value.alignViewHeight) {
                  <div class="input-group">
                    <div class="input-group-addon">
                      <label
                        class="m-0"
                        for="customRows"
                      >
                        {{ 'Rows' | translate }}
                        <button
                          class="btn-help btn-help--sm"
                          [attr.aria-label]="'Help' | translate"
                          popover="{{
                            'Defines how many rows divide the viewport height. More rows allow finer control over widget height. Also enables the height preset menu on each widget.'
                              | translate
                          }}"
                          placement="right"
                          triggers="focus"
                          container="body"
                          type="button"
                        ></button>
                      </label>
                    </div>
                    <c8y-form-group>
                      <input
                        class="form-control"
                        id="customRows"
                        type="number"
                        min="1"
                        max="48"
                        formControlName="rows"
                      />
                    </c8y-form-group>
                  </div>
                }
              </div>
            </div>
          </div>

          <c8y-form-group class="p-t-16 separator-top m-t-24">
            <label for="widgetGap">{{ 'Widget gap' | translate }}</label>
            <div class="input-group col-xs-3 p-l-0">
              <input
                class="form-control"
                id="widgetGap"
                placeholder="{{ DEFAULT_DASHBOARD_MARGIN }}"
                name="widgetGap"
                type="number"
                min="0"
                max="50"
                formControlName="widgetMargin"
              />
              <span class="input-group-addon">px</span>
            </div>
          </c8y-form-group>
        </fieldset>
        <fieldset class="c8y-fieldset c8y-fieldset--lg">
          <legend>
            <span>{{ 'Translations' | translate }}</span>
            <button
              class="btn-help btn-help--sm"
              [attr.aria-label]="'Help' | translate"
              popover="{{
                'Translates dashboard or widget titles if they are written in English and their translations are available in the loaded standard or custom translation resources.'
                  | translate
              }}"
              placement="right"
              triggers="focus"
              container="body"
              type="button"
            ></button>
          </legend>
          <c8y-form-group class="d-flex-md gap-16">
            <label
              class="c8y-checkbox"
              title="{{ 'Translate dashboard title if possible' | translate }}"
            >
              <input
                name="translateDashboardTitle"
                type="checkbox"
                formControlName="translateDashboardTitle"
              />
              <span></span>
              <span>{{ 'Dashboard title' | translate }}</span>
            </label>
            <label
              class="c8y-checkbox m-t-0"
              title="{{ 'Translate widget titles if possible' | translate }}"
            >
              <input
                name="translateWidgetTitle"
                type="checkbox"
                formControlName="translateWidgetTitle"
              />
              <span></span>
              <span>{{ 'Widget titles' | translate }}</span>
            </label>
          </c8y-form-group>
        </fieldset>
      </div>
    </div>

    <div class="col-md-4">
      <c8y-appearance-settings
        [themeClass]="styling.themeClass"
        [headerClass]="styling.headerClass"
        (themeClassChange)="changeThemeClass($event)"
        (headerClassChange)="changeHeaderClass($event)"
        [dashboardSettings]="true"
        [columns]="1"
      >
      </c8y-appearance-settings>
    </div>
  </div>
</div>