<div class="row">
  <div class="col">
    @if (readonly) {
      <div class="h5" i18n>Tags</div>
      @if (tags?.length > 0) {
        <mat-chip-listbox>
          @for (tag of tags; track tag) {
            <mat-chip-option disabled>{{ tag.name }}</mat-chip-option>
          }
        </mat-chip-listbox>
      } @else {
        <div>-</div>
      }
    } @else {
      <mat-form-field appearance="outline" class="w-100 without-hint">
        <mat-label i18n>Tags</mat-label>
        <mat-chip-grid #tagsChipList>
          @for (tag of tagsSelected(); track tag.id) {
            <mat-chip-row
              matChipRemove
              [removable]="true"
              (removed)="onRemoveTag(tag)"
            >
              {{ tag.name }}
              <ion-icon matChipTrailingIcon name="close-outline" />
            </mat-chip-row>
          }
          <input
            #tagInput
            [formControl]="tagInputControl"
            [matAutocomplete]="autocompleteTags"
            [matChipInputFor]="tagsChipList"
            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
          />
        </mat-chip-grid>
        <mat-autocomplete
          #autocompleteTags="matAutocomplete"
          (optionSelected)="onAddTag($event)"
        >
          @for (tag of filteredOptions | async; track tag.id) {
            <mat-option [value]="tag.id">
              {{ tag.name }}
            </mat-option>
          }

          @if (hasPermissionToCreateTag && tagInputControl.value) {
            <mat-option [value]="tagInputControl.value.trim()">
              <span class="align-items-center d-flex">
                <ion-icon class="mr-2" name="add-circle-outline" />
                <ng-container i18n>Create</ng-container> "{{
                  tagInputControl.value.trim()
                }}"
              </span>
            </mat-option>
          }
        </mat-autocomplete>
      </mat-form-field>
    }
  </div>
</div>
