<div class="bg-gray-white separator-bottom">
  <div class="card-block p-t-24 p-b-24 large-padding">
    <div class="content-flex-70">
      <div class="text-center">
        <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"
            *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 class="sr-only" translate>
                  Name
                </label>

                <p *ngIf="!canEdit" class="form-control-static">{{ group.name }}</p>
                <div *ngIf="canEdit" class="input-group input-group-editable">
                  <input
                    type="text"
                    class="form-control"
                    [(ngModel)]="group.name"
                    name="name"
                    title="{{ 'Name' | translate }}"
                    size="{{ group.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: group.name }); groupNameForm.form.markAsPristine()"
                      class="btn btn-primary"
                      title="{{ 'Save' | translate }}"
                      [disabled]="groupNameForm.form.invalid"
                      c8yProductExperience
                      [actionName]="'groupInfo:EditedNameSaved'"
                    >
                      {{ 'Save' | translate }}
                    </button>
                  </div>
                </div>
              </c8y-form-group>
            </form>
            <form #groupDescriptionForm="ngForm">
              <label class="sr-only" translate>
                Description
              </label>
              <p *ngIf="!canEdit" class="form-control-static">{{ group.c8y_Notes }}</p>
              <div *ngIf="canEdit" class="input-group input-group-editable">
                <textarea
                  class="form-control"
                  [(ngModel)]="group.c8y_Notes"
                  name="description"
                  title="{{ 'Description' | translate }}"
                  cols="{{ group.c8y_Notes ? group.c8y_Notes.length : 25 }}"
                  placeholder="{{ 'e.g. My description' | translate }}"
                  c8yProductExperience
                  [actionName]="'groupInfo:EditDescription'"
                ></textarea>
                <span></span>
                <div class="input-group-btn">
                  <button
                    (click)="
                      update({ c8y_Notes: group.c8y_Notes });
                      groupDescriptionForm.form.markAsPristine()
                    "
                    class="btn btn-primary"
                    title="{{ 'Save' | translate }}"
                    [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-clean text-primary m-r-4"
                    type="button"
                    popover="{{ filterHintMsg | translate }}"
                    triggers="focus"
                  >
                    <i c8yIcon="question-circle-o"></i>
                  </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 }}"
                      [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 flex-row separator-top-bottom text-nowrap">
                <label class="small m-b-0 m-r-8">{{ 'Created' | translate }}</label>
                <span class="flex-item-right">{{ group.creationTime | c8yDate }}</span>
              </li>
              <li class="p-t-4 p-b-4 flex-row separator-bottom text-nowrap">
                <label class="small m-b-0 m-r-8">{{ 'Last updated' | translate }}</label>
                <span class="flex-item-right">{{ group.lastUpdated | c8yDate }}</span>
              </li>
              <li
                *ngIf="group.com_cumulocity_model_Agent"
                class="p-t-4 p-b-4 flex-row separator-bottom text-nowrap"
              >
                <label class="small m-b-0 m-r-8">{{ 'Status' | translate }}</label>
                <span class="flex-item-right" *ngIf="group.c8y_BrokerSource">
                  {{ group.c8y_BrokerSource.status }}
                </span>
                <span class="flex-item-right" *ngIf="!group.c8y_BrokerSource">
                  {{ 'Offline' | translate }}
                </span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>