<mat-accordion multi>
  @if (inheritedRuleSetGroupingItems.length > 0) {
    <mat-expansion-panel [expanded]="true" class="aca-rule-list__item">
      <mat-expansion-panel-header class="aca-rule-list__item__header">
        <mat-panel-title>
          <span class="aca-rule-list__item__header__title">
            {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
            <mat-icon
              class="aca-rule-list__item__header__title__icon"
              [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
              info
            </mat-icon>
          </span>
        </mat-panel-title>
      </mat-expansion-panel-header>
      <aca-rule-list-grouping
        [items]="inheritedRuleSetGroupingItems"
        [selectedRule]="selectedRule"
        (selectRule)="onSelectRule($event)"
        (ruleEnabledChanged)="onRuleEnabledChanged($event)"
        (loadMoreRules)="onLoadMoreRules($event)"
        (loadMoreRuleSets)="onLoadMoreRuleSets()" />
    </mat-expansion-panel>
  }
  @if (mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked) {
    <mat-expansion-panel [expanded]="true" class="aca-rule-list__item">
      <mat-expansion-panel-header class="aca-rule-list__item__header">
        <mat-panel-title>
          <span class="aca-rule-list__item__header__title" data-automation-id="main-rule-set-title">
            @if (isMainRuleSetOwned) {
              {{ 'ACA_FOLDER_RULES.RULE_LIST.OWNED_RULES' | translate }}
            } @else {
              {{ 'ACA_FOLDER_RULES.RULE_LIST.LINKED_RULES' | translate }}
            }
          </span>

          @if (!isMainRuleSetOwned) {
            <mat-icon
              class="aca-rule-list__item__header__icon"
              tabindex="0"
              aria-hidden="false"
              [attr.aria-label]="'ACA_FOLDER_RULES.RULE_LIST.EDIT_LINK_LABEL' | translate"
              [attr.title]="'ACA_FOLDER_RULES.RULE_LIST.EDIT_LINK_LABEL' | translate"
              (keydown.enter)="onRuleSetEditLinkClicked($event)"
              (keydown.enter)="onRuleSetEditLinkClicked($event)"
              (click)="onRuleSetEditLinkClicked($event)">
              edit
            </mat-icon>
            <mat-icon
              class="aca-rule-list__item__header__icon"
              tabindex="0"
              aria-hidden="false"
              [attr.aria-label]="'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.TITLE' | translate"
              [attr.title]="'ACA_FOLDER_RULES.CONFIRMATION_DIALOG.DELETE_RULE_SET_LINK.TITLE' | translate"
              (keydown.enter)="onRuleSetUnlinkClicked($event)"
              (click)="onRuleSetUnlinkClicked($event)">
              link_off
            </mat-icon>
          }
        </mat-panel-title>

      </mat-expansion-panel-header>
      @if (mainRuleSetGroupingItems.length > 0) {
        <aca-rule-list-grouping
          [items]="mainRuleSetGroupingItems"
          [selectedRule]="selectedRule"
          [showEnabledToggles]="isMainRuleSetOwned"
          (selectRule)="onSelectRule($event)"
          (ruleEnabledChanged)="onRuleEnabledChanged($event)"
          (loadMoreRules)="onLoadMoreRules($event)" />
      } @else {
      <div class="aca-rule-list__item__all-linked-rules-are-disabled">
        {{ 'ACA_FOLDER_RULES.RULE_LIST.ALL_LINKED_RULES_ARE_DISABLED' | translate }}
        @if (mainRuleSet?.owningFolder?.id) {
          <button mat-stroked-button [routerLink]="['/nodes', mainRuleSet.owningFolder.id, 'rules']">
            {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.SEE_IN_FOLDER' | translate }}
          </button>
        }
      </div>
      }
    </mat-expansion-panel>
  }
</mat-accordion>
