{% extends "base.html" %}
{% load timeutil %}

{% block title %}{{ title }}{% endblock %}
{% block heading %}{{ title }}{% endblock %}
{% block pageid %}search{% endblock %}

{% block jscript %}

<link rel="stylesheet" type="text/css" media="screen"
      href="/gracedb-static/css/jqgrid/theme/jquery-ui.css"/>

<link rel="stylesheet" type="text/css" media="screen"
      href="/gracedb-static/css/jqgrid/theme/ui.all.css"/>

<!--
<link rel="stylesheet" type="text/css" media="screen"
      href="/gracedb-static/css/jqgrid/ui-lightness/jquery-ui-1.7.2.custom.css"/>
-->

<link rel="stylesheet" type="text/css" media="screen"
      href="/gracedb-static/css/jqgrid/ui.jqgrid.css"/>

<script src="/gracedb-static/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="/gracedb-static/js/grid.locale-en.js" type="text/javascript"></script>
<script src="/gracedb-static/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="/gracedb-static/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>


    <script type="text/javascript">
    <!--
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
    //-->
    </script>
    <script type="text/javascript">
    <!--
        $(document).ready(function(){
          $("#flex1").jqGrid
            (
            {
            sortable: true,
            url: '{% url search %}/flex?query={{rawquery}}',
            datatype: 'json',
            mtype: "GET",
            colNames : ["UID", "Labels", "Neighbors (+/-5sec)", "Group", "Type", "Event Time", "Links", "Submitted",
                       ],
            colModel : [
               {name : 'id',     index: 'id', width : 50, sortable : true, align: 'left', hidden: false},
               {name : 'labels', index: 'labels', width : 100, sortable : false, align: 'left'},
               {name : 'neighbors', index: 'neighbors', width : 100, sortable : false, align: 'left'},
               {name : 'group',  index: 'group', width : 50, sortable : false, align: 'left', hidden: true},
               {name : 'analysisType', index: 'analysisType', width : 90, sortable : true, align: 'right', hide: false},

               {name : 'gpstime', index: 'gpstime', width : 90, sortable : true, align: 'right'},
               {name : 'links',   index: 'links', width : 80, sortable : false, align: 'center'},
               {name : 'created', index: 'created', width : 100, sortable : true, align: 'right'},

                ],
            pager: '#pager1',
            rowNum:20,
            rowList:[10,20,30,40,50,75,100],
            sortname: 'id',
            sortorder: "desc",
            viewrecords: true,
            caption: 'Query Results',
            //forceFit: true,
            //height: '150px',
            height: 'auto',
            //loadui: 'enable',  // block, disable
            toolbar: [true, "top"],
            autowidth: true,
            }
            );   

          //$("#flex1").jqGrid('gridResize',{});
          //$("#flex1").jqGrid('gridResize',{ minWidth:350,maxWidth:800,minHeight:80, maxHeight:350 });
          $("#flex1").jqGrid('navGrid','#pager1',{search: false, edit:false,add:false,del:false});
          $("#t_flex1").append("<input type='button' value='Select Columns' style='height:20px;font-size:-3'/>");
          $("input","#t_flex1").click(function(){
            $("#flex1").jqGrid('setColumns');
            });

        });
    -->
    </script>
{% endblock %}


{% block content %}
<p>{{ message }}</p>

{% for field in form %}
{% endfor %}

{% if form %}
    <form action="{{ formAction }}" method="POST">
    <table>
        {{ form.as_table }}
        <tr><td/>
            <td>
                <a onClick="toggle_visibility('hints');">Hints on querying</a>
                {% if queryLink %}
                    | <a href="{{queryLink}}">Link to current query</a>
                {% endif %}
            </td>
        </tr>
        <tr><td/><td>{% include "gracedb/query_help_frag.html" %}</td></tr>
    </table>
    </form>
{% endif %}

{% if false %}
{% if object_list.count %}
<table class="event">
    <thead>
    <tr>
            <th width="100">UID</th>
            <th width="100">Labels</th>
            <th width="100">Group</th>
            <th width="100">Type</th>
            <th width="100">
                Event Time
            </th>
            <th width="100">Links</th>
            <th width="100">
                Submitted
            </th>
    </tr>
    </thead>

    <tbody>
{% for obj in object_list %}
    <tr class={% cycle 'odd' 'even' %}>
        <td><a href="{% url view obj.graceid %}">{{ obj.graceid }}</a></td>
        <td>
             {% for labelling in obj.labelling_set.all %}
                <span title="{{labelling.creator.name}}  {{labelling.created|utc}}" style="color: {{labelling.label.defaultColor}}">{{ labelling.label.name }}</span>
             {% endfor %}
        </td>
        <td>{{ obj.group }} </td>
        <td>{{ obj.get_analysisType_display }} </td>
        <td>{% if obj.gpstime%}
                {{ obj.gpstime }}
            {% endif %}
        </td>
        <td><a href="{{ obj.weburl }}">Data</a>
            <a href="{{ obj.wikiurl }}">Wiki</a></td>
        <td>{{ obj.created }}</td>
    </tr>
{% endfor %}
    </tbody>
</table>
{% else %}
    <h3>No Events.</h3>
{% endif %}
{% endif %}


<table id="flex1"></table>
<div id="pager1"></div>


{% endblock %}