<mat-toolbar color="primary" [class.mat-elevation-z1]="true">
  <span class="mat-body-strong ellipsis">P3X Angular HTTP Cache Interceptor v{{ version }}</span>
</mat-toolbar>

<div style="margin: 25px;">
  <mat-card>
    <div class="list-item-fix">
      <button mat-flat-button color="primary" (click)="loadCached()">Cached request</button>
      <br/>
      <br/>
      <div class="mat-caption">Itt will try to load some random data with cached data. You can see in the browser inspector network tab, that there will be only one request.</div>
    </div>
    <br/>
    <mat-divider></mat-divider>
    <br/>
    <div class="list-item-fix">
      <button mat-flat-button color="primary"  (click)="loadNonCached()">Non cached request</button>
      <br/>
      <br/>
      <div class="mat-caption">It will try to load some random data without cache. You can see in the browser inspector network tab, that every click will talk to a server and retrieve the new data.</div>
    </div>
    <br/>
    <mat-divider></mat-divider>
    <br/>
    <div>
      <a mat-button color="accent" class="mat-button-wrapping" href="https://corifeus.com/angular-http-cache-interceptor" target="_blank">Corifeus P3X Angular HTTP Cache Interceptor</a>
    </div>
    <br/>
    <mat-divider></mat-divider>
    <br/>
    <div>
      <a mat-button color="accent" href="https://github.com/patrikx3/angular-http-cache-interceptor" target="_blank">GitHub</a>
    </div>
    <br/>
    <mat-divider></mat-divider>
    <br/>
    <div>
      <a mat-button color="accent" href="https://www.npmjs.com/package/p3x-angular-http-cache-interceptor" target="_blank">NpmJS</a>
    </div>
  </mat-card>
</div>