@if (profile != null) {
  <article class="id-card" role="region" aria-label="Identity card - profile">
      <header class="banner" >
      <span class="country">
         &nbsp;&nbsp;
        Identity card: {{ profile.firstName }} {{ profile.lastName }}
      </span>
        <span class="id-type">
        <span class="fi fi-{{ profile.nationality.toLowerCase() }}"></span>
      </span>
      </header>

      <div class="body">
        <div class="photo">
          <img [src]="profile.photoUrl" alt="Identity photo"/>
        </div>

        <div align="left" class="info">
          <div class="row">
            <span class="label">Last Name:</span>
            <span class="value strong">{{ asUpper(profile.lastName) }}</span>
          </div>

          <div class="row">
            <span class="label">First Name:</span>
            <span class="value">{{ profile.firstName }}</span>
          </div>

          <div class="row">
            <span class="label">Sex:</span>
            <span class="value">{{ profile.sex }}</span>
          </div>

          <div class="row">
            <span class="label">Date of birth:</span>
            <span class="value">{{ profile.birthDate | date: 'yyyy-MM-dd' }} (age: {{ profile.age }})</span>
          </div>

          <div class="row">
            <span class="label">Height:</span>
            <span class="value">{{ profile.height }} cm</span>
          </div>

          <div class="row">
            <span class="label">Nationality:</span>
            <span class="value">
            <span class="fi fi-{{ profile.nationality.toLowerCase() }}"></span>
              {{ profile.nationality }}
          </span>
          </div>

          <div class="row">
            <span class="label">Status:</span>
            <span class="value strong name-with-status">
             <span class="status-dot" [style.background]="getColorStatus(profile.status)"
                   [title]="profile.status"></span>
            ({{ profile.status }})</span>
          </div>

          <div class="row">
            <span class="label">ID No.:</span>
            <span class="value mono">{{ profile.id }}</span>
          </div>

          <div class="row">
            <span class="label">Job(s):</span>
            <span class="value">
            <ul>
              @for (job of profile.jobs; track job) {
                <li><b>{{ job }}</b></li>
              }
            </ul>
          </span>
          </div>
        </div>
      </div>

    <footer class="mrz">
      <div class="mrz-line">{{ mrz1 }}</div>
      <div class="mrz-line">{{ mrz2 }}</div>
    </footer>

  </article>
}