<!--
~ Copyright (C) 2023 StApps
~ This program is free software: you can redistribute it and/or modify it
~ under the terms of the GNU General Public License as published by the Free
~ Software Foundation, version 3.
~
~ This program is distributed in the hope that it will be useful, but WITHOUT
~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
~ more details.
~
~ You should have received a copy of the GNU General Public License along with
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<ion-card>
  <ion-card-header>{{ 'data.types.certification.TITLE' | translate }}</ion-card-header>
  <ion-card-content>
    <div class="certification-list">
      @for (cert of certifications; track cert) {
        <img
          (click)="popover.present($event)"
          [width]="72"
          [src]="'image' | thingTranslate: cert"
          [alt]="'description' | thingTranslate: cert"
        />
        <ion-popover #popover>
          <ng-template>
            <ion-content class="ion-padding">
              <ion-card-title>{{ 'name' | thingTranslate: cert }}</ion-card-title>
              <ion-card-subtitle> {{ 'description' | thingTranslate: cert }} </ion-card-subtitle>
            </ion-content>
          </ng-template>
        </ion-popover>
      }
    </div>
    <ion-note>
      <stapps-external-link
        [link]="'data.types.certification.EXTERNAL_INFO_URL' | translate"
        [text]="'data.types.certification.EXTERNAL_INFO' | translate"
      ></stapps-external-link>
    </ion-note>
  </ion-card-content>
</ion-card>
