﻿<div style="margin: 10px">
    <script type="text/template" id="colTip">
        Email: {{:EmailAddress }} Work No: {{:WorkNumber }} 
    </script>
    <form role="form">
        <!-- ko with: filter -->
        <div class="listFilter larger-font">
            <div class="form-group" style="width: 110px">
                <label class="control-label">
                    From
                </label>
                <input type="text" class="required" data-bind="ejDatePicker: { value: From, maxDate: $root.maxDate, dateFormat: 'dd/MM/yyyy', width: '100%' }" />
            </div>
            <div class="form-group" style="width: 110px">
                <label class="control-label">
                    To
                </label>
                <input type="text" class="required" data-bind="ejDatePicker: { value: To, minDate: From, maxDate: $root.maxDate, dateFormat: 'dd/MM/yyyy', width: '100%' }" />
            </div>
            <div class="form-group" style="width: 180px">
                <label class="control-label">
                    Status
                </label>
                <input type="text" id="aclStatusFilter" data-bind="ejAutocomplete: { dataSource: $root.statuses, selectValueByKey: StatusId, width: '100%', fields: { key: 'StatusId', text: 'Description' }, allowSorting: false, watermarkText: 'All Statuses', enableAutoFill: true, showPopupButton: true, highlightSearch: true }" />
            </div>
            <div class="form-group" style="margin-left: 10px;">
                <div class="radio">
                    <div class="radio">
                        <input type="radio" name="radState" id="queryListFilterState1" value="1" data-bind="ejRadioButton: { checked: State }" /><label for="queryListFilterState1">Current</label></div>
                    <div class="radio">
                        <input type="radio" name="radState" id="queryListFilterState2" value="2" data-bind="ejRadioButton: { checked: State }" /><label for="queryListFilterState2">Resolved</label></div>
                </div>
            </div>
            <div style="width: 180px; display: inline-block; margin-left: 20px; vertical-align: top">
                <input type="button" value="Filter" class="GlassyButton" data-bind="click: $root.refresh" style="height: 26px; margin-top: 13px" />
            </div>
        </div>
        <!-- /ko -->
    </form>
    <div class="ejGrid" style="font-size: 9pt;" data-bind="ejGrid: { dataSource: dataItems, allowResizing: true, allowSorting: true, allowPaging: true, selectedRowIndex: selectedRow, scrollSettings: { width: 1500, height: 350 }, pageSettings: { pageSize: 12 }, columns: gridColumns, sortSettings: { sortedColumns: [{ field: 'StatusChangedDate', direction: 'descending' }] } }"></div>

    <div style="width: 100%; margin-top: 10px" class="center">
        <input type="button" value="View Query" class="GlassyButton" data-bind="click: view" style="height: 26px; margin-bottom: 2px; margin-left: auto; margin-right: auto" />
    </div>
</div>
