@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.goodName }}
      </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">Name:</span>
          <span class="value strong">{{ asUpper(profile.goodName) }}</span>
        </div>

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

        <div class="row">
          <span class="label">Sensor(s):</span>
          <span class="value">

            @for (entry of sensors; track entry[0]) {
              -&nbsp;<b>{{ entry[0] }} ({{ entry[1].length }})</b>&nbsp;: {{ printSensorsInLine(entry[1])}}<br />
            }

          </span>
        </div>

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

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

  </article>
}