<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-16">
            <label
              class="sr-only"
              translate
              >Name</label
            >
            <c8y-input-group-editable
              size="lg"
              formGroupClass="m-b-0"
              [ariaLabel]="'Protocol name' | translate"
              [noSaveButton]="true"
              [(ngModel)]="_model.name"
              data-cy="name-input"
            ></c8y-input-group-editable>
          </div>
          <div class="form-group m-b-16">
            <label
              class="sr-only"
              translate
              >Description</label
            >
            <c8y-input-group-editable
              name="description"
              [multiline]="true"
              maxHeight="150px"
              formGroupClass="m-b-0"
              [ariaLabel]="'Protocol description' | translate"
              [placeholder]="'e.g. My protocol description' | translate"
              [noSaveButton]="true"
              [(ngModel)]="_model.description"
              data-cy="description-input"
            ></c8y-input-group-editable>
          </div>
          <div class="d-flex m-t-8">
            <div>
              <button
                class="btn"
                name="autoScanAddressSpace"
                type="button"
                [(ngModel)]="autoScan"
                (ngModelChange)="setAutoScanOption($event)"
                btnCheckbox
                btnCheckboxTrue="1"
                btnCheckboxFalse="0"
                ngDefaultControl
              >
                @if (autoScan === '1') {
                  <i
                    class="text-success"
                    c8yIcon="check"
                  ></i>
                  <span>{{ 'Active`auto scanning`' | translate }}</span>
                }
                @if (autoScan === '0') {
                  <i
                    class="text-danger"
                    c8yIcon="ban"
                  ></i>
                  <span>{{ '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>