<script type="text/javascript">
	var ticketlist={};
	$(document).ready(function() {
	    viewtickets = {};
	    ticketlist.searchfilter = "{searchfilter}";
	    ticketlist.searchcustomerid = "{searchcustomerid}";
	    ticketlist.searchquery = "{searchquery}";
	    ticketlist.searchtype = "{searchtype}";
	    ticketlist.iscustom = "{iscustomsearchquery}";
	    defaultfiltername = "{defaultfiltername}";
	});
    function toggleSupportTab(divblock) {
        document.getElementById('ticketsearch_block').style.display = "none";
        document.getElementById('ticketstats_block').style.display = "none";
        document.getElementById('ticketrefresh_block').style.display = "none";

        document.getElementById('ticketstats_li').className = "";
        document.getElementById('ticketsearch_li').className = "";
        document.getElementById('ticketrefresh_li').className = "";

        document.getElementById(divblock+'_block').style.display = "";
        document.getElementById(divblock+'_li').className = "active";
    }
    
</script>

<ul id="ticketlisttabs" class="tabs  tabs-with-summary" style="">
    <li id="ticketstats_li" class="{ticketstats_li_class}">
        <a href="#" onclick="javascript:toggleSupportTab('ticketstats');">Today's Stats</a>
    </li>
    <li id="ticketsearch_li" class="{ticketsearch_li_class}">
        <a href="#" onclick="javascript:toggleSupportTab('ticketsearch');">Search</a>
    </li>
    <li id="ticketrefresh_li" class="{ticketrefresh_li_class}">
        <a href="#" onclick="javascript:toggleSupportTab('ticketrefresh');">Refresh Rate</a>
    </li>
</ul>

<div id="ticketsearch_block" class="table-tab-summary" style="{ticketsearch_block_display}height:50px;" >
    <input type="text" class="x-form-text x-form-field" onkeydown="if(event.keyCode==13) ticketlist.SearchTroubleTickets();" style="width:400px;float:left;" id="ticketsearchinput" name="ticketsearchinput" value="{searchquery}" />
    <div style="float:left;padding-left:10px;">
        <select id="searchtype"><option value="0" {option_0_selected}>[l]All Words[/l]</option><option value="1" {option_1_selected}>[l]Exact[/l]</option><option value="2" {option_2_selected}>[l]By E-Mail[/l]</option></select>
    </div>
    <div style="clear:both;float:left;padding-top:5px;">
    	&nbsp;&nbsp;<input type="checkbox" id="includeclosed" name="includeclosed" {ticketsearch_searchclosed} />&nbsp;&nbsp;[l]Include Closed Tickets[/l]
    </div>
</div>

<div id="ticketstats_block" class="table-tab-summary" style="{ticketstats_block_display}">
    <div class="box_long_min" style="background-color: #d9f0d3 !important; color: #006602 !important;">&nbsp;
        <span>[l]Opened[/l] (<span id="openedtoday">..</span>)</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Closed[/l] (<span id="closedtoday">..</span>)</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Replies[/l] (<span id="repliedtoday">..</span>)</span>
        <span style="color:#E7FFDF"> | </span>
        <span>[l]Rated[/l] (<span id="ratedtoday">..</span>)</span>
    </div>
</div>

<div id="ticketrefresh_block" class="table-tab-summary" style="{ticketrefresh_block_display}">
    <div style="margin-top:5px;float:left;">Refresh grid &nbsp;&nbsp;</div><div style="margin-top:3px;float:left;"><select id="refreshgridrate"><option value="0">Never</option><option value="1">[l]Every 1 Minute[/l]</option><option value="5">[l]Every 5 Minute[/l]</option><option value="15">[l]Every 15 Minute[/l]</option></select></div>
</div>

<div id="ticketlist-custom-filter" style='display:none;'>
<input type="text" id="filtername" name="filtername" class="required" value='Unsaved Filter'/>
<input style="width:10px;margin-left: 6px;" id="filterprivate" name="filterprivate" type="checkbox" /> [l]Select if this filter is private to you[/l]
<input type="hidden" id="idfilter" name="idfilter" value='' />
</div>

<div style="clear:both;padding-top: 15px;" class="grid-meta" id="ticketsgrid-metadata"></div>
<div class="blue-box" style="padding:4px !important;">
    <table class="automation">
        <tbody>
            <tr>
                <td>
                    <span id="ticketlisttablelabel">Loading..</span>
                </td>
                <td align="right" style="width:80px">[l]Display[/l]: &nbsp;&nbsp;</td>
                <td align="left"  style="width:60px">
                	<select id='ticketsgrid-filter' class="change-grid-showrecords" style='width:60px;'><option value='5'>5</option><option value='10'>10</option><option value='25'>25</option><option value='50'>50</option><option value='150'>150</option><option value='300'>300</option></select>
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div id="ticketsgrid"></div>
<div id="ticketsgrid-footer">
	<div id="ticketsgrid-grid-buttons" style="float:left;">
		<a class="rich-button white" disabled="disabled" id="btnCloseTicket"><span class="buttontext">[l]Close Ticket(s)[/l]</span></a>				
		<a class="rich-button white" disabled="disabled" id="btnMarkSpam"><span class="buttontext">[l]Mark as Spam[/l]</span></a>		
		<a class="rich-button white" disabled="disabled" id="btnDelTicket"><span class="buttontext">[l]Delete Ticket(s)[/l]</span></a>		
	</div>
	<div style="float:right;" id="ticketsgrid-pagination"></div>
</div>