<div *ngIf="this.router.url === '/tracking/check-in-at-work'">
      <mat-expansion-panel [expanded]="cawCurrentPerson">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon class="sideListHeaderIcon"> filter_alt </mat-icon>
            {{ 'payroll.sideList.personFilter' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div *ngIf="cawPersons" style="display: flex; justify-content: center">
          <div *ngIf="cawCurrentPerson$ | async">
            <button
              mat-button
              class="sideListIcon"
              (click)="previousCAWPerson()"
            >
              <mat-icon>keyboard_arrow_left</mat-icon>
            </button>
            {{ cawCurrentPersonIndex + 1 }}/{{ cawPersonCount }}
            <button mat-button class="sideListIcon" (click)="nextCAWPerson()">
              <mat-icon>keyboard_arrow_right</mat-icon>
            </button>
          </div>
          <button
            mat-button
            class="sideListIcon"
            (click)="openCAWPersonHistoryDialog()"
          >
            <mat-icon>search</mat-icon>
          </button>
          <button
            *ngIf="cawCurrentPerson$ | async"
            mat-button
            class="sideListIcon"
            (click)="routerComponent.clearPersonFilter()"
          >
            <img style="width: 20px" src="../assets/images/clear_filter.png" />
          </button>
        </div>
        <span
          *ngIf="cawCurrentPerson$ | async"
          style="font-weight: 500; font-size: 14px; line-height: 2"
          >{{ (cawCurrentPerson$ | async).company_nr }} -
          {{ (cawCurrentPerson$ | async).person_name }}</span
        >
        <span *ngIf="(cawCurrentPerson$ | async) == null">{{
          'payroll.sideList.noPersonFilter' | translate
        }}</span>
      </mat-expansion-panel>
      <mat-expansion-panel
        *ngIf="this.router.url === '/tracking/check-in-at-work'"
      >
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon class="sideListHeaderIcon"> filter_alt </mat-icon>
            POI filter
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div>
          <button mat-button class="sideListIcon" (click)="openPOIsDialog()">
            <mat-icon>search</mat-icon>
          </button>
          <button
            mat-button
            class="sideListIcon"
            (click)="clearPOIFilter()"
            *ngIf="selectedPOI$ | async"
          >
            <img style="width: 20px" src="../assets/images/clear_filter.png" />
          </button>
        </div>
        <div class="sideListText">
          <span *ngIf="selectedPOI$ | async">
            {{ (selectedPOI$ | async).short_name }} -
            {{ (selectedPOI$ | async).name }}</span
          >
        </div>
        <div *ngIf="(selectedPOI$ | async) == null">
          {{ 'No filter' | translate }}
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            <mat-icon class="sideListHeaderIcon"> filter_alt </mat-icon>
            Extra filters
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="panel panel-default" style="width: 385px; height: 100px">
          <div class="panel-body">
            <table
              style="width: 400px; margin-top: 5px; margin-bottom: 5px"
              cellspacing="0"
            >
              <tr style="height: 5px">
                <td width="115px" style="text-align: left !important">
                  <div id="showwarningcheckbox"></div>
                </td>
              </tr>
              <tr style="height: 5px">
                <td width="250px" style="text-align: left !important">
                  <div id="shownonadminstatusonlycheckbox"></div>
                </td>
              </tr>
              <tr style="height: 5px">
                <td width="131px" style="text-align: left !important">
                  <div id="showexceptionsonlycheckbox"></div>
                </td>
              </tr>
              <tr style="height: 5px">
                <td width="300px" style="text-align: left !important">
                  <div id="showonlypplwithmissingdocscheckbox"></div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </mat-expansion-panel>
      <mat-expansion-panel [expanded]="true">
        <mat-expansion-panel-header>
          <mat-panel-title>
            <img
              src="assets/images/actions.png"
              class="sideListImg"
              style="width: 20px"
            />
            {{ 'personList.sideList.actions' | translate }}
          </mat-panel-title>
        </mat-expansion-panel-header>
        <div class="actions">
          <div class="actions">
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="openLegendDialog()"
            >
              <mat-icon class="actionicon">format_list_bulleted</mat-icon>
              Show legend
            </button>
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="addCawPersonRow()"
            >
              <mat-icon class="actionicon">add_circle</mat-icon>
              Add request
            </button>
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="cancelCAW()"
            >
              <mat-icon class="actionicon">cancel</mat-icon>
              Cancel request
            </button>
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="refreshCAW()"
            >
              <mat-icon class="actionicon">refresh</mat-icon>
              Refresh
            </button>
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="executeNowCAW()"
            >
              <mat-icon class="actionicon">task_alt</mat-icon>
              Execute now
            </button>
            <button
              *ngIf="this.router.url === '/tracking/check-in-at-work'"
              mat-button
              class="sideListActionButton"
              (click)="openCawRemarksDialog()"
            >
              <mat-icon class="actionicon">pageview</mat-icon>
              View remarks
            </button>
            <button
              mat-button
              class="sideListActionButton"
              (click)="routerComponent.exportExcel()"
            >
              <img
                class="mat-icon"
                src="assets/images/file/file-excel-solid-grey.svg"
              />
              {{ 'personList.exportExcel' | translate }}
            </button>

            <span style="display: flex" *ngFor="let data of exports">
              <button
                mat-button
                class="sideListActionButton"
                (click)="export(data)"
              >
                <img
                  *ngIf="['xlsx', 'csv'].includes(getExportFileExt(data))"
                  class="mat-icon"
                  src="assets/images/file/file-excel-solid-grey.svg"
                />
                <img
                  *ngIf="getExportFileExt(data) === 'txt'"
                  class="mat-icon"
                  src="assets/images/file/file-solid.svg"
                />
                {{ data.export_name }}
              </button>
            </span>
          </div>
        </div>
      </mat-expansion-panel>
    </div>