<div class="header-bar">
    <h1 i18n="Header" style="margin-bottom: 25px">Rules Configuration</h1>

    <div class="rules-options">
        <div [hidden]="rescanInProgress" class="action-button">
            <button class="btn btn-primary" (click)="displayAddRulesPathForm()" i18n="Add">Add</button>
        </div>
        <div class="show-all-checkbox">
            <input id="show-all-rules" type="checkbox" [(ngModel)]="showAllRules"/>
            <label for="show-all-rules">Show all rules</label>
        </div>
        <wu-toolbar
                [filterConfiguration]="filter"
                [sortConfiguration]="sort"
                (sortChange)="updateSort()"
                (filterChange)="updateFilters()"
        >
        </wu-toolbar>
    </div>
</div>
<wu-active-filters-list *ngIf="isFilterActive()"
                        [(activeFilters)]="filter.selectedFilters"
                        [countResults]="filter.countFilteredItems"
                        [getLabel]="filter.getLabel"
                        (activeFiltersChange)="updateFilters()"
></wu-active-filters-list>

<ng-template [ngIf]="rescanInProgress">
    <h1>
        <span class="status-icon"><span aria-hidden="true" class="spinner spinner-xs spinner-inline"></span></span>
        Scanning rules...
    </h1>
</ng-template>

