<div class="modal-header">
  <h3 id="modal-title">{{ title | translate }}</h3>
</div>

<div class="modal-body" id="modal-body">
  <form name="reportForm">
    <div class="form-group">
      <label translate>Name</label>
      <input
        class="form-control"
        name="name"
        ng-model="report.name"
        ng-maxlength="512"
        placeholder="{{ 'e.g. My report' | translate }}"
        required
      />
      <c8y-error-feedback field="reportForm.name"></c8y-error-feedback>
    </div>

    <div class="form-group">
      <label translate>Icon</label>
      <ui-select ng-model="report.icon">
        <ui-select-match placeholder="{{ 'Select or search icon' | translate }}">
          <i c8y-icon="{{ $select.selected }}"></i>
          {{ $select.selected }}
        </ui-select-match>
        <ui-select-choices repeat="item in icons | filter: $select.search">
          <div>
            <i c8y-icon="{{ item }}"></i>
            {{ item }}
          </div>
        </ui-select-choices>
      </ui-select>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    type="button"
    class="btn btn-default"
    ng-click="cancel()"
  >
    {{ 'Cancel' | translate }}
  </button>
  <button
    title="{{ 'Save' | translate }}"
    type="button"
    class="btn btn-primary"
    ng-click="save()"
    ng-disabled="reportForm.$invalid"
  >
    {{ 'Save' | translate }}
  </button>
</div>
