<div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24">
  <div class="content-flex-70">
    <div class="text-center">
      <i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-device-protocols"></i>
      <p>
        <small class="label label-info">{{ _model.fieldbusType }}</small>
      </p>
    </div>
    <div class="flex-grow col-10">
      <div class="content-flex-80">
        <div class="col-9">
          <div class="form-group form-group-lg m-b-0">
            <label class="sr-only" translate>Name</label>
            <label class="editable" [ngClass]="{ updated: ctrlName.dirty }">
              <input
                type="text"
                class="form-control"
                name="name"
                #ctrlName="ngModel"
                [(ngModel)]="_model.name"
                style="max-width:calc( {{ _model.name.length || 10 }} * 1ch + 14px)"
              />
            </label>
          </div>
          <div class="form-group">
            <label class="sr-only" translate>Description</label>
            <label class="editable" [ngClass]="{ updated: ctrlDescription.dirty }">
              <textarea
                class="form-control"
                rows="1"
                name="description"
                placeholder="{{ 'e.g. My protocol description' | translate }}"
                #ctrlDescription="ngModel"
                [(ngModel)]="_model.description"
                style="max-width:calc( {{ _model.description?.length || 25 }} * 1ch + 14px)"
              ></textarea>
              <span *ngIf="_model.description">
                {{ _model.description }}
              </span>
            </label>
          </div>
          <div class="d-flex">
            <div>
              <button
                type="button"
                class="btn"
                name="autoScanAddressSpace"
                [(ngModel)]="autoScan"
                (ngModelChange)="setAutoScanOption($event)"
                btnCheckbox
                btnCheckboxTrue="1"
                btnCheckboxFalse="0"
                ngDefaultControl
              >
                <i *ngIf="autoScan === '1'" c8yIcon="check" class="text-success"></i>
                <span *ngIf="autoScan === '1'">
                  {{ 'Active`auto scanning`' | translate }}
                </span>

                <i *ngIf="autoScan === '0'" c8yIcon="ban" class="text-danger"></i>
                <span *ngIf="autoScan === '0'">
                  {{ 'Inactive`auto scanning`' | translate }}
                </span>
              </button>
            </div>
            <small class="m-l-16 text-muted">
              {{
                'When active, the gateway scans the address space of all servers and automatically applies this device protocol to all nodes matching the criteria.'
                  | translate
              }}
            </small>
          </div>
        </div>
        <div class="flex-grow">
          <ul class="list-unstyled small">
            <li class="p-t-4 p-b-4 d-flex separator-bottom text-nowrap">
              <label class="small m-b-0 m-r-8" translate>ID</label>
              <span class="m-l-auto">{{ _model.id }}</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" translate>Date created</label>
              <span class="m-l-auto">{{ _model.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" translate>Last update</label>
              <span class="m-l-auto">{{ _model.lastUpdated | 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" translate>Fieldbus version</label>
              <span class="m-l-auto">{{ _model.fieldbusVersion }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>