<div class="l-title-group">
    <dl><dt>Filter Wizard</dt></dl>
    <button class="l-popup-close" (click)="onClickClose()"><i class="fas fa-times"></i></button>
</div>
<div class="l-contents-group">
    <div class="l-table">
        <div class="first-row col1 row-col-1-1">Path</div>
        <div class="first-row row-col-1-2">
            <img [src]="getIconFullPath(link?.sourceInfo.serviceType)"/>
            <div class="ellipsis">{{link?.sourceInfo.applicationName}}</div>
        </div>
        <div class="first-row row-col-1-3">
            <span class="fas fa-arrow-right"></span>
            <img [src]="getIconFullPath(link?.targetInfo.serviceType)"/>
            <div class="ellipsis">{{link?.targetInfo.applicationName}}</div>
        </div>
        <div class="col1 row-col-2-1">Agent</div>
        <div class="row-col-2-2">
            <ul class="l-application-list">
                <li [class.active]="isSelectedFromAgent('All')" (click)="onSelectFromAgent('All')">ALL</li>
                <li *ngFor="let agent of link?.fromAgent" class="ellipsis" [class.active]="isSelectedFromAgent(agent)" (click)="onSelectFromAgent(agent)">{{agent}}</li>
            </ul>
        </div>
        <div class="row-col-2-3">
            <ul class="l-application-list">
                <li [class.active]="isSelectedToAgent('All')" (click)="onSelectToAgent('All')">ALL</li>
                <li *ngFor="let agent of link?.toAgent" class="ellipsis" [class.active]="isSelectedToAgent(agent)" (click)="onSelectToAgent(agent)">{{agent}}</li>
            </ul>
        </div>
        <div class="row-col-3"></div>
        <div class="col1 row-col-4-1">URL Pattern</div>
        <div class="row-col-4-2">
            <div class="l-widget-group">
                <input placeholder="Request URL Pattern(/pinpoint/**/??.html)" type="text" [(ngModel)]="urlPattern">
            </div>
            <div class="l-widget-group">
                <table class="table l-pattern-guide" style="width: 100%">
                    <colgroup>
                        <col width="25%">
                        <col width="75%">
                    </colgroup>
                    <tbody>
                        <tr>
                            <td>*</td>
                            <td>Matchers zero or more characters</td>
                        </tr>
                        <tr>
                            <td>?</td>
                            <td>Matchers exactly one characters</td>
                        </tr>
                        <tr>
                            <td>**</td>
                            <td>Matchers zero or more directories</td>
                        </tr>
                        <tr>
                            <td>Example</td>
                            <td>
                                <div>/pinpoint/**/*.html</div>
                                <div>/pinpoint/??.html</div>
                                <div>/pinpoint/**/??.html</div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>                    
        </div>
        <div class="col1 row-col-5-1">Response Time</div>
        <div class="row-col-5-2 l-response-time">
            <nouislider 
                [connect]="true" 
                [min]="responseTimeMin" 
                [max]="responseTimeMax" 
                [step]="100" 
                [format]="getTimeFormatter()" 
                [tooltips]="[true, true]" 
                [(ngModel)]="responseTimeRange">
            </nouislider>
            <div class="l-range-info">
                <span>{{responseTimeMin.toLocaleString()}} ms</span>
                <span class="l-range-text">Range {{(responseTimeRange[1] - responseTimeRange[0]).toLocaleString()}} ms</span>
                <span>{{responseTimeMax.toLocaleString()}}+ ms</span>
            </div>
        </div>
        <div class="col1 row-col-6-1">Transaction Result</div>
        <div class="row-col-6-2">
            <div class="l-transaction-result">
                <button *ngFor="let type of resultType; let i = index" [class.active]="isSelectedResultType(i)" (click)="onSelectResultType(i)">{{type}}</button>
            </div>
        </div>
    </div>
</div>
<div class="l-buttons">
    <button class="btn active" (click)="onClickFilter()">Filter</button>
    <button class="btn l-cancel-button" (click)="onClickClose()">Cancel</button>
</div>
