<div class="modal-header dialog-header">
  <i c8yIcon="gears"></i>
  <h4 id="modal-title" translate>
    Save configuration
  </h4>
</div>
<div class="modal-body" id="modal-body">
  <form #saveConfigurationSnapshot="ngForm" class="p-t-24">
    <c8y-form-group>
      <label translate for="name">Name</label>
      <input
        id="name"
        type="text"
        class="form-control"
        autocomplete="off"
        name="name"
        [(ngModel)]="configSnapshot.name"
        required
      />
    </c8y-form-group>
    <c8y-form-group>
      <label translate for="deviceType">Device type</label>
      <input
        id="deviceType"
        class="form-control"
        rows="6"
        name="deviceType"
        [(ngModel)]="configSnapshot.deviceType"
      />
    </c8y-form-group>
    <c8y-form-group>
      <label translate for="description">Description</label>
      <input
        type="text"
        id="description"
        class="form-control"
        maxlength="254"
        autocomplete="off"
        name="description"
        [(ngModel)]="configSnapshot.description"
      />
    </c8y-form-group>
    <c8y-form-group>
      <label translate for="configurationType">Configuration type</label>
      <input
        id="configurationType"
        class="form-control"
        rows="6"
        name="configurationType"
        [(ngModel)]="configSnapshot.configurationType"
      />
    </c8y-form-group>
  </form>
</div>
<div class="modal-footer">
  <button title="{{ 'Cancel' | translate }}" class="btn btn-default" (click)="close()" translate>
    Cancel
  </button>

  <button
    title="{{ 'Save configuration to repository' | translate }}"
    class="btn btn-primary"
    (click)="save()"
    [disabled]="saveConfigurationSnapshot.form.invalid"
    translate
  >
    Save
  </button>
</div>