<div class="card m-b-4">
  <div class="card-block">
    <div class="row">
      <div class="col-md-7">
        <div class="form-group">
          <label translate>Name</label>
          <label class="editable" [ngClass]="{ updated: ctrlName.dirty }">
            <input
              type="text"
              class="form-control"
              name="name"
              #ctrlName="ngModel"
              [(ngModel)]="_model.name"
            />
          </label>
        </div>
        <div class="form-group">
          <label translate>Description</label>
          <label class="editable" [ngClass]="{ updated: ctrlDescription.dirty }">
            <textarea
              class="form-control"
              rows="1"
              name="description"
              #ctrlDescription="ngModel"
              [(ngModel)]="_model.description"
            ></textarea>
            <span *ngIf="_model.description">
              {{ _model.description }}
            </span>
          </label>
        </div>
        <div class="flex-row">
          <div style="min-width: 120px;">
            <button
              type="button"
              class="btn m-t-4"
              name="autoScanAddressSpace"
              [(ngModel)]="autoScan"
              (ngModelChange)="setAutoScanOption($event)"
              btnCheckbox
              btnCheckboxTrue="1"
              btnCheckboxFalse="0"
              ngDefaultControl
            >
              <span *ngIf="autoScan === '1'">
                <i c8yIcon="check" class="text-success"></i>
                {{ 'Active`auto scanning option`' | translate }}
              </span>
              <span *ngIf="autoScan === '0'">
                <i c8yIcon="ban" class="text-danger"></i> 
                {{ 'Inactive`auto scanning option`' | 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="col-md-5">
        <dl class="dl-horizontal m-b-0">
          <dt><label translate>Device protocol type</label></dt>
          <dd>
            <span class="label label-info m-r-8 text-capitalize">
              {{ _model.fieldbusType }}
            </span>
          </dd>
          <dt><label class="small" translate>ID</label></dt>
          <dd style="font-size:1.5em">{{ _model.id }}</dd>
          <dt><label class="small" translate>Date created</label></dt>
          <dd>{{ _model.creationTime | c8yDate }}</dd>
          <dt><label class="small" translate>Last update</label></dt>
          <dd>{{ _model.lastUpdated | c8yDate }}</dd>
          <dt><label class="small" translate>Fieldbus version</label></dt>
          <dd>{{ _model.fieldbusVersion }}</dd>
        </dl>
      </div>
    </div>
  </div>
</div>