<div [formGroup]="formGroup">
  <fieldset class="c8y-fieldset">
    <legend>{{ 'Image' | translate }}</legend>
    <c8y-form-group class="m-b-16">
      <c8y-drop-area
        class="drop-area-sm"
        [icon]="'upload'"
        formControlName="images"
        [accept]="'image'"
        [maxAllowedFiles]="1"
      ></c8y-drop-area>
      <c8y-messages>
        <c8y-message
          name="maxFileSizeReached"
          [text]="
            'The maximum image size is {{ maxFileSize }} kB. The selected image has a size of {{ actualFileSize }} kB.'
              | translate
          "
        ></c8y-message>
        <c8y-message
          name="wrongFileType"
          [text]="'Wrong file type, select an image.' | translate"
        ></c8y-message>
        <c8y-message
          name="maxlength"
          [text]="'Only select one image.' | translate"
        ></c8y-message>
        <c8y-message
          name="required"
          [text]="'An image is required.' | translate"
        ></c8y-message>
        <c8y-message
          name="minlength"
          [text]="'An image is required.' | translate"
        ></c8y-message>
      </c8y-messages>
    </c8y-form-group>
  </fieldset>

  @if (imageSrc$ | async; as src) {
    <div [formGroupName]="'styling'">
      <fieldset class="c8y-fieldset">
        <legend>
          {{ 'Image display' | translate }}
        </legend>
        <c8y-form-group class="form-group-sm m-b-0">
          <c8y-list-group
            class="no-border-last p-b-16"
            role="list"
          >
            @for (
              objectFitOption of objectFitOptions;
              track objectFitOption.value;
              let i = $index
            ) {
              <c8y-li role="listitem">
                <label class="c8y-radio">
                  <input
                    type="radio"
                    [id]="'groupradiocontentclass' + i"
                    formControlName="objectFit"
                    [value]="objectFitOption.value"
                  />
                  <span></span>
                  <span class="l-h-1">
                    {{ objectFitOption.label | translate }}
                    <br />
                    <small class="text-muted">
                      {{ objectFitOption.description | translate }}
                    </small>
                  </span>
                </label>
              </c8y-li>
            }
          </c8y-list-group>
        </c8y-form-group>
      </fieldset>
      <fieldset class="c8y-fieldset">
        <legend>
          {{ 'Image alignment' | translate }}
        </legend>
        <div class="row">
          <div class="col-md-6">
            <c8y-form-group class="form-group-sm">
              <label>{{ 'Horizontal`alignment`' | translate }}</label>
              <div class="c8y-select-wrapper">
                <select
                  class="form-control"
                  formControlName="objectPositionX"
                >
                  <option [ngValue]="'left'">
                    {{ 'left`horizontal alignment`' | translate }}
                  </option>
                  <option [ngValue]="'center'">
                    {{ 'center`horizontal alignment`' | translate }}
                  </option>
                  <option [ngValue]="'right'">
                    {{ 'right`horizontal alignment`' | translate }}
                  </option>
                </select>
              </div>
            </c8y-form-group>
          </div>
          <div class="col-md-6">
            <c8y-form-group class="form-group-sm">
              <label>{{ 'Vertical`alignment`' | translate }}</label>
              <div class="c8y-select-wrapper">
                <select
                  class="form-control"
                  formControlName="objectPositionY"
                >
                  <option [ngValue]="'top'">
                    {{ 'top`vertical alignment`' | translate }}
                  </option>
                  <option [ngValue]="'center'">
                    {{ 'center`vertical alignment`' | translate }}
                  </option>
                  <option [ngValue]="'bottom'">
                    {{ 'bottom`vertical alignment`' | translate }}
                  </option>
                </select>
              </div>
            </c8y-form-group>
          </div>
        </div>
      </fieldset>
      <ng-template #imagePreview>
        <img
          [ngStyle]="styling"
          alt="{{ 'Image preview' | translate }}"
          [src]="src"
          [ngClass]="styling ? 'fit-h fit-w' : 'img-responsive'"
        />
      </ng-template>
    </div>
  }
  @if (loading) {
    <div class="d-flex j-c-center">
      <c8y-loading></c8y-loading>
    </div>
  }
</div>