<mat-card>
  <div class="container-fluid" *ngIf="!showResumeOnUI; else resume">
    <div class="row">
      <div class="col-md-12">
        <h2>Candidate Details</h2>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <p class="field-display">
          <label>Email</label>
          {{userData.emailId}}
        </p>
      </div>
      <div class="col-md-3">
        <p class="field-display">
          <label>Alternative Email</label>
          {{userData.alternativeEmail}}
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <p class="field-display">
          <label>Phone</label>
          {{userData.contactNumber}}
        </p>
      </div>
      <div class="col-md-3">
        <p class="field-display">
          <label>Alternative Phone</label>
          {{userData.alternativeContact}}
        </p>
      </div>
    </div>


    <div class="row">
      <div class="col-md-3">
        <p class="field-display">
          <label>City</label>
          {{userData.city}}
        </p>
      </div>
      <div class="col-md-3">
        <p class="field-display">
          <label>Address</label>
          {{userData.addressLine1}}
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <p class="field-display">
          <label>Twitter ID</label>
          {{userData.twitter}}
        </p>
      </div>
      <div class="col-md-3">
        <p class="field-display">
          <label>Country</label>
          {{userData.country}}
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-3">
        <p class="field-display">
          <label>Linkedin ID</label>
          {{userData.linkedInId}}
        </p>
      </div>
      <div class="col-md-3">
        <p class="field-display">
          <label>Facebook ID</label>
          {{userData.facebookId}}
        </p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-12">
        <a *ngIf="!canShowResumeOnUI" class="btn btn-lg btn-default pull-right" [href]="dataUrl" [download]="fileName">VIEW RESUME</a>
        <a *ngIf="canShowResumeOnUI" class="btn btn-lg btn-default pull-right" href="javascript:void(0)" (click)="toggleResume()">VIEW RESUME</a>
      </div>
    </div>
  </div>

  <ng-template #resume>
    <mat-icon class="pull-right pointer" (click)="toggleResume()">close</mat-icon>
    <iframe [src]="resourceUrl" type="application/pdf" width="100%" height="440px" frameborder="0"></iframe>
  </ng-template>

</mat-card>
