<ion-card *ngIf="item.workLocations?.length > 0">
  <ion-card-header>
    {{ 'type' | thingTranslate: item.workLocations[0] | titlecase }}
  </ion-card-header>
  <ion-card-content>
    <ng-container *ngIf="item.workLocations.length === 1">
      <p *ngIf="item.workLocations[0].telephone">
        {{
          'telephone'
            | propertyNameTranslate: item.workLocations[0]
            | titlecase
        }}:
        <a [href]="'tel:' + item.workLocations[0].telephone">{{
          item.workLocations[0].telephone
        }}</a>
      </p>
      <p *ngIf="item.workLocations[0].email">
        {{
          'email' | propertyNameTranslate: item.workLocations[0] | titlecase
        }}:
        <a [href]="'mailto:' + item.workLocations[0].email">{{
          item.workLocations[0].email
        }}</a>
      </p>
      <p *ngIf="item.workLocations[0].faxNumber">
        {{
          'faxNumber'
            | propertyNameTranslate: item.workLocations[0]
            | titlecase
        }}: {{ item.workLocations[0].faxNumber }}
      </p>
      <p *ngIf="item.workLocations[0].url">
        {{ 'url' | propertyNameTranslate: item.workLocations[0] | titlecase }}:
        <a [href]="item.workLocations[0].url">{{
          item.workLocations[0].url
        }}</a>
      </p>
      <p *ngIf="item.workLocations[0].areaServed">
        {{
          'areaServed'
            | propertyNameTranslate: item.workLocations[0]
            | titlecase
        }}:
        <a
          [routerLink]="['/data-detail', item.workLocations[0].areaServed.uid]"
          >{{ item.workLocations[0].areaServed.name }}</a
        >
      </p>
    </ng-container>
    <ion-slides
      *ngIf="item.workLocations.length > 1"
      pager="true"
      class="work-locations"
    >
      <ion-slide *ngFor="let workLocation of item.workLocations">
        <p *ngIf="workLocation.telephone">
          {{
            'telephone' | propertyNameTranslate: item.workLocation | titlecase
          }}:
          <a [href]="'tel:' + workLocation.telephone">{{
            workLocation.telephone
          }}</a>
        </p>
        <p style="display: block !important" *ngIf="workLocation.email">
          {{ 'email' | propertyNameTranslate: item.workLocation | titlecase }}:
          <a [href]="'mailto:' + workLocation.email">{{
            workLocation.email
          }}</a>
        </p>
        <p *ngIf="workLocation.faxNumber">
          {{
            'faxNumber' | propertyNameTranslate: item.workLocation | titlecase
          }}: {{ workLocation.faxNumber }}
        </p>
        <p *ngIf="workLocation.url">
          {{ 'url' | propertyNameTranslate: item.workLocation | titlecase }}:
          <a [href]="workLocation.url">{{ workLocation.url }}</a>
        </p>
        <p *ngIf="workLocation.areaServed">
          {{
            'areaServed' | propertyNameTranslate: item.workLocation | titlecase
          }}:
          <a [routerLink]="['/data-detail', workLocation.areaServed.uid]">{{
            workLocation.areaServed.name
          }}</a>
        </p>
        <!-- Used for making the additional space, so that slide pager doesn't show over the text but under it -->
        <!-- <div class="stapps-slide-bottom"></div> -->
      </ion-slide>
    </ion-slides>
  </ion-card-content>
</ion-card>
<stapps-simple-card
  *ngIf="item.jobTitles?.length > 0"
  [title]="'jobTitles' | propertyNameTranslate: item | titlecase"
  [content]="item.jobTitles"
></stapps-simple-card>
