@using HeuristicLab.Clients.Hive.WebJobManager.ViewModels;
@model QueryVM
<div id="userId" style="display:none">@ViewBag.SessionId</div>
<script src="~/js/hubs/queryhubber.js"></script>
<div ng-app="wjmquery" ng-controller="queryCtrl" data-ng-init="init()" class="animated fadeIn">

    <!--Templates for drag and drop, Do not move down (initalization)-->
    <!--LIST-->
    <script type="text/ng-template" id="list.html">
        <ul dnd-list="list" style="min-height:200px">
            <li ng-repeat="item in list"
                style="border-radius:25px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;color:white; margin-top:3px;"
                dnd-draggable="item"
                dnd-effect-allowed="move"
                dnd-moved="list.splice($index, 1)"
                dnd-selected="models.selected = item"
                ng-class="{selected: models.selected === item}"
                ng-include="item.type + '.html'"
                ng-style="{'background-color': item.color}">
            </li>
        </ul>
    </script>
    <!--CONTAINER (And/Or)-->
    <script type="text/ng-template" id="container.html">
        <div class="container-element box box-blue ">
            <h3>{{item.name}}</h3>
            <div class="column" ng-repeat="list in item.columns" ng-include="'list.html'"></div>
            <div class="clearfix"></div>
        </div>
    </script>

    <!--ITEMS (parameters)-->
    <script type="text/ng-template" id="item.html">
        <div class="item row animated fadeIn"
             style="color:black;text-shadow:none; border-radius:25px">
            <p class="col-md-5"
               style="word-break:break-word">
                {{item.Label}}
            </p>
            <span ng-if="item.CompareType != 'HeuristicLab.Clients.OKB.Query.EqualityComparison'" style="margin-left:10px">
                <select class="col-md-2"
                        name="comparisonSelect"
                        id="comparisonSelect"
                        style="margin-right:10px;"
                        ng-model="item.Comparison">
                    <option ng-repeat="comp in item.ComparisonValues"
                            value="{{comp.value}}">
                        {{comp.text}}
                    </option>
                </select>
                <select class="col-md-4 col-sm-10" ng-if="item.AvailableValues != undefined" name="Values" ng-model="item.Value" style="margin-left:10px">
                    <option ng-repeat="val in item.AvailableValues" value="{{val}}">{{val}}</option>
                </select>
                <input class="col-md-4" ng-if="item.AvailableValues ===undefined" ng-model="item.Value" type="text" />
            </span>
        </div>
    </script>


    @Html.Partial("Navbar", new NavbarViewModel("Query", Model.User))

    @Html.Partial("_ErrorMessage", Model.message)

    <div class="row" style="margin-top:20px; margin-left:20px">


        <div class="col-sm-8">
            <div class="trashcan box box-grey box-padding pull-right ">
                <!-- If you use [] as referenced list, the dropped elements will be lost -->
                <ul dnd-list="[]"
                    style="border:dashed 2px darkred;padding:20px; padding-left:40px;padding-right:40px">
                    <li><i class="fa fa-trash fa-4x"></i></li>
                </ul>
            </div>
            <h2>
                OKB Query builder <span ng-repeat="item in models.templates"
                                        dnd-draggable="item"
                                        dnd-effect-allowed="copy"
                                        dnd-copied="item.id = item.id + 1">
                    <a class="btn btn-default btn-lg"
                       ng-style="{'background-color': item.color}"
                       style="color:white;text-shadow:none">
                        {{item.name}}
                    </a>
                </span>
            </h2>

            <div ng-if="filters === undefined"
                 class="animated jello infinite"
                 style="margin-top:200px; text-align:center">
                <i class="fa fa-4x fa-hourglass-half fa-spin"></i>
            </div>
            <div ng-if="filters != undefined"
                 class="animated"
                 ng-class="{ fadeIn: filters }"
                 ng-repeat="(zone, list) in models.dropzones">
                <div class="dropzone box box-yellow">
                    <!-- The dropzone also uses the list template -->
                    <h3>{{zone}}</h3>
                    <div ng-include="'list.html'"></div>
                </div>
            </div>
        </div>
        <div ng-if="filters != undefined"
             class="col-sm-4 animated"
             ng-class="{ fadeIn: filters }">
            <label class="pull-right">Search: <input ng-init="searchText = ''" ng-model="searchText"></label>
            <div class="btn-group-vertical pull-right" role="group"
                 style="overflow-y:scroll;overflow-x:hidden;height:600px;word-break:break-word">

                <a ng-repeat="item in filters  |filter:{Label:searchText} track by $index"
                   draggable="true"
                   dnd-draggable="item"
                   dnd-effect-allowed="copy"
                   dnd-copied="fil.type = 'item'"
                   class="btn btn-default"
                   ng-class="{'active': item.Label == selectedfilter.Label}"
                   style="text-shadow:none;box-shadow:none; white-space:normal">{{item.Label}}</a>

                <!---->
            </div>
        </div>
    </div>
    <div class="row animated"
         style="text-align:center;margin:20px;"
         ng-class="{ fadeInUp: filters }"
         ng-if="filters != undefined">
        <div class="btn btn-success btn-lg btn-block row"
             style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;"
             ng-class="{disabled: sendingQuery}"
             ng-click="sendQuery()">
            <i class="fa fa-send" ng-class="{'fa-spin': sendingQuery}"></i>
            <span ng-if="!sendingQuery && !results">Send query</span><span ng-if="sendingQuery">Querying server</span>
            <span ng-if="results != undefined ">Resend query</span>
        </div>
        <div style="text-align:center" ng-if="senderQuery">
            <i class="fa fa-hourglass-2 fa-5x fa-spin"></i>
        </div>
    </div>
    <div class="row"
         ng-if="results != undefined && results.length != 0"
         style="margin:20px"
         id="allresults">
        <div class="col-sm-4" style="margin-bottom:200px">
            <div class="btn-group btn-group-justified btn-block"
                 role="group" style="margin-bottom:-4px">

                <a class="btn btn-info btn-lg disabled"
                   style="width:6%;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
                            text-shadow:2px 2px black;">
                    <i class="fa fa-list-ol"></i> Results
                </a>
            </div>
            <div class="btn-group-vertical btn-block">
                <a class="btn  btn-default"
                   style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);"
                   ng-repeat="r in results track by $index"
                   ng-click="fetchResult($index)">
                    Run {{r.Id}}
                </a>

            </div>
        </div>
        <p ng-if="loadingResult"
           class="text-center">
            <br /><br /><br /><br /><br /><br /><br />
            <i class="fa fa-hourglass-half fa-spin fa-3x">
            </i>
        </p>
        <div class="col-sm-8" ng-if="loadingResult != undefined && !loadingResult && activeResult"
             id="result"
             style="padding:5px; padding-left:10px;">
            <div class="panel panel-default"
                 style="border-width:2px!important;padding:0;
                        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);">

                <div class="panel-heading">
                    <h3>Run {{activeResult.Id}} - {{activeResult.CreatedDate | date:'hh:mm dd/MM/yyyy'}}</h3>

                </div>
                <div class="panel-body">
                    <h4>Results</h4>
                    <table class="table ">
                        <thead>
                            <tr>
                                <th>Result name</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tr ng-repeat="res in activeResult.ResultValues">
                            <td>
                                {{res.Name}}
                            </td>
                            <td style="word-break:break-word">
                                {{res.Value | limitTo : 20 }}
                            </td>
                        </tr>
                    </table>
                    <h4>Parameters</h4>
                    <table class="table ">
                        <thead>
                            <tr>
                                <th>Parameter name</th>
                                <th>Value</th>
                            </tr>
                        </thead>
                        <tr ng-repeat="res in activeResult.ParameterValues">
                            <td>
                                {{res.Name}}
                            </td>
                            <td style="word-break:break-word">
                                {{res.Value | limitTo : 40 }}
                            </td>

                        </tr>

                    </table>
                </div>
            </div>
        </div>

    </div>
    <div class="row"
         ng-if="results != undefined && results.length === 0"
         style="margin:20px"
         id="allresults">
        <h2 style="text-align:center"><i class="fa fa-frown-o"></i> No results found</h2>
    </div>
</div>