<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>
          <small class="label label-info" *ngIf="group.c8y_IsDynamicGroup">
            {{ 'Smart group' | translate }}
          </small>
          <small
            class="label label-info text-truncate d-inline-block"
            title="{{ label | translate }}"
            *ngIf="!group.c8y_IsDynamicGroup && !group.com_cumulocity_model_Agent"
          >
            {{ label | translate }}
          </small>
          <small class="label label-info" *ngIf="group.com_cumulocity_model_Agent">
            {{ 'Remote group' | translate }}
          </small>
        </p>
      </div>

      <div class="flex-grow col-10">
        <div class="content-flex-80">
          <div class="col-9">
            <form #groupNameForm="ngForm">
              <c8y-form-group class="form-group-lg m-b-0">
                <label for="groupName" class="sr-only" translate>Name</label>
                <p *ngIf="!canEdit" class="form-control-static">{{ groupInfoModel.name }}</p>
                <div *ngIf="canEdit" class="input-group input-group-lg input-group-editable">
                  <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="groupInfoModel.name"
                    name="name"
                    title="{{ groupInfoModel.name }}"
                    id="groupName"
                    size="{{ groupInfoModel.name.length + 2 }}"
                    placeholder="{{ 'e.g. My group' | translate }}"
                    maxlength="254"
                    required
                    c8yProductExperience
                    [actionName]="'groupInfo:EditName'"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      (click)="
                        update({ name: groupInfoModel.name }); groupNameForm.form.markAsPristine()
                      "
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      type="submit"
                      [disabled]="groupNameForm.form.invalid"
                      c8yProductExperience
                      [actionName]="'groupInfo:EditedNameSaved'"
                    >
                      {{ 'Save' | translate }}
                    </button>
                  </div>
                </div>
              </c8y-form-group>
            </form>
            <form #groupDescriptionForm="ngForm">
              <label for="description" class="sr-only" translate>Description</label>
              <p *ngIf="!canEdit" class="form-control-static">{{ groupInfoModel.c8y_Notes }}</p>
              <div *ngIf="canEdit" class="input-group input-group-editable">
                <textarea
                  class="form-control no-resize"
                  c8y-textarea-autoresize
                  [(ngModel)]="groupInfoModel.c8y_Notes"
                  id="description"
                  name="description"
                  title="{{
                    groupInfoModel.c8y_Notes
                      ? groupInfoModel.c8y_Notes
                      : ('e.g. My description' | translate)
                  }}"
                  cols="{{ groupInfoModel.c8y_Notes ? groupInfoModel.c8y_Notes.length : 25 }}"
                  placeholder="{{ 'e.g. My description' | translate }}"
                  c8yProductExperience
                  [actionName]="'groupInfo:EditDescription'"
                  style="max-height: 70px !important"
                ></textarea>
                <span></span>
                <div class="input-group-btn">
                  <button
                    (click)="
                      update({ c8y_Notes: groupInfoModel.c8y_Notes });
                      groupDescriptionForm.form.markAsPristine()
                    "
                    class="btn btn-primary"
                    title="{{ 'Save' | translate }}"
                    type="submit"
                    [disabled]="groupDescriptionForm.form.invalid"
                    c8yProductExperience
                    [actionName]="'groupInfo:EditedDescriptionSaved'"
                  >
                    {{ 'Save' | translate }}
                  </button>
                </div>
              </div>
            </form>

            <form #smartGroupFilterForm="ngForm" *ngIf="isSmartGroup()">
              <c8y-form-group class="m-b-0 m-t-8">
                <label class="m-b-0 text-nowrap">
                  {{ 'Smart group filter' | translate }}
                  <button
                    class="btn-help btn-help--sm m-r-4"
                    [attr.aria-label]="'Help' | translate"
                    type="button"
                    popover="{{ filterHintMsg | translate }}"
                    triggers="focus"
                  ></button>
                </label>

                <p *ngIf="!canEdit" class="form-control-static">
                  {{ smartGroupFilter }}
                </p>
                <div *ngIf="canEdit" class="input-group input-group-editable">
                  <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="smartGroupFilter"
                    name="filter"
                    size="{{ (smartGroupFilter || '').length + 2 }}"
                    placeholder="{{ 'e.g.' | translate }} $filter=(id eq '12*')"
                    maxlength="254"
                    title="{{ 'Smart group filter' | translate }}"
                  />
                  <span></span>
                  <div class="input-group-btn">
                    <button
                      (click)="
                        update({ c8y_DeviceQueryString: smartGroupFilter });
                        smartGroupFilterForm.form.markAsPristine()
                      "
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      type="submit"
                      [disabled]="smartGroupFilterForm.form.invalid"
                    >
                      {{ 'Save' | translate }}
                    </button>
                  </div>
                </div>
              </c8y-form-group>
            </form>
          </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>
              <li
                *ngIf="group.com_cumulocity_model_Agent"
                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>
                <span class="m-l-auto" *ngIf="group.c8y_BrokerSource">
                  {{ group.c8y_BrokerSource.status }}
                </span>
                <span class="m-l-auto" *ngIf="!group.c8y_BrokerSource">
                  {{ 'Offline' | translate }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>