@let info = algorithmInformation();
<div class="mb-4 py-3 px-4 border border-[#ddd] rounded-lg">
  <h3 class="m-0 mb-2">{{ info.title | translate }}</h3>

  @if(info.entries && info.entries.length > 0){
    @for (algo of info.entries; track algo)
    {
      <p class="my-2">
        <strong>
          @if(algo.translateName){
            {{ algo.name | translate}}
          } @else {
            {{ algo.name }}
          }
        </strong>
        {{ algo.description | translate }}
        <a href="{{algo.link}}" target="_blank" rel="noopener noreferrer">Wikipedia</a>
      </p>
    }
  }

  <h4 class="m-0 mt-3 mb-1">{{ 'ALGORITHM.HOW_IT_WORKS' | translate }}</h4>
  <p class="my-2">{{ info.howItWorks.intro | translate }}</p>
  <ul>
    @for (item of info.howItWorks.items; track item) {
      <li>{{ item | translate }}</li>
    }
  </ul>
  <p class="my-2">
    <strong class="mr-2">{{ 'ALGORITHM.SOURCE' | translate }}:</strong>
    @for (path of info.sources; track path) {
      <a [href]="sourceUrl(path)" target="_blank" rel="noopener noreferrer" class="mr-3">{{ fileName(path) }}</a>
    }
  </p>

  @if (info.disclaimer !== '')
  {
    <p class="my-2">
      <strong>{{ 'ALGORITHM.NOTE' | translate}}</strong> {{ info.disclaimer | translate}}
    </p>
    @if (info.disclaimerListEntry && info.disclaimerListEntry.length > 0)
    {
      <ul>
        @for (entry of info.disclaimerListEntry; track entry)
        {
          <li>{{ entry | translate}}</li>
        }
      </ul>
    }
    @if (info.disclaimerBottom !== '')
    {
      <p>
        {{ info.disclaimerBottom | translate}}
      </p>
    }
  }
</div>