
<table>
    <tr>
        <td>
            Executions:
        </td>
        <td>
            <select [(ngModel)]="selectedExecutionID">
                <option *ngFor="let execution of executions" [value]="execution.execution.id">{{execution.project.title}} - {{execution.execution.id}}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>
            Available Types:
        </td>
        <td>
            <select [(ngModel)]="selectedTypeDiscriminator">
                <option *ngFor="let type of types" [value]="type.discriminator">{{type.className}} - {{type.discriminator}}</option>
            </select>
        </td>
    </tr>
    <tr>
        <td></td>
        <td>
            <button (click)="search()">Run Query</button>
        </td>
    </tr>
</table>

<h1 *ngIf="errorText" style="color: red">
    {{errorText}}
</h1>

<table style="width: 100%" class="table table-striped table-bordered table-hover">
    <tr>
        <th *ngFor="let columnName of resultColumns">
            {{columnName}}
        </th>
        <th>Vertices in</th>
        <th>Vertices out</th>
    </tr>
    <tr *ngFor="let row of resultRows">
        <td *ngFor="let propertyName of resultColumns">
            {{row[propertyName]}}
        </td>
        <td>
            <ul>
                <li *ngFor="let verticeIn of resultVerticesIn">
                    <a href="#" (click)="browseResults(row, verticeIn, 'IN')">{{verticeIn}}</a>
                </li>
            </ul>
        </td>
        <td>
            <ul>
                <li *ngFor="let verticeOut of resultVerticesOut">
                    <a href="#" (click)="browseResults(row, verticeOut, 'OUT')">{{verticeOut}}</a>
                </li>
            </ul>
        </td>
    </tr>
</table>
