<!DOCTYPE html>
<html lang="en">
  <script src="app/libs/requirejs/require.js"></script>
  <body>
    <div ng-controller="QueryController" ng-show="businessProperties"><!--  ng-keydown="enableZoom($event)" ng-keyup="disableZoom($event)" tabindex="0"> -->
      <div class="row">&nbsp;</div>
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
          <div>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                  <div class="col-lg-5 col-md-5 col-sm-6 col-xs-6" style="width:250px;margin-left:10px">
                    <div class="btn-group bootstrap-select">
    	              <button ark-select type="button" class="btn btn-default ark-dropdown-toggle selectpicker" ng-model="queryType" 
    	                ark-options="option as option for option in ['Customer ID', 'Anonymous ID', 'Service ID', 'State ID', 'Task ID']" ng-hide="allowedKeys===[]">
    	              </button>
                    </div>
                  </div>
                  <div class="col-lg-5 col-md-5 col-sm-2 col-xs-1" style="width:calc(100% - 380px)">
                    <input type="text" id="context-query" ng-init="inputClass='form-control'" ng-model="entityId" ng-keypress="queryIfEnter($event)" 
                      ng-class="inputClass" ng-focus="inputFocused = true" ng-blur="inputFocused = false" placeholder="Search">
                  	<ark-searchable-input input-id="context-query" input-data="queryHistory" input-model="entityId" show-if="inputFocused"></ark-searchable-input>
                  </div>
                  <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2" ng-show="queryType !== 'State ID' && queryType !== 'Task ID'" style="width:75px;">
                    <button type="button" id="query-button" ng-click="tabData.queryById()" class="btn btn-default">Search</button>
                  </div>
                </div>
                <div class="row" ng-show="queryType === 'State ID' || queryType === 'Task ID'">
                  <div class="col-lg-2 col-md-2 col-sm-3 col-xs-4" style="width:260px;text-align:right">
                    <label for="service-id-input" >Service ID:</label>
                  </div>
                  <div class="col-lg-9 col-md-9 col-sm-7 col-xs-6" style="width:calc(100% - 380px)">
                    <input type="text" id="context-query" ng-init="inputClass='form-control'" ng-model="serviceId" ng-keypress="queryIfEnter($event)" 
                    ng-class="inputClass" placeholder="Search">
                  </div>
                  <div class="col-lg-1 col-md-1 col-sm-2 col-xs-2" style="width:75px;">
                    <button type="button" id="query-button" ng-click="tabData.queryById()" class="btn btn-default">Search</button>
                  </div>
                </div>
                <time-filter></time-filter>
                <span class="help-block" id="context-help" style="margin-left:10px">{{queryFeedback}}</span>
            </form>
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="width:calc(50% - 15px)">
          <div ng-show="tabData.id">
            <h2>&nbsp;&nbsp;&nbsp;&nbsp;{{tabData.node.type}}</h2>
            <table class="table table-default" ng-if="tabData.node">
              <tbody>
                <tr>
                  <th>ID</th>
                  <td>{{tabData.id}}</td>
                </tr>
                <tr>
                  <th>Type</th>
                  <td ng-bind="getAttribute()[tabData.type] + ' (' + tabData.type  + ')'">{{tabData.type}}</td>
                </tr>
                <tr>
                  <th>Time started</th>
                  <td>{{tabData.timeStarted}}</td>
                </tr>
                <tr ng-repeat="(key, value) in tabData.node.started">
                  <th ng-if="key !== 'timestamp'" ng-bind="formatKey(key, '_', ' ') + ' (Started)'"></th>
                  <td ng-if="key !== 'timestamp' && !tabData.propertyAttributes[tabData.node.type + '.' + key]">{{value}}</td>
                  <td ng-if="key !== 'timestamp' && tabData.propertyAttributes[tabData.node.type + '.' + key]" ng-bind="propertyAttributes[tabData.node.type + '.' + key][value] + ' (' + value  +')'"></td>
                </tr>
                <tr>
                  <th>Has completed</th>
                  <td>{{tabData.completed}}</td>
                </tr>
                <tr ng-if="tabData.completed" >
                  <th>Time completed</th>
                  <td>{{tabData.timeCompleted}}</td>
                </tr>
                <tr ng-repeat="(key, value) in tabData.node.completed">
                  <th ng-if="key !== 'timestamp'" ng-bind="formatKey(key, '_', ' ') + ' (Completed)'"></th>
                  <td ng-if="key !== 'timestamp' && !tabData.propertyAttributes[tabData.node.type + '.' + key]">{{value}}</td>
                  <td ng-if="key !== 'timestamp' && tabData.propertyAttributes[tabData.node.type + '.' + key]" ng-bind="propertyAttributes[tabData.node.type + '.' + key][value] + ' (' + value  +')'"></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <ark-side-tabs tabs-list="tabsList" switch-reload="true" parent-data="tabData" style="height:100%"></ark-side-tabs>
        </div>
      </div>
    </div>
  </body>
</html>
