<div class="json_query">
  <mat-form-field>
    <input matInput (keydown.enter)="search()" placeholder="Search" [(ngModel)]='inputQueryValue'>
  </mat-form-field>
</div>

<br>
<mat-expansion-panel
  [disabled]="docs.hits.total == 0"
  [expanded]="docs.hits.hits.length == 0 && docs.hits.total != 0">

  <mat-expansion-panel-header>
    {{docs.hits.total}} matching config files
    <div *ngIf="docs.hits.total > 0">, expand to see a breakdown by kind.</div>
  </mat-expansion-panel-header>
  <app-histogram></app-histogram>
  <app-timeseries></app-timeseries>
</mat-expansion-panel>

<br>
<mat-expansion-panel class="result" *ngFor="let doc of docs.hits.hits">
  <mat-expansion-panel-header class="result" [collapsedHeight]="'auto'" [expandedHeight]="'auto'">
    {{ doc.result.repositoryUrl }}/{{ doc.result.filePath }}
  </mat-expansion-panel-header>
  <div mat-line>
    <h3>File Contents</h3>
    <pre><code>{{doc.result.document}}</code></pre>
  </div>
</mat-expansion-panel>

<button mat-button [disabled]="first()" (click)="prev()">
  Previous
</button>
<button mat-button [disabled]="last()" (click)="next()">
  Next
</button>
