<!--
~ 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-note>
  <ion-label> {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} </ion-label>
  @if (item.characteristics) {
    @for (characteristic of 'characteristics' | thingTranslate: item; track characteristic) {
      <!-- Abbr tag shows the actual name on hover -->
      <abbr
        [style.--background-url]="'url(' + characteristic.image + ')'"
        [title]="characteristic.name | titlecase"
        class="mask-image"
      ></abbr>
    }
  }
  @if (item.certifications) {
    @for (cert of item.certifications; track cert) {
      @if (cert.compactImage) {
        <abbr [title]="'description' | thingTranslate: cert">
          <img
            [src]="'compactImage' | thingTranslate: cert"
            height="16"
            [alt]="'name' | thingTranslate: cert"
          />
        </abbr>
      }
    }
  }
</ion-note>
