<!--
~ Copyright (C) 2022 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/>.
-->

@if (openingHours$ | async; as openingHours) {
  <div>
    @if (colorize) {
      <ion-badge [color]="openingHours.color" slot="start">
        {{ openingHours.statusName | translate }}
      </ion-badge>
    } @else {
      {{ openingHours.statusName | translate }}
    }
    @if (openingHours.statusText) {
      {{ openingHours.statusText }}
    } @else {
      @if (showNextChange && openingHours.nextChangeSoon) {
        {{
          'common.openingHours.' + openingHours.nextChangeAction + '_soon'
            | translate
              : {
                  duration:
                    (openingHours.nextChangeSoon | async | dfnsFormatDistanceToNowStrict: ({unit: 'minute'}))
                }
        }}
      }
      @if (showNextChange && !openingHours.nextChangeSoon) {
        {{
          'common.openingHours.' + openingHours.nextChangeAction
            | translate: {date: openingHours.nextChange | dfnsFormatRelativeToNow}
        }}
      }
    }
    <ng-template #nextChange>
      @if (showNextChange && openingHours.nextChangeSoon) {
        {{
          'common.openingHours.' + openingHours.nextChangeAction + '_soon'
            | translate
              : {
                  duration:
                    (openingHours.nextChangeSoon | async | dfnsFormatDistanceToNowStrict: ({unit: 'minute'}))
                }
        }}
      }
      @if (showNextChange && !openingHours.nextChangeSoon) {
        {{
          'common.openingHours.' + openingHours.nextChangeAction
            | translate: {date: openingHours.nextChange | dfnsFormatRelativeToNow}
        }}
      }
    </ng-template>
  </div>
}
