@if (inPopup) {
<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      <ion-icon name="tags" style="margin-right: 10px"></ion-icon>
      <ion-label>{{trails ? (trails.length === 1 ? i18n.texts.pages.trails.tags.popup.title_trail : i18n.texts.pages.trails.tags.popup.title_trails) : i18n.texts.pages.trails.tags.popup.title_collection}}</ion-label>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ng-container *ngTemplateOutlet="tagsNodes; context: { nodes: tree }"></ng-container>
</ion-content>
<ion-footer>
  <form class="add-tag-footer" (ngSubmit)="newRootTag()">
    <ion-input
      fill="outline"
      label="{{i18n.texts.pages.trails.tags.popup.add_tag_label}}"
      label-placement="floating"
      name="newTagName"
      [(ngModel)]="newTagName"
      [maxlength]="50"
      [counter]="true"
    ></ion-input>
    <ion-button shape="round" color="primary" [disabled]="newTagName.trim().length === 0" (click)="newRootTag()" type="submit">
      <ion-icon name="add" slot="icon-only"></ion-icon>
    </ion-button>
  </form>
  <ion-toolbar color="footer">
    @if (editing) {
      <ion-buttons slot="end">
        <ion-button color="success" (click)="saveEdit()" [disabled]="!canSaveEdit()">{{ i18n.texts.buttons.save }}</ion-button>
        <ion-button color="medium" (click)="cancelEdit()">{{ i18n.texts.buttons.cancel }}</ion-button>
      </ion-buttons>
    } @else {
      <ion-buttons slot="end">
        @if (trails) {<ion-button color="success" (click)="apply()" [disabled]="!canApply()">{{ i18n.texts.buttons.apply }}</ion-button>}
        <ion-button color="medium" (click)="cancel()">{{ trails ? i18n.texts.buttons.cancel : i18n.texts.buttons.close }}</ion-button>
      </ion-buttons>
      @if (editable) {
        <ion-buttons slot="start">
          <ion-button color="secondary" (click)="startEdit()">{{i18n.texts.buttons.edit}}</ion-button>
        </ion-buttons>
      }
    }
  </ion-toolbar>
</ion-footer>
} @else {
  <ng-container *ngTemplateOutlet="tagsNodes; context: { nodes: tree }"></ng-container>
}

<ng-template #tagsNodes let-nodes="nodes">
  @for (child of nodes; track child.tag.uuid) {
    <ng-container *ngTemplateOutlet="tagNode; context: { node: child }"></ng-container>
  }
</ng-template>

<ng-template #tagNode let-node="node">
  <div class="tag-node" [ngClass]="{'deleted': node.deleted}">
    @if (selectable && !editing) {
      <ion-checkbox
        labelPlacement="end"
        [indeterminate]="node.userSelected === undefined && node.inputTaggedTrails > 0 && node.inputTaggedTrails !== trails?.length"
        [checked]="node.userSelected === true || (node.userSelected !== false && node.inputTaggedTrails > 0 && node.inputTaggedTrails === trails?.length)"
        (ionChange)="node.userSelected = $event.detail.checked; selectionChanged();"
      >{{node.tag.name}}</ion-checkbox>
    } @else if (!editing) {
      <div class="tag-name">{{node.tag.name}}</div>
    } @else {
      <ion-input
        [(ngModel)]="node.newName"
        [maxlength]="50"
        [counter]="node.focus"
        (ionFocus)="node.focus = true"
        (ionBlur)="node.focus = false"
        class="very-small" [ngClass]="{'focus': node.focus}"
      ></ion-input>
      <ion-button fill="clear" color="danger" size="small" (click)="deleteTag(node)">
        <ion-icon name="trash" slot="icon-only"></ion-icon>
      </ion-button>
    }
  </div>
  <div class="tag-children">
    <ng-container *ngTemplateOutlet="tagsNodes; context: { nodes: node.children }"></ng-container>
  </div>
</ng-template>