<div class="bg-level-1 separator-bottom">
  <div class="card-block p-t-24 p-b-24 large-padding">
    <div class="content-flex-70">
      <div class="text-center col-1">
        <i
          class="c8y-icon-duocolor icon-48"
          [c8yIcon]="groupIcon"
        ></i>
        <p>
          @if (group.c8y_IsDynamicGroup) {
            <small class="label label-info">
              {{ 'Smart group' | translate }}
            </small>
          }
          @if (!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent) {
            <small
              class="label label-info text-truncate d-inline-block"
              title="{{ label | translate }}"
            >
              {{ label | translate }}
            </small>
          }
          @if (group.com_cumulocity_model_Agent) {
            <small class="label label-info">
              {{ 'Remote group' | translate }}
            </small>
          }
        </p>
      </div>

      <div class="flex-grow col-10">
        <div class="content-flex-80">
          <div class="col-9">
            @if (canEdit) {
              <c8y-input-group-editable
                [title]="groupInfoModel.name"
                placeholder="{{ 'e.g. My group' | translate }}"
                required
                size="lg"
                data-cy="group-info--name"
                ariaLabel="{{ 'Name' | translate }}"
                [maxLength]="254"
                [ngModel]="groupInfoModel.name"
                (ngModelChange)="onNameSaved($event)"
              ></c8y-input-group-editable>
            } @else {
              <c8y-form-group class="form-group-lg m-b-0">
                <p class="form-control-static">
                  {{ groupInfoModel.name }}
                </p>
              </c8y-form-group>
            }
            @if (canEdit) {
              <c8y-input-group-editable
                [multiline]="true"
                maxHeight="110px"
                formGroupClass="m-b-0"
                data-cy="group-info--description"
                ariaLabel="{{ 'Description' | translate }}"
                [placeholder]="descriptionLabel"
                [ngModel]="groupInfoModel.c8y_Notes"
                (ngModelChange)="onDescriptionSaved($event)"
              ></c8y-input-group-editable>
            } @else {
              <p class="form-control-static">
                {{ groupInfoModel.c8y_Notes }}
              </p>
            }

            @if (isSmartGroup()) {
              <div
                class="dropdown m-t-8"
                placement="bottom left"
                container="body"
                type="button"
                dropdown
                #ddFilters="bs-dropdown"
                [insideClick]="true"
              >
                <button
                  class="btn btn-default btn-sm"
                  title="{{ 'Smart group filters' | translate }}"
                  aria-haspopup="true"
                  dropdownToggle
                  data-cy="c8y-data-grid--filters"
                  [disabled]="columnsWithFilter?.length === 0"
                >
                  <i
                    class="m-r-4"
                    c8yIcon="filter"
                  ></i>
                  <span>{{ 'Smart group filters' | translate }}</span>
                  @if (columnsWithFilter?.length > 0) {
                    <span class="p-relative p-l-4 p-r-16">
                      <span
                        class="badge badge-system p-absolute"
                        data-cy="group-info--filter-number"
                      >
                        {{ columnsWithFilter?.length }}
                      </span>
                    </span>
                  }
                </button>
                <button
                  class="btn-help btn-help--sm m-r-4"
                  [attr.aria-label]="'Help' | translate"
                  popover="{{ filterMsg | translate }}"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                  data-cy="group-info--help-button"
                ></button>
                <div
                  class="dropdown-menu"
                  *dropdownMenu
                  (click)="$event.stopPropagation()"
                >
                  <div class="data-grid__dropdown bg-level-0">
                    <ul class="list-unstyled m-0">
                      @for (column of columnsWithFilter; track column; let last = $last) {
                        <li [ngClass]="{ 'separator-bottom': !last }">
                          <div
                            class="dropdown-header sticky-top text-truncate no-border-top p-b-0"
                            title="{{ (column.header | translate) || column.name }}"
                          >
                            <label>
                              {{ (column.header | translate) || column.name }}
                            </label>
                          </div>
                          @for (
                            groupedFilterChips of column
                              | mapToFilterChips
                              | async
                              | groupedFilterChips;
                            track groupedFilterChips;
                            let first = $first
                          ) {
                            <div
                              class="list-group-item borderless d-flex d-col"
                              [ngClass]="{ 'p-t-0': first }"
                            >
                              @if (groupedFilterChips.label) {
                                <p class="small p-b-4">
                                  {{ groupedFilterChips.label | translate }}
                                </p>
                              }
                              <div class="d-flex a-i-center gap-4 flex-wrap">
                                @for (chip of groupedFilterChips.chips; track chip) {
                                  <span
                                    class="tag tag--info chip"
                                    data-cy="group-info--grouped-filter-chip"
                                  >
                                    {{ chip.displayValue | translate }}
                                  </span>
                                }
                              </div>
                            </div>
                          }
                        </li>
                      }
                    </ul>
                  </div>
                </div>
              </div>
            }
          </div>
          <div class="flex-grow">
            <ul class="list-unstyled small">
              <li class="p-t-4 p-b-4 d-flex separator-top-bottom text-nowrap">
                <label class="small m-b-0 m-r-8">{{ 'Created' | translate }}</label>
                <span class="m-l-auto">{{ group.creationTime | c8yDate }}</span>
              </li>
              <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                <label class="small m-b-0 m-r-8">{{ 'Last updated' | translate }}</label>
                <span class="m-l-auto">{{ group.lastUpdated | c8yDate }}</span>
              </li>
              @if (group.com_cumulocity_model_Agent) {
                <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
                  <label class="small m-b-0 m-r-8">{{ 'Status' | translate }}</label>
                  @if (group.c8y_BrokerSource) {
                    <span class="m-l-auto">
                      {{ group.c8y_BrokerSource.status | translate }}
                    </span>
                  }
                  @if (!group.c8y_BrokerSource) {
                    <span class="m-l-auto">
                      {{ 'Offline' | translate }}
                    </span>
                  }
                </li>
              }
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>