Yrkki/cv-generator-fe

<div class="container-fluid">
  <div class="row">
    <div class="col-md-3 cell-key">
      <span (click)="rotateDateFormat()" title="{{ uiService.uiText('Click here to change format') }}"
        [attr.aria-label]="uiService.label('rotateDateFormat')" (keypress)="inputService.keypress($event)">
        {{ getJsDateValueFromExcel(propertyName['Publication date']) | date:dateFormat }}
      </span>
    </div>
    <div class="col-md-9 cell-value">
      <div>
        <ng-container *ngIf="propertyName['Publication image']">
          <a href="{{ getAccomplishmentPublicationLogoImageUri(propertyName['Publication image'], true) }}"
            target="_blank" rel="noopener noreferrer" [attr.aria-label]="linkLabel(ui['Publication image']?.text)">
            <img src="{{ getAccomplishmentPublicationLogoImageUri(propertyName['Publication image']) }}"
              onerror="this.style.display='none'" class="thumbnail" alt="" loading="lazy" />
          </a>
        </ng-container>
        <ng-template #publicationTemplate>
          {{ propertyName['Author'] }}{{ punctuation['dot'] }}{{ punctuation['space'] }}{{
          punctuation['bracket round opening'] }}{{ propertyName['Type'] }}{{
          punctuation['bracket round closing'] }}{{ punctuation['dot'] }}
          <em>{{ propertyName['Title'] }}{{ punctuation['colon'] }}{{ punctuation['space'] }}{{
            propertyName['Subtitle'] }}</em>
        </ng-template>
        <ng-container *ngIf="propertyName['URL']; else elseBlockPublication">
          <a href="{{ propertyName['URL'] }}" target="_blank" rel="noopener noreferrer"
            [attr.aria-label]="linkLabel(ui['Publication']?.text)">
            <ng-container *ngTemplateOutlet="publicationTemplate"></ng-container>{{ punctuation['dot'] }}
          </a>
        </ng-container>
        <ng-template #elseBlockPublication>
          <ng-container *ngTemplateOutlet="publicationTemplate"></ng-container>{{ punctuation['dot'] }}
        </ng-template>
        <div class="detail">
          <ng-container *ngIf="propertyName['Article']">
            <ng-container>
              {{ propertyName['Article author'] }}{{ punctuation['dot'] }}{{ punctuation['space'] }}{{
              punctuation['quote double opening'] }}{{ propertyName['Article'] }}{{ punctuation['quote double closing']
              }}
            </ng-container>
            <ng-container *ngIf="propertyName['Article date']">
              {{ punctuation['bracket round opening'] }}{{ propertyName['Article date'] }}{{
              punctuation['bracket round closing'] }}
            </ng-container>
            <ng-container *ngIf="propertyName['Translation Article']">
              {{ punctuation['bracket square opening'] }}{{ propertyName['Translation Article'] }}{{
              punctuation['bracket square closing'] }}{{ punctuation['dot'] }}
            </ng-container>
          </ng-container>
          <ng-container *ngTemplateOutlet="publicationTemplate"></ng-container>{{ punctuation['space'] }}
          <ng-container *ngIf="propertyName['Translator']">
            {{ punctuation['bracket round opening'] }}{{
            propertyName['Translator'] }}{{ punctuation['space'] }}{{ ui['Trans']?.text }}{{ punctuation['dot'] }}{{
            punctuation['bracket round closing'] }}{{ punctuation['dot'] }}
            <ng-container *ngIf="propertyName['Translation Title']">
              {{ punctuation['bracket square opening'] }}{{ propertyName['Translation Title'] }}
              <ng-container *ngIf="propertyName['Translation Subtitle']">
                {{ punctuation['colon'] }}{{ punctuation['space'] }}{{ propertyName['Translation Subtitle'] }}
              </ng-container>
              {{ punctuation['bracket square closing'] }}{{ punctuation['dot'] }}
            </ng-container>
          </ng-container>
          <ng-container *ngIf="propertyName['Editor']">
            {{ ui['Ed']?.text }}{{ punctuation['dot'] }}{{ punctuation['space'] }}{{ propertyName['Editor'] }}{{
            punctuation['dot'] }}
          </ng-container>
          <ng-container>
            {{ propertyName['City'] }}{{ punctuation['colon'] }}{{ punctuation['space'] }}{{
            propertyName['Publisher'] }}{{ punctuation['comma'] }}{{ punctuation['space'] }}{{
            getJsDateValueFromExcel(propertyName['Publication date']) | date:dateFormatInline }}{{ punctuation['dot'] }}
          </ng-container>
          <ng-container>
            {{ propertyName['Pages'] }}
          </ng-container>
          <ng-container>
            {{ propertyName['Format'] }}{{ punctuation['comma'] }}{{ punctuation['space'] }}{{
            propertyName['Page count'] }}{{ punctuation['space'] }}{{ propertyName['Size'] }}{{ punctuation['dot'] }}
          </ng-container>
          <ng-container>
            {{ propertyName['ISBN'] }}{{ punctuation['dot'] }}
          </ng-container>
        </div>
      </div>
    </div>
  </div>
</div>