<!--
~ 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-item>
  <ion-label class="ion-text-wrap">
    @if (item.about) {
      <h2 class="name">
        @if (visualStatus) {
          <ion-badge [color]="visualStatus.color" slot="start">
            {{ 'library.account.pages' + '.' + listName + '.' + visualStatus.statusText | translate }}
          </ion-badge>
        }
        {{ item.about }}
      </h2>
    }
    @for (property of propertiesToShow; track property) {
      @if (item[property]) {
        <p>
          {{ 'library.account.pages' + '.' + listName + '.' + 'labels' + '.' + property | translate }}:
          @if (!['starttime', 'duedate'].includes(property)) {
            {{ item[property] }}
          } @else {
            {{ $any(item[property]) | amDateFormat: 'll' }}
          }
        </p>
      }
    }
    <span class="ion-float-right">
      <!--      TODO: Add "cancel button" when functionality ready for production-->
      <!--      <ion-button-->
      <!--        *ngIf="item.cancancel"-->
      <!--        color="primary"-->
      <!--        (click)="onClick('cancel')"-->
      <!--      >-->
      <!--        {{ 'library.account.actions.cancel.header' | translate }}</ion-button-->
      <!--      >-->
      @if (renewable && item.canrenew) {
        <ion-button color="primary" (click)="onClick('renew')">
          {{ 'library.account.actions.renew.header' | translate }}</ion-button
        >
      }
    </span>
  </ion-label>
</ion-item>
