{% extends "admin/change_list.html" %}

{% block extrastyle %}{% spaceless %}
{{ block.super }}
<style>
    .bar-chart {
      display: flex;
      justify-content: space-around;
      height: 160px;
      padding-top: 60px;
      overflow: hidden;
    }
    .bar-chart .bar {
        flex: 100%;
        align-self: flex-end;
        margin-right: 2px;
        position: relative;
        background-color: #79aec8;
    }
    .bar-chart .bar:last-child {
        margin: 0;
    }
    .bar-chart .bar:hover {
        background-color: #417690;
    }
    .bar-chart .bar .bar-tooltip {
        position: relative;
        z-index: 999;
    }
    .bar-chart .bar .bar-tooltip {
        position: absolute;
        top: -60px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        opacity: 0;
    }
    .bar-chart .bar:hover .bar-tooltip {
        opacity: 1;
    }

</style>
{% endspaceless %}{% endblock extrastyle %}

{% block content_title %}{% spaceless %}
<h1>User Summary</h1>
{% endspaceless %}{% endblock content_title %}

{% block result_list %}{% spaceless %}
<div class="results">
    <h2>Registration over time</h2>
    <div class="results">
        <div class="bar-chart">
            {% for x in summary_over_time %}
            <div class="bar" style="height:{{ x.pct | default:1 }}%">
                <div class="bar-tooltip">
                    {{ x.total | default:0 }}<br/>
                    {% if period_scale == 'day' %}{{ x.period | date:"d/m/Y" }}
                    {% else %}{{ x.period | date:"P" }}
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>
{% endspaceless %}{% endblock result_list %}

{% block pagination %}{% endblock pagination %}