<h4 mat-dialog-title><ng-container i18n="Editing category dialog title">Editing category</ng-container>&nbsp;{{category['name']}}</h4>

<mat-dialog-content style="max-height: 50vh">
  <mat-form-field style="width: 250px; margin-bottom: 5px;">
    <mat-label i18n="Category name">Name</mat-label>
    <input matInput [(ngModel)]="category['name']" required>
  </mat-form-field>

  <mat-divider></mat-divider>

  <h6 style="margin-top: 20px;" i18n="Rules">Rules</h6>

  <mat-list>
    @for (rule of category['rules']; track rule; let i = $index) {
      <mat-list-item>
        <mat-form-field [style.visibility]="i === 0 ? 'hidden' : null" class="operator-select">
          <mat-select [disabled]="i === 0" [(ngModel)]="rule['preceding_operator']">
            <mat-option value="or">OR</mat-option>
            <mat-option value="and">AND</mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field class="property-select">
          <mat-select [(ngModel)]="rule['property']">
            @for (propertyOption of propertyOptions; track propertyOption) {
              <mat-option [value]="propertyOption.value">{{propertyOption.label}}</mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field class="comparator-select">
          <mat-select [(ngModel)]="rule['comparator']">
            @for (comparatorOption of comparatorOptions; track comparatorOption) {
              <mat-option [value]="comparatorOption.value">{{comparatorOption.label}}</mat-option>
            }
          </mat-select>
        </mat-form-field>
        <mat-form-field class="value-input">
          <input matInput [(ngModel)]="rule['value']">
        </mat-form-field>
        <span class="rule-buttons">
          <button [disabled]="i === category['rules'].length-1" (click)="swapRules(i, i+1)" mat-icon-button><mat-icon>arrow_downward</mat-icon></button>
          <button [disabled]="i === 0" (click)="swapRules(i, i-1)" mat-icon-button><mat-icon>arrow_upward</mat-icon></button>
          <button (click)="removeRule(i)" mat-icon-button><mat-icon>cancel</mat-icon></button>
        </span>
      </mat-list-item>
    }
  </mat-list>

  <button style="margin-bottom: 8px;" mat-icon-button (click)="addNewRule()" matTooltip="Add new rule" i18n-matTooltip="Add new rule tooltip"><mat-icon>add</mat-icon></button>

  <mat-divider></mat-divider>

  <mat-form-field style="width: 250px; margin-top: 10px;">
    <mat-label i18n="Custom file output">Custom file output</mat-label>
    <input matInput [(ngModel)]="category['custom_output']">
    <mat-hint>
      <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#output-template">
        <ng-container i18n="Custom output template documentation link">Documentation</ng-container></a>.
        <ng-container i18n="Custom Output input hint">Path is relative to the config download path. Don't include extension.</ng-container>
      </mat-hint>
    </mat-form-field>
  </mat-dialog-content>

  <mat-dialog-actions>
    <button mat-button mat-dialog-close><ng-container i18n="Cancel">Cancel</ng-container></button>

    <button mat-button [disabled]="categoryChanged()" type="submit" (click)="saveClicked()"><ng-container i18n="Save button">Save</ng-container></button>
    @if (updating) {
      <div class="mat-spinner">
        <mat-spinner [diameter]="25"></mat-spinner>
      </div>
    }
  </mat-dialog-actions>