{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block control %}
<div class="row chart-control">
  <div class="span8 periods">
    <div class="btn-group" id="chart-add">
      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-plus"></i> Добавить виджет
	<span class="caret"></span>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#" data-type="chart"><i class="icon-signal"></i> С графиком</a></li>
        <li><a href="#" data-type="table"><i class="icon-th"></i> С таблицей</a></li>
      </ul>
    </div>
    <button class="btn" id="resize-area-switcher"><i class="icon-resize-full"></i></button>
    <span style="display:inline-block; width: 60px; text-align: right;">по</span>
    <div class="btn-group selector" id="period-selector">
      <button class="btn" data-type="year">годам</button>
      <button class="btn" data-type="month">месяцам</button>
      <!--<button class="btn" data-type="week">неделям</button>-->
      <button class="btn" data-type="day">дням</button>
      <button class="btn" data-type="hour">часам</button>
      <!--<button class="btn" data-type="minute">минутам</button>-->
    </div>
  </div>

  <div class="span5 intervals">
    <span style="display:inline-block;width: 60px;text-align: right;">Интервал:</span>
    <span style="display:inline-block;width: 20px;text-align: right;">с</span>
    <input data-datepicker="datepicker" data-date-format="yyyy-mm" type="text" name="start-date" class="input_date start-date" id="from-date">
    <span style="display:inline-block;width: 20px;text-align: right;">по</span>
    <input data-datepicker="datepicker" data-date-format="yyyy-mm-dd" type="text" name="end-date" class="input_date end-date" id="to-date">
  </div>
  <div class="redraw pull-right">
    <button class="btn" id="redraw-button">Перерисовать</button>
  </div>
</div>
{% endblock %}

{% block charts %}
<div class="charts" id="charts"></div>
<script type="text/html" id="table-widget-template">
  {% raw %}
  <div id="table-{{ id }}" class="hero-unit chart-area conrainer-fluid {{ project_name }}">
    <div class="row-fluid">
      <div class="span8 data-area">
	<div class="table-area"></div>
	<div class="loader">
	  <span>Идет загрузка данных</span>
	  <div class="progress progress-striped active">
	    <div class="bar" style="width: 100%;"></div>
	  </div>
	</div>
      </div>
      <div class="span4 widget-bar">
	<button class="close remove-chart">×</button>
	<div class="selectors"></div>
      </div>
    </div>
  </div>
  {% endraw %}
</script>

<script type="text/html" id="table-template">
  {% raw %}
  <table border="0" class="tablesorter table table-striped table-condensed tablesorter-bootstrap">
    <caption>{{ caption }}</caption>
    <thead class="tablesorter-header">
      <tr class="success">
	<th class="tablesorter-header bootstrap-header">{{ group_column_name }}</th>
	{% for n in column_names %}
	<th><nobr>{{ n }}</nobr></th>
	{% endfor %}
      </tr>
    </thead>
    <tbody>
    {% for r in rows %}
    <tr>
      <th>{{ r[0] }}</th>
      {% set dates = r[1] %}
      {% for v in dates %}
      <td data-tate="{{ v[0] }}">{{ v[1] }}</td>
      {% endfor %}
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endraw %}
</script>

<script type="text/html" id="chart-template">
  {% raw %}
  <div class="hero-unit chart-area container-fluid {{ project_name }}" id="chart-{{ id }}" data-type="{{ type }}">
    <div class="row-fluid">
      <div class="span8 data-area">
	<svg></svg>
	<div class="loader">
	  <span>Идет загрузка данных</span>
	  <div class="progress progress-striped active">
	    <div class="bar" style="width: 100%;"></div>
	  </div>
	</div>
      </div>
      <div class="span4 widget-bar">
	<div class="chart-controls"><button class="add-bar btn"><i class="icon-plus"></i>добавить показатель</button>
	  <!--<div class="btn-group chart-type" id="chart-type-selector-{{ id }}">
	    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Тип графика<span class="caret"></span></a>
	    <ul class="dropdown-menu">
	      <li><a href="#" data-type="simple-line">Simple line</a></li>
	      <li><a href="#" data-type="stacked">Stacked</a></li>
	    </ul>
	  </div>-->
	  <button class="close remove-chart">×</button></div>
        <div class="selectors"></div>
      </div>
    </div>
  </div>
  {% endraw %}
</script>

<script type="text/html" id="metrics-selector-template">
  {% raw %}
  {% for metric in metrics %}<li><a href="#" data-name="{{ metric }}">{{ metric }}</a></li>{% endfor %}
  {% endraw %}
</script>
<script type="text/html" id="table-filters-selector-template">
  {% raw %}
  {% for filter in filters %}
  <li><a href="#" data-name="{{ filter }}">{{ filter }}</a></li>
  {% endfor %}
  {% endraw %}
</script>

<script type="text/html" id="filters-selector-template">
  {% raw %}
  {% for filter in filters %}
  <li>
  {% set values = filter[1] %}
  <select data-placeholder="{{ filter[0] }}" placeholder="{{ filter[0] }}" class="placeholder populate"><option></option>{% for value in values %}<option value="{{ value }}" data-filter-name="{{ filter[0] }}">{{ value }}</option>{% endfor %}</select>
  </li>{% endfor %}
  {% endraw %}
</script>

<script type="text/html" id="selectors-table-bar-template">
  {% raw %}
  <div class="navbar navbar_filters" id="bar-{{ id }}">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"></a>
        <ul class="nav" style="float:none;margin-right:46px;">
          <li class="dropdown metrics-selector">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="current">Параметр</span><!--<b class="caret"></b>--></a>
            <ul class="dropdown-menu"></ul>
          </li>
          <li class="dropdown filters-selector">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="current">Фильтр</span></a>
            <ul class="dropdown-menu"></ul>
          </li>
	</ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div>
  {% endraw %}
</script>

<script type="text/html" id="selectors-bar-template">
  {% raw %}
  <div class="navbar navbar_filters" id="bar-{{ id }}">
    <div class="navbar-inner">
      <div class="container">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse"></a>
        <ul class="nav pull-right">
          <li class="divider-vertical"></li>
          <li><a href="#" class="delete-bar">×</a></li>
        </ul>
        <ul class="nav" style="float:none;margin-right:46px;">
          <li class="dropdown metrics-selector">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="current">Параметр</span><!--<b class="caret"></b>--></a>
            <ul class="dropdown-menu"></ul>
          </li>
          <li class="dropdown filters-selector">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="current">Фильтр</span></a>
            <ul class="dropdown-menu"></ul>
          </li>
	</ul>
      </div><!-- /.nav-collapse -->
    </div>
  </div>
{% endraw %}
</script>
{% endblock %}
