<div class="state-icon-wrapper" (mouseenter)="onIconEnter($event)" (mouseleave)="onIconOrPanelLeave()">
    <i class="fa fa-exclamation-circle state-icon" [ngClass]="cssClass" @rollingLtoRVoidAnimation>
    </i>
</div>

<p-overlayPanel [appendTo]="'body'" [hideTransitionOptions]="'0s'" styleClass="no-offset">
    <div class="modal-container px-3 user-select-on" (mouseenter)="onPanelEnter()" (mouseleave)="onIconOrPanelLeave()">
        <!-- Restrictive conditions -->
        <article *ngIf="restrictiveConditions?.length">
            <h6 class="options-group-header labeled">
                Условия
            </h6>
            <ul class="sdi-list with-markers modal-list">
                <li *ngFor="let restrictiveCondition of restrictiveConditions">
                    <span [innerHTML]="restrictiveCondition"></span>
                </li>
            </ul>
        </article>

        <!-- Incompliant constraints and mask validation -->
        <article *ngIf="incompliantConstraints?.length || maskValidation">
            <h6 class="options-group-header labeled">
                Неудовлетворенные ограничения
            </h6>
            <ul class="sdi-list with-markers modal-list">
                <li *ngIf="maskValidation">
                    значение <b>{{maskValidation.value}}</b> не удовлетворяет маске <b>{{maskValidation.inputMask}}</b>
                </li>

                <li *ngFor="let constraint of incompliantConstraints">
                    <div *ngIf="constraint.tableId > 0; else valueConstraintTmpl" class="overflow-ellipsis">
                        <i class="fa fa-table sdi-icon info name-prefix"></i>
                        <a class="element-link" target="_blank" title="{{constraint.explanation}}"
                           routerLink="{{constraintRouterLink}}" [queryParams]="getConstraintQueryParams(constraint)">
                            {{constraint.explanation}}
                        </a>
                    </div>
                    <ng-template #valueConstraintTmpl>
                        <span [innerHTML]="constraint.explanation"></span>
                    </ng-template>
                </li>
            </ul>
        </article>
    </div>
</p-overlayPanel>