{% load i18n date_formating humanize table_form %}
<div id="{{unique_id}}-tab">
    <h4>{% trans "Numbers" %}</h4>
    {% if form %}
    <div class='form'>
    <form method='post' action="{% url 'dashboard-main-detail' item_name %}" id='{{unique_id}}_form'>
        {% csrf_token %}
        {% bs_form form %}
        <div class="text-center">
            <button type='button' id="search_{{unique_id}}"
                    class="btn btn-primary">
                {% trans "Change" %}</button>
        </div>
    </form>
    </div>
    {% endif %}
    <p><strong>{% trans "Total:" %}</strong> {{dashboard.total_number|intcomma}}</p>
    <div>
        <div id="chart_{{unique_id}}"
             style="height:400px; width:700px; margin-right:auto; margin-left:auto"></div>
        <p class='alert alert-info'>
            {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}
        </p>
        <div class='form chart-img-form'>
          <div class="text-center">
            <button id="chart_img_display_{{unique_id}}"
                    type='button' class='btn btn-secondary'>
                {% trans "Display as an image" %}
            </button>
          </div>
          <div id="chart_img_{{unique_id}}" class='chart-img'>
              <div class="card">
                <div id="img_{{unique_id}}"
                     class="card-img-top text-center"></div>
                  <div class="card-body">
                <div class='alert alert-info'>
                    {% trans 'Right-click on this image to save it.' %}
                </div>
                  </div>
              </div>
          </div>
        </div>
    </div>
    <hr>
    <table class="table table-striped">
    {% for idx, lbl, values in dashboard.values %}
      <tr>
      <th>{{lbl}}</th>
      {% for value in values reversed %}{% if forloop.parentloop.counter0 %}<td>{% else %}<th>{%endif%}{{value|date_formating }}{% if forloop.parentloop.counter0 %}</td>{% else %}</th>{%endif%}{% endfor%}
      </tr>
    {% endfor%}
    </table>
    <hr>
    {% if dashboard.periods %}
    <h4>{% trans "By years" %}</h4>
    <dl class="row">
        <dt class="col-sm-3">
            {% trans "Average:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.average}}
        </dd>

        <dt class="col-sm-3">
            {% trans "Variance:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.variance}}
        </dd>

        <dt class="col-sm-3">
            {% trans "Standard deviation:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.standard_deviation}}
        </dd>
        <dt class="col-sm-3">
            {% trans "Median:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.median}}
        </dd>
        <dt class="col-sm-3">
            {% trans "Mode:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.mode}}
        </dd>
    </dl>
    <hr>
    {% endif %}
    {% if dashboard.operation_average %}
    <h4>{% trans "By operations" %}</h4>
    <dl class="row">
        <dt class="col-sm-3">
            {% trans "Average:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.operation_average}}
        </dd>

        <dt class="col-sm-3">
            {% trans "Variance:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.operation_variance}}
        </dd>

        <dt class="col-sm-3">
            {% trans "Standard deviation:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.operation_standard_deviation}}
        </dd>
        <dt class="col-sm-3">
            {% trans "Median:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.operation_median}}
        </dd>
        <dt class="col-sm-3">
            {% trans "Mode:" %}
        </dt>
        <dd class="col-sm-9">
            {{dashboard.operation_mode}}
        </dd>
    </dl>
    <hr>
    {% endif %}
    <h4>{% trans "Created last" %}</h4>
    <table class="table table-striped">
      <tr><th>{{lbl}}</th><th>{% trans "Created" %}</th><th></th></tr>
      {% for item in dashboard.lasts %}<tr>
        <td class='ref'>{{item}}</td>
        <td>{{item.history_date}}</td>
        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>
            <i class="fa fa-info-circle" aria-hidden="true"></i>
        </a>{%endif%}</td>
      </tr>{% endfor %}
    </table>
    <hr>
    <h4>{% trans "Recent changes" %}</h4>
    <table class="table table-striped">
      <tr><th>{{lbl}}</th><th>{% trans "Modified" %}</th><th></th></tr>
      {% for item in dashboard.recents %}<tr>
        <td class='ref'>{{item}}</td>
        <td>{{item.history_date}}</td>
        <td>{% if item.get_show_url %}<a href="#" onclick='load_window("{{item.get_show_url}}")'>
        <i class="fa fa-info-circle" aria-hidden="true"></i>
        </a>{%endif%}</td>
      </tr>{% endfor %}
    </table>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){

{% for idx, lbl, values in dashboard.values %} {% if forloop.counter0 > 0 %} var values_{{forloop.counter0}}_{{unique_id}} = []; {% for idx, lbl, values in dashboard.values %} {% for value in values %} {% if forloop.parentloop.counter0 == 0 %} values_{{forloop.parentloop.parentloop.counter0}}_{{unique_id}}.push([{{VALUE_QUOTE|safe}}{{value}}{{VALUE_QUOTE|safe}}, 0]); {% elif forloop.parentloop.parentloop.counter0 == forloop.parentloop.counter0 %} values_{{forloop.parentloop.parentloop.counter0}}_{{unique_id}}[{{forloop.counter0}}][1] = {{value}}; {% endif %} {% endfor%} {% endfor%} {% endif %} {% endfor %}

{% comment %}
# less compact version
{% for idx, lbl, values in dashboard.values %}
  {% if forloop.counter0 > 0 %}
    {% for idx, lbl, values in dashboard.values %}
      {% for value in values %}
        {% if forloop.parentloop.counter0 == 0 %}
          values_{{forloop.parentloop.counter0}}_{{unique_id}}.push([{{VALUE_QUOTE|safe}}{{value}}{{VALUE_QUOTE|safe}}, 0]);
        {% elif forloop.parentloop.counter0 == forloop.counter0 %}
           values_{{forloop.counter0}}_{{unique_id}}[{{forloop.counter0}}][1] = {{value}};
        {% endif %}
      {% endfor%}
    {% endfor%}
  {% endif %}
{% endfor %}
{% endcomment %}


if (typeof values_1_{{unique_id}} === 'undefined'
    || values_1_{{unique_id}}.length == 0){

    $('#chart_img_{{unique_id}}').hide();
    $('#chart_{{unique_id}}').html(
        "<p class='alert alert-warning'>{% trans 'No data for these criteria.' %}</p>"
    );
    $('#chart_{{unique_id}}').css('height', 'auto');

} else {
var showmarker = false;
if (values_1_{{unique_id}}.length < 25){
    var showmarker = true;
}

var plot_{{unique_id}} = $.jqplot('chart_{{unique_id}}',
    [{% for idx, lbl, values in dashboard.values %}{% if forloop.counter0 > 0 %} {% if forloop.counter0 > 1 %}, {% endif%} values_{{forloop.counter0}}_{{unique_id}} {% endif %} {% endfor%}], {
      axes:{ {%ifequal slicing 'year'%}
        xaxis:{
          label:'{% trans "Year" %}',
          tickOptions: {
            formatString: "%d"
          }
        },{%endifequal%}{%ifequal slicing 'month'%}
        xaxis:{
          label:'{% trans "Month" %}',
          renderer:$.jqplot.DateAxisRenderer,
          tickRenderer:$.jqplot.CanvasAxisTickRenderer,
          tickOptions:{
            formatString:'%b %Y',
            angle:-25
          }
        },{%endifequal%}
        yaxis:{
          label:'{% trans "Number"%}',
          min:0
        }
      },
      highlighter: {
        show: true,
        sizeAdjust: 7.5
      },
      series:[{% for label in dashboard.serie_labels %}
        {%if forloop.counter0%}, {% endif %}{label:"{{label}}", showmarker:showmarker}{% endfor %}
      ],
      cursor:{
        show: true,
        zoom:true,
        showTooltip:false
      },
      legend: { show:true, location: 'nw' }
  });

  $('#chart_img_display_{{unique_id}}').click(function(){
    $('#chart_img_{{unique_id}}').hide();
    $('#img_{{unique_id}}').html(
      $('<img/>').attr(
             'src', $('#chart_{{unique_id}}').jqplotToImageStr({})
      )
    );
    $('#chart_img_{{unique_id}}').show('slow');
  });
}

$('#search_{{unique_id}}').click(function (){
    $.post("{% url 'dashboard-main-detail' item_name %}",
            $("#{{unique_id}}_form").serialize(),
            function(data){
                $("#{{unique_id}}-tab").parent().html(data);
            });
    return false;
});
});
</script>