<ng-container *transloco="let t; prefix: 'settingsUsers.contentRestrictions'">
<div class="content-restrictions-editor">
  @if (isEditing) {
    <div class="add-restriction-form">
      <div class="form-row">
        <div class="form-field">
          <label>{{ t('type') }}</label>
          <p-select
            [options]="restrictionTypes"
            [(ngModel)]="newRestriction.restrictionType"
            optionValue="value"
            [placeholder]="t('selectType')"
            appendTo="body">
            <ng-template let-item pTemplate="item">
              {{ item.translationKey | transloco }}
            </ng-template>
            <ng-template let-item pTemplate="selectedItem">
              {{ item.translationKey | transloco }}
            </ng-template>
          </p-select>
        </div>
        <div class="form-field">
          <label>{{ t('mode') }}</label>
          <p-select
            [options]="restrictionModes"
            [(ngModel)]="newRestriction.mode"
            optionValue="value"
            [placeholder]="t('selectMode')"
            appendTo="body">
            <ng-template let-item pTemplate="item">
              {{ item.translationKey | transloco }}
            </ng-template>
            <ng-template let-item pTemplate="selectedItem">
              {{ item.translationKey | transloco }}
            </ng-template>
          </p-select>
        </div>
        <div class="form-field form-field-wide">
          <label>{{ t('value') }}</label>
          <p-select
            [options]="getValueOptions()"
            [(ngModel)]="newRestriction.value"
            optionLabel="label"
            optionValue="value"
            [placeholder]="t('selectValue')"
            [filter]="true"
            [filterPlaceholder]="t('searchFilter')"
            appendTo="body">
          </p-select>
        </div>
        <div class="form-field form-field-button">
          <p-button
            icon="pi pi-plus"
            severity="success"
            [outlined]="true"
            (onClick)="addRestriction()"
            [pTooltip]="t('addTooltip')">
          </p-button>
        </div>
      </div>
    </div>
  }

  @if (restrictions.length === 0) {
    <div class="empty-state">
      <i class="pi pi-check-circle"></i>
      <p>{{ t('emptyTitle') }}</p>
      <span class="empty-hint">{{ t('emptyHint') }}</span>
    </div>
  } @else {
    <div class="restrictions-list">
      @if (getExcludeRestrictions().length > 0) {
        <div class="restrictions-group">
          <h5 class="group-title">
            <i class="pi pi-ban"></i>
            {{ t('excludeTitle') }}
          </h5>
          <p class="group-description">{{ t('excludeDesc') }}</p>
          <div class="restrictions-chips">
            @for (restriction of getExcludeRestrictions(); track restriction.id) {
              <div class="restriction-chip mode-exclude">
                <span class="chip-type">{{ getRestrictionTypeLabel(restriction.restrictionType) }}</span>
                <span class="chip-value">{{ restriction.value }}</span>
                @if (isEditing) {
                  <button class="chip-remove" (click)="removeRestriction(restriction)">
                    <i class="pi pi-times"></i>
                  </button>
                }
              </div>
            }
          </div>
        </div>
      }

      @if (getAllowOnlyRestrictions().length > 0) {
        <div class="restrictions-group">
          <h5 class="group-title">
            <i class="pi pi-check"></i>
            {{ t('allowOnlyTitle') }}
          </h5>
          <p class="group-description">{{ t('allowOnlyDesc') }}</p>
          <div class="restrictions-chips">
            @for (restriction of getAllowOnlyRestrictions(); track restriction.id) {
              <div class="restriction-chip mode-allow">
                <span class="chip-type">{{ getRestrictionTypeLabel(restriction.restrictionType) }}</span>
                <span class="chip-value">{{ restriction.value }}</span>
                @if (isEditing) {
                  <button class="chip-remove" (click)="removeRestriction(restriction)">
                    <i class="pi pi-times"></i>
                  </button>
                }
              </div>
            }
          </div>
        </div>
      }
    </div>
  }

  <div class="restrictions-info">
    <i class="pi pi-info-circle"></i>
    <span>{{ t('infoNote') }}</span>
  </div>
</div>
</ng-container>
