<c8y-title>{{ profileName }}</c8y-title>
<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-profile'"
    [label]="'Device profiles' | translate"
    [path]="'device-profiles'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div *ngIf="deviceProfile">
  <div class="card m-b-4" *ngIf="deviceProfile">
    <div class="card-header separator">
      <h4 translate>Name and device type</h4>
    </div>
    <div class="card-block">
      <div class="row">
        <div class="col-md-4">
          <form #editNameForm="ngForm">
            <c8y-form-group>
              <label class="control-label" translate>
                Name
              </label>
              <div class="input-group input-group-editable">
                <input
                  type="text"
                  class="form-control"
                  [(ngModel)]="deviceProfile.name"
                  name="name"
                  placeholder="{{ 'e.g. My device profile' | translate }}"
                  size="{{ deviceProfile.name?.length || 1 }}"
                  required
                />
                <span></span>
                <div class="input-group-btn">
                  <button
                    (click)="updateDeviceProfile({ name: deviceProfile.name }); editNameForm.form.markAsPristine()"
                    class="btn btn-primary"
                    title="{{ 'Save' | translate }}"
                    [disabled]="editNameForm.form.invalid"
                  >
                    {{ 'Save' | translate }}
                  </button>
                </div>
              </div>
            </c8y-form-group>
          </form>
        </div>
        <div class="col-md-4">
          <form #editTypeForm="ngForm">
            <c8y-form-group>
              <label class="control-label">
                {{ 'Device type' | translate }}
                <button
                  class="btn btn-clean text-primary"
                  popover="{{ DEVICE_TYPE_POPOVER | translate }}"
                  triggers="focus"
                  container="body"
                  placement="right"
                >
                  <i [c8yIcon]="'question-circle-o'"></i>
                </button>
              </label>
              <div class="input-group input-group-editable">
                <input
                  type="text"
                  class="form-control"
                  [(ngModel)]="deviceProfile.c8y_Filter.type"
                  name="type"
                  placeholder="{{ 'e.g.' | translate }} c8y_Linux"
                  size="{{ deviceProfile.c8y_Filter.type?.length || 1 }}"
                  [disabled]="isDeviceProfileEmpty"
                />
                <span></span>
                <div class="input-group-btn">
                  <button
                    (click)=" updateDeviceProfile({ c8y_Filter: { type: deviceProfile.c8y_Filter.type } }); editTypeForm.form.markAsPristine()"
                    class="btn btn-primary"
                    title="{{ 'Save' | translate }}"
                    [disabled]="isDeviceProfileEmpty"
                  >
                    {{ 'Save' | translate }}
                  </button>
                </div>
              </div>
            </c8y-form-group>
          </form>
        </div>
      </div>
    </div>
  </div>

  <div class="card m-b-4">
    <div class="card-header separator">
      <div class="card-icon">
        <i [c8yIcon]="'c8y-firmware'" class="c8y-icon-duocolor"></i>
      </div>
      <h4 class="card-title" translate>
        Firmware
      </h4>
    </div>
    <div class="card-block p-t-0">
      <c8y-list-group *ngIf="deviceProfile.c8y_DeviceProfile.firmware">
        <c8y-li>
          <c8y-li-icon>
            <i [c8yIcon]="'c8y-firmware'"></i>
          </c8y-li-icon>
          <c8y-li-body class="content-flex-50 m-l-4">
            <div class="col-6">
              <span
                class="text-truncate"
                title="{{ deviceProfile.c8y_DeviceProfile.firmware.name }}"
              >
                {{ deviceProfile.c8y_DeviceProfile.firmware.name }}
              </span>
            </div>
            <div class="col-5 flex-row">
              <span
                class="text-truncate"
                title="{{ deviceProfile.c8y_DeviceProfile.firmware.version }}"
              >
                <span class="text-label-small m-r-4" translate>Version</span>
                {{ deviceProfile.c8y_DeviceProfile.firmware.version }}
              </span>
              <button
                class="btn btn-danger btn-xs visible-xs flex-item-right m-r-8 m-t-8"
                title="{{ 'Remove`firmware`' | translate }}"
                (click)="removeFirmware()"
              >
                <i c8yIcon="minus-circle"></i> {{ 'Remove`firmware`' | translate }}
              </button>
            </div>
            <div class="flex-item-right p-r-8 hidden-xs">
              <button
                class="btn btn-dot showOnHover"
                title="{{ 'Remove`firmware`' | translate }}"
                (click)="removeFirmware()"
              >
                <i class="text-danger" c8yIcon="minus-circle"></i>
              </button>
            </div>
          </c8y-li-body>
        </c8y-li>
      </c8y-list-group>
      <div class="p-t-8" *ngIf="!deviceProfile.c8y_DeviceProfile.firmware">
        <button
          title="{{ 'Add firmware' | translate }}"
          class="btn-add-block"
          (click)="addFirmware()"
        >
          <i c8yIcon="plus-circle"></i> {{ 'No firmware defined. Add firmware' | translate }}
        </button>
      </div>
    </div>
  </div>

  <div class="card m-b-4">
    <div class="card-header separator">
      <div class="card-icon">
        <i [c8yIcon]="'c8y-tools'" class="c8y-icon-duocolor"></i>
      </div>
      <h4 class="card-title" translate>
        Software
      </h4>
    </div>
    <div class="card-block p-t-0">
      <c8y-list-group>
        <c8y-li *ngFor="let software of deviceProfile.c8y_DeviceProfile.software">
          <c8y-li-icon>
            <i [c8yIcon]="'c8y-tools'"></i>
          </c8y-li-icon>
          <c8y-li-body class="content-flex-50 m-l-4">
            <div class="col-6">
              <span class="text-truncate-wrap" title="{{ software.name }}">
                {{ software.name }}
              </span>
            </div>
            <div class="col-5 flex-row">
              <span class="text-truncate-wrap" title="{{ software.version }}">
                <span class="text-label-small m-r-8" translate>Version</span>
                {{ software.version }}
              </span>
              <button
                class="btn btn-danger btn-xs visible-xs flex-item-right m-r-8 m-t-8"
                title="{{ 'Remove`software`' | translate }}"
                ((click)="removeItem(software, 'software')"
              >
                <i c8yIcon="minus-circle"></i>
                {{ 'Remove`software`' | translate }}
              </button>
            </div>
            <div class="flex-item-right p-r-8 hidden-xs ">
              <button
                class="btn btn-dot showOnHover text-danger"
                title="{{ 'Remove`software`' | translate }}"
                (click)="removeItem(software, 'software')"
              >
                <i c8yIcon="minus-circle"></i>
              </button>
            </div>
          </c8y-li-body>
        </c8y-li>
      </c8y-list-group>
      <div class="p-t-8">
        <button
          title="{{ 'Add software' | translate }}"
          class="btn-add-block m-b-0"
          (click)="addSoftware()"
        >
          <i c8yIcon="plus-circle"></i>
          <span class="m-r-8" *ngIf="deviceProfile.c8y_DeviceProfile.software?.length === 0">
            {{ 'No software defined.' | translate }}
          </span>
          {{ 'Add software' | translate }}
        </button>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header separator">
      <div class="card-icon">
        <i [c8yIcon]="'gears'" class="c8y-icon-duocolor"></i>
      </div>
      <h4 class="card-title" translate>
        Configuration
      </h4>
    </div>
    <div class="card-block p-t-0">
      <c8y-list-group class="m-b-8">
        <c8y-li *ngFor="let configuration of deviceProfile.c8y_DeviceProfile.configuration">
          <c8y-li-icon>
            <i [c8yIcon]="'gears'"></i>
          </c8y-li-icon>
          <c8y-li-body class="content-flex-50">
            <div class="col-6">
              <span
                class="text-truncate"
                title="{{ configuration.name }}"
               >
                {{ configuration.name }}
              </span>
            </div>
            <div class="col-5 flex-row">
              <span class="label label-info">{{ configuration.type }}</span>
              <button
                class="btn btn-danger btn-xs visible-xs flex-item-right m-r-8 m-t-8"
                title="{{ 'Remove`configuration`' | translate }}"
                (click)="removeItem(configuration, 'configuration')"
              >
                <i c8yIcon="minus-circle"></i>
                {{ 'Remove`configuration`' | translate }}
              </button>
            </div>
            <div class="flex-item-right p-r-8 hidden-xs">
              <button
                class="btn btn-dot showOnHover text-danger"
                title="{{ 'Remove`configuration`' | translate }}"
                (click)="removeItem(configuration, 'configuration')"
              >
                <i c8yIcon="minus-circle"></i>
              </button>
            </div>
          </c8y-li-body>
        </c8y-li>
      </c8y-list-group>
      <div class="p-t-8">
        <button
          title="{{ 'Add configuration' | translate }}"
          class="btn-add-block m-b-0"
          (click)="addConfiguration()"
        >
          <i c8yIcon="plus-circle"></i>
          <span class="m-r-8" *ngIf="deviceProfile.c8y_DeviceProfile.configuration?.length === 0">
            {{ 'No configuration defined.' | translate }}
          </span>
          {{ 'Add configuration' | translate }}
        </button>
      </div>
    </div>
  </div>
</div>