<!--
~ Copyright (C) 2025 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-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-label class="ion-padding-horizontal">
      <h1 class="ion-padding-horizontal">{{ 'menu.context.title' | translate | titlecase }}</h1>
    </ion-label>
  </ion-toolbar>
</ion-header>

<ion-content>
  <!-- Sort Context -->
  <ion-list *ngIf="sortOption">
    <ion-radio-group class="context-sort" [value]="0">
      <ion-list-header>
        <ion-icon name="sort"></ion-icon>
        <ion-title>{{ 'menu.context.sort.title' | translate | titlecase }}</ion-title>
      </ion-list-header>
      <ion-item
        class="sort-item"
        *ngFor="let value of sortOption.values; let i = index"
        (click)="sortChanged(sortOption, value)"
      >
        <ion-radio [value]="i">
          {{ 'menu.context.sort.' + value.value | translate | titlecase }}
          <span *ngIf="sortOption.value === value.value && value.reversible">
            <ion-icon *ngIf="sortOption.reversed" name="arrow_downward"></ion-icon>
            <ion-icon *ngIf="!sortOption.reversed" name="arrow_upward"></ion-icon>
          </span>
        </ion-radio>
      </ion-item>
    </ion-radio-group>
  </ion-list>

  <!-- Filter Context -->
  <form class="context-filter" *ngIf="filterOption">
    <ion-list-header>
      <ion-icon name="filter_list"></ion-icon>
      <ion-title>{{ 'menu.context.filter.title' | translate | titlecase }}</ion-title>
      <ion-button class="resetFilterButton" fill="clear" color="dark" (click)="resetFilter(filterOption)">
        <ion-icon name="delete"></ion-icon>
      </ion-button>
    </ion-list-header>

    <ion-list class="filter-group" *ngFor="let facet of facets">
      <ion-list-header class="h3">
        <ion-label>
          <span *ngIf="facet.info.onlyOnType"
            ><b>{{ facet.info.onlyOnType | titlecase }}</b> /
          </span>
          {{ facet.info.field | titlecase }}
        </ion-label>
      </ion-list-header>

      <ng-container
        *ngFor="
          let bucket of !facet.compact ? facet.buckets.slice(0, compactFilterOptionCount) : facet.buckets
        "
      >
        <ion-item>
          <ion-checkbox
            [(ngModel)]="bucket.checked"
            (ngModelChange)="filterChanged()"
            [name]="facet.onlyOnType + '-' + facet.field + '-' + bucket.key"
            [value]="{
              field: facet.field,
              value: bucket.key,
              onlyOnType: facet.onlyOnType
            }"
            class="filter-item-label"
          >
            ({{ bucket.count }})
            {{
              facet.field === 'type'
                ? (getTranslatedPropertyValue($any(bucket.key), 'type') | titlecase)
                : (facet.onlyOnType && getTranslatedPropertyValue(facet.onlyOnType, facet.field, bucket.key)
                  | titlecase)
            }}
          </ion-checkbox>
        </ion-item>
      </ng-container>

      <ion-button
        *ngIf="!facet.compact && facet.buckets.length > compactFilterOptionCount"
        fill="clear"
        (click)="facet.compact = true"
      >
        {{ 'menu.context.filter.showAll' | translate }}
      </ion-button>
    </ion-list>
  </form>
</ion-content>
