<div>
  <h2>__jhiTranslateTag__('entityAudit.home.title')</h2>

  <<%= jhiPrefixDashed %>-alert></<%= jhiPrefixDashed %>-alert>

  <div>
    <h4>__jhiTranslateTag__('entityAudit.home.filter')</h4>

    <form name="auditEventForm" class="form-inline" #auditEventForm="ngForm">
      <div class="d-flex">
        <label class="form-control-label mr-sm-2 col-2" for="entityName">__jhiTranslateTag__('entityAudit.home.entityOrTable')</label>
        <select
          class="form-control mb-2 mr-sm-2 mb-sm-0"
          id="entityName"
          name="entityName"
          required
          [ngModel]="selectedEntity()"
          (ngModelChange)="selectedEntity.set($event)"
          #entityName="ngModel"
        >
          <option value="{{ null }}" selected>Select</option>
          @for (entityOption of entities(); track $index) {
            <option [value]="entityOption.value">{{ entityOption.name }}</option>
          }
        </select>

        <label class="form-control-label mr-sm-2 col-2" for="limit">__jhiTranslateTag__('entityAudit.home.limitTo')</label>
        <select
          class="form-control mb-2 mr-sm-2 mb-sm-0"
          id="limit"
          name="limit"
          required
          [ngModel]="selectedLimit()"
          (ngModelChange)="selectedLimit.set($event)"
        >
          @for (limitOption of limits; track $index) {
            <option [value]="limitOption">{{ limitOption }}</option>
          }
        </select>

        <button class="btn btn-primary float-right col-2" (click)="loadChanges()" [disabled]="!auditEventForm.form.valid">
          <fa-icon icon="sync"></fa-icon>
          <span>__jhiTranslateTag__('entityAudit.home.loadChangeList')</span>
        </button>
      </div>
    </form>
  </div>

  <div [hidden]="loading()">
    @if (audits().length > 0 || filterEntityId()) {
      <div class="table-responsive mt-2">
        <p>__jhiTranslateTag__('entityAudit.result.showInfo', { "limit": "selectedLimit()", "entity": "selectedEntity()" })</p>

        <form class="form-inline mb-2">
          <div class="form-group">
            <label for="searchFieldEntityId">__jhiTranslateTag__('entityAudit.result.searchFieldLabel')</label>
            <input
              type="text"
              class="form-control ml-2"
              id="searchFieldEntityId"
              name="searchFieldEntityId"
              placeholder="{{ 'entityAudit.result.entityIdFilter' | translate }}"
              [ngModel]="filterEntityId()"
              (ngModelChange)="filterEntityId.set($event)"
            />
          </div>
        </form>

        <table class="table table-condensed table-striped table-bordered">
          <thead>
            <tr>
              <th (click)="orderBy('entityId')">__jhiTranslateTag__('entityAudit.result.tableHeader.entityId')</th>
              <th (click)="orderBy('action')">__jhiTranslateTag__('entityAudit.result.tableHeader.action')</th>
              <th (click)="orderBy('commitVersion')">__jhiTranslateTag__('entityAudit.result.tableHeader.version')</th>
              <th>__jhiTranslateTag__('entityAudit.result.tableHeader.value')</th>
              <th (click)="orderBy('modifiedDate')">__jhiTranslateTag__('entityAudit.result.tableHeader.modifiedDate')</th>
              <th (click)="orderBy('modifiedBy')">__jhiTranslateTag__('entityAudit.result.tableHeader.modifiedBy')</th>
              <th><fa-icon icon="eye"></fa-icon></th>
            </tr>
          </thead>
          <tbody>
            @for (audit of audits(); track audit.id) {
              <tr>
                <td>{{ audit.entityId }}</td>
                <td>{{ audit.action }}</td>
                <td>{{ audit.commitVersion }}</td>
                <td>
                  <pre class="code">{{ audit.entityValue | json }}</pre>
                </td>
                <td>{{ audit.modifiedDate | date: 'medium' }}</td>
                <td>{{ audit.modifiedBy }}</td>
                <td>
                  <button
                    type="button"
                    class="btn btn-info btn-xs"
                    ngbTooltip="__jhiTranslatePipe__('entityAudit.result.tableBody.viewDetails')"
                    (click)="openChange(audit)"
                  >
                    <fa-icon icon="eye"></fa-icon>
                  </button>
                </td>
              </tr>
            }
          </tbody>
        </table>
      </div>
    } @else {
      <p class="mt-2">__jhiTranslateTag__('entityAudit.result.noDataFound')</p>
    }
  </div>
</div>
