<div class="container">
  <div class="row">
    <div class="col">
      <h2 class="d-none d-sm-block h3 mb-3 text-center">X-ray</h2>
      <p i18n>
        Ghostfolio X-ray uses static analysis to uncover potential issues and
        risks in your portfolio. Adjust the rules below and set custom
        thresholds to align with your personal investment strategy.
      </p>
      <div class="d-flex pb-3">
        @if (isLoading) {
          <div class="d-flex">
            <ngx-skeleton-loader
              animation="pulse"
              class="mr-2"
              [theme]="{
                height: '2rem',
                width: '2rem'
              }"
            />
            <ngx-skeleton-loader
              animation="pulse"
              class="mt-2 mb-1"
              [theme]="{
                height: '1rem',
                width: '15rem'
              }"
            />
          </div>
        } @else {
          <div
            class="align-items-center d-flex icon-container mr-2 px-2"
            [ngClass]="{
              okay:
                statistics?.rulesFulfilledCount ===
                statistics?.rulesActiveCount,
              warn:
                statistics?.rulesFulfilledCount !== statistics?.rulesActiveCount
            }"
          >
            @if (
              statistics?.rulesActiveCount === 0 ||
              statistics?.rulesFulfilledCount === 0
            ) {
              <ion-icon class="text-muted" name="remove-circle-outline" />
            } @else if (
              statistics?.rulesFulfilledCount === statistics?.rulesActiveCount
            ) {
              <ion-icon name="checkmark-circle-outline" />
            } @else {
              <ion-icon name="warning-outline" />
            }
          </div>
          <div class="d-flex align-items-center">
            <ng-container>{{ statistics?.rulesFulfilledCount }} </ng-container>
            <ng-container i18n>out of</ng-container>
            {{ statistics?.rulesActiveCount }}
            <ng-container i18n>rules align with your portfolio.</ng-container>
          </div>
        }
      </div>
      @for (category of categories; track category.key) {
        <div
          class="mb-4"
          [ngClass]="{ 'd-none': category.rules?.length === 0 }"
        >
          <h4 class="align-items-center d-flex m-0">
            <span>{{ category.name }}</span>
            @if (user?.subscription?.type === 'Basic') {
              <gf-premium-indicator class="ml-1" />
            }
          </h4>
          <gf-rules
            [categoryName]="category.name"
            [hasPermissionToUpdateUserSettings]="
              !hasImpersonationId && hasPermissionToUpdateUserSettings
            "
            [isLoading]="isLoading"
            [locale]="user?.settings?.locale"
            [rules]="category.rules"
            [settings]="user?.settings?.xRayRules"
            (rulesUpdated)="onRulesUpdated($event)"
          />
        </div>
      }
      @if (inactiveRules?.length > 0) {
        <div>
          <h4 class="m-0" i18n>Inactive</h4>
          <gf-rules
            [hasPermissionToUpdateUserSettings]="
              !hasImpersonationId && hasPermissionToUpdateUserSettings
            "
            [isLoading]="isLoading"
            [locale]="user?.settings?.locale"
            [rules]="inactiveRules"
            [settings]="user?.settings?.xRayRules"
            (rulesUpdated)="onRulesUpdated($event)"
          />
        </div>
      }
    </div>
  </div>
</div>
