{* Additional stylesheets required by the report *}
<link href="css/icons.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/report.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/graph.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/ui.datepicker.css" rel="stylesheet" type="text/css" media="all" />
  
{* Additional JS required by the report *}
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.datepicker-mod.js"></script>
<script type="text/javascript" src="js/ox.reports.js"></script>
<script type="text/javascript" src="js/json2.js"></script>

<div class="report">

  <div id="date-range" title="Apr 22, 2009 - Apr 28, 2009">
    <label>Date range: </label><span class="iconCalendar inlineIconAfter" title="{$selectedDateRangeName}">{$selectedDateRangeName}</span>
  </div>
 
  <div id="date-range-picker">
    <div id="date-range-picker-controls">
      <div id="date-range-picker-start-date">
        Start date
        <div></div>
      </div>
      <div id="date-range-picker-end-date">
        End date
        <div></div>
        <button id="date-range-picker-done" class="save">Done</button>
      </div>
      <ul>
        {* Generate links for the predefined time periods below *}
        {foreach from=$availableDateRanges key=label item=range}
        	<li><a title="{$range.0} - {$range.1}"
        		{if $range.0==$startDate && $range.1==$endDate}class="current"{/if}
        		href="{url startDate=$range.0 endDate=$range.1}">{$label}</a></li>
        {/foreach} 
{*        <li><a  id="last-7-days" title="Apr 22, 2009 - Apr 28, 2009" href="#">Last 7 days</a></li> *}
        {* No need to change the link here, see below for the link template generated by the date picker *}
        <li><a href="#" class="range">Specific date range</a></li>
      </ul>
    </div>
  </div>
  
{if !$isThereAnyData}
  <div class="video_plugin_header">
	<h2> There is no Video Events data for this {$entityName} for the selected date range: {$startDate} - {$endDate}.</h2>
  </div>
{else}
  {*
     Events history table. Please note that this mock-up shows both the table and the 
     chart (below), but the real report should show only one of those depending on the
     option chosen in the "Show as" dropdow.
   *}
   
  <div class="video_plugin_header">
    <div class="export">
      <a class="inlineIcon iconCsv" href="{url exportCsv=1}">Export as CSV</a>
    </div>
    <a name="table"></a><h2>Views events history</h2>
  </div>
  <div class="tableWrapper" style="clear: both">
    <div class='tableHeader'>  
      <ul class='tableFilters'>
        <li>
          <div class='label'>View by</div>  
          <div class='dropDown'>
            <span><span>{$availableDimensions.$selectedDimension}</span></span>  
            <div class='panel'>
              <div>
                <ul>
                	{foreach from=$availableDimensions key=dimensionId item=dimensionName}
	                  <li><a href="{url dimension=$dimensionId}">{$dimensionName}</a></li>
    	            {/foreach}
                </ul>
              </div>
            </div>
            <div class='mask'></div>
          </div>
        </li>
      </ul>
      <div class='clear'></div>
      <div class='corner left'></div>
      <div class='corner right'></div>
    </div>

    {include file='table.html'}
  </div>
{/if}
</div>

{* Date picker initialization *}
<script type="text/javascript">//<![CDATA[
  {* 
    Template of the URLs generated by the "Specific date range" option. _start_ and _end_
    will be replaced by the selected dates in "yyyy-mm-dd" format. startDate and endDate
    determine the initial selection of the date pickers. 
   *}
  var urlTemplate = "{url startDate=_start_ endDate=_end_}";
  var startDate = "{$thirtyDaysAgo}";
  var endDate = "{$today}";

{literal}
  $(document).ready(function() {
    $("#date-range").daterangepicker("#date-range-picker", "#date-range-picker-done", urlTemplate, startDate, endDate);
  });
//]]></script>
{/literal}
