src/app/dialogs/edit-category-dialog/edit-category-dialog.component.html

<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>
        <mat-list-item *ngFor="let rule of category['rules']; let i = index">
            <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']">
                    <mat-option *ngFor="let propertyOption of propertyOptions" [value]="propertyOption.value">{{propertyOption.label}}</mat-option>
                </mat-select>
            </mat-form-field>
            <mat-form-field class="comparator-select">
                <mat-select [(ngModel)]="rule['comparator']">
                    <mat-option *ngFor="let comparatorOption of comparatorOptions" [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>
    <div class="mat-spinner" *ngIf="updating">
      <mat-spinner [diameter]="25"></mat-spinner>
    </div>
</mat-dialog-actions>