<ng-template [ngIf]="!rescanInProgress && configuration != null && configuration.rulesPaths != null && configuration.rulesPaths.length > 0">
    <div class="panel-group">
        <div *ngFor="let rulePath of sortedPaths" id="rulePathPanel_{{rulePath.id}}" class="panel panel-default">

            <!-- Header for each set of rules. -->
            <div class="panel-heading">
                <h2 class="panel-title">
                    <span class="pointer pull-right" (click)="confirmRemoveRules(rulePath)" *ngIf="rulePath.rulesPathType != 'SYSTEM_PROVIDED'" title="Delete">
                        <span class="glyphicon glyphicon-trash"></span>
                    </span>
                    <a data-toggle="collapse"
                       [attr.data-parent]="'#rulePathPanel_' + rulePath.id"
                       href="#collapse_{{rulePath.id}}"
                    >
                        <span i18n>Rules:</span> {{rulesShortPath(rulePath)}}
                    </a>
                </h2>
            </div>

            <!-- Area that collapses when the header is clicked. -->
            <div id="collapse_{{rulePath.id}}"
                 class="panel-body panel-collapse collapse in"
            >
                <!-- Angular doesn't know this attribute. Fortunately it works just with the 'in' class.
                     aria-expanded="{{(rulePath.rulesPathType == 'SYSTEM_PROVIDED') ? 'true' : 'false'}}"
                -->

                <div *ngIf="!areRulesLoaded(rulePath)">
                    <h3 i18n>Loading rules...</h3>
                </div>

                <div *ngIf="areRulesLoaded(rulePath) && !hasFileBasedProviders(rulePath)">
                    <h3 i18n>No rules found.</h3>
                </div>

                <div *ngIf="rulePath.loadError">
                 <p>Invalid rule files have been detected.</p>
                    <p>Please make sure that your rule files comply to the
                         <a href="http://windup.jboss.org/schema/windup-jboss-ruleset.xsd" target="_blank">XSD rule format <i class="fa fa-external-link"></i></a>.
                          See more details in <a href="http://windup.jboss.org/rules-guide.html" target="_blank">Rules guide <i class="fa fa-external-link"></i></a></p>
                 <p class="alert alert-danger" style="white-space:pre-line;" role="alert" [innerHtml]="rulePath.loadError"></p>
                </div>

                <!-- List of rules. -->
                <div *ngIf="getRuleProvidersByPath(rulePath).length > 0 && getFilteredRuleProvidersByPath(rulePath).length === 0; else rulesList" class="no-matches">
                    <ng-container i18n>The current filter is hiding all rules.</ng-container>
                    <a href="javascript:void(0)" (click)="removeFilters()" i18n>Remove</a> <ng-container i18n>the filter.</ng-container>
                </div>
                <ng-template #rulesList>
                    <div class="rulesList list-group list-view-pf list-view-pf-view" *ngIf="hasFileBasedProviders(rulePath)" style="margin-top: 0px; border: none;">
                        <div *ngFor="let ruleProvider of getFilteredRuleProvidersByPath(rulePath)" class="list-group-item" id="group-item-{{ruleProvider.id}}">
                            <div class="list-group-item-header" (click)="clickHeader($event, ruleProvider)">
                                <div class="list-view-pf-expand">
                                    <span class="fa fa-angle-right" id="span-{{ruleProvider.id}}" [style.marginTop.px]="getRuleProviderMarginTop(ruleProvider)"></span>
                                </div>
                                <!-- If we need a checkbox for actions / global disabling.
                                <div class="list-view-pf-checkbox">
                                    <input type="checkbox">
                                </div>
                                -->
                                <div class="list-view-pf-actions" style="margin-left: 5px;">
                                    <!-- I just comment this button in case we'll use it again
                                    <button class="btn btn-default" [disabled]="ruleProvider.rules.length < 1" (click)="displayRules(ruleProvider, $event)" i18n="Button">Show rules</button>
                                    -->
                                </div>
                                <div class="list-view-pf-main-info">
                                    <div class="list-view-pf-left">
                                        <span class="fa fa-puzzle-piece list-view-pf-icon-sm"></span>
                                    </div>
                                    <div class="list-view-pf-body">
                                        <div class="list-view-pf-description">
                                            <div class="list-group-item-heading"> {{ruleProvider.providerID}} </div>
                                            <div class="list-group-item-text">
                                                <div style="width: 16pt; position: absolute;">
                                                    <span class="fa fa-file-code-o list-view-pf-icon-md" style="font-size: 16pt;"></span>
                                                </div>
                                                <div style="margin-left: 25pt; ">
                                                    <div>{{ruleProvider.origin}}</div>
                                                    <div *ngIf="ruleProvider.loadError" style="font-weight: bold">
                                                        {{ruleProvider.loadError}}
                                                    </div>

                                                    <div *ngIf="ruleProvider.sources.length > 0">
                                                        Source technologies:
                                                        <wu-technology *ngFor="let source of ruleProvider.sources" [technology]="source" class="techLabel"></wu-technology>
                                                    </div>
                                                    <div *ngIf="ruleProvider.targets.length > 0">
                                                        Target technologies:
                                                        <wu-technology *ngFor="let target of ruleProvider.targets" [technology]="target" class="techLabel"></wu-technology>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="list-view-pf-additional-info">
                                            <div class="list-view-pf-additional-info-item">
                                                <span class="fa fa-list-ol"></span>
                                                <strong>{{ruleProvider.rules ? ruleProvider.rules.length : 0}}</strong> <span i18n="Count, e.g. 5 Rules">Rules</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="list-group-item-container container-fluid hidden" id="container-{{ruleProvider.id}}" style="padding-top: 0px;">
                                <div class="row">
                                    <div class="modal-body">
                                        <ng-container *ngIf="ruleProvider.rules.length > 0; else elseNoRules">
                                            <ng-container *ngIf="ruleProvider.rules.length > 1">
                                                <label>Go to rule:</label>
                                                <select #selectedRule class="form-control" name="ruleSelect" style="width: auto; display: inline;"
                                                        (change)="scrollToRule(selectedRule.value)"
                                                        id="select-{{ruleProvider.id}}">
                                                    <option value="" disabled selected hidden>Select a rule</option>
                                                    <option *ngFor="let ruleEntity of ruleProvider.rules; let i = index" [value]="ruleEntity.id">{{getLabelForRuleID(ruleEntity.ruleID, ruleProvider.providerID, i)}}</option>
                                                </select>
                                            </ng-container>
                                            <div *ngFor="let ruleEntity of ruleProvider.rules; let i = index">
                                                <h4 id="{{ruleEntity.id}}">{{getLabelForRuleID(ruleEntity.ruleID, ruleProvider.providerID, i)}}
                                                    <i class="fa fa-angle-up fa-pull-right fa-border" aria-hidden="true"
                                                       (click)="scrollToRuleSetHeader(ruleProvider.id)"
                                                       title="Go to rules set header"></i>
                                                </h4>
                                                <pre (load)="prettyPrint()" class="prettyprint" style="white-space: pre-wrap">{{ruleEntity.ruleContents}}</pre>
                                            </div>
                                        </ng-container>
                                        <ng-template #elseNoRules>
                                            <span style="font-style: italic">No Rules Defined</span>
                                        </ng-template>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </ng-template>
            </div>
        </div>
    </div>
</ng-template>

<wu-rules-modal></wu-rules-modal>
<wu-add-rules-path-modal [configuration]="configuration" (configurationSaved)="configurationUpdated($event)"></wu-add-rules-path-modal>
<wu-confirmation-modal
        #removeRulesConfirmationModal
        [id]="'deleteRulesConfirmationDialog'"
        [title]="'Confirm Rule Removal'"
        [body]="'Are you sure you want to remove the rules from ...?'"
>
</wu-confirmation-modal>
