{% extends "admin/change_list.html" %}
{% block content_title %}
    <h1> Slack Team Summary </h1>
{% endblock %}
{% block result_list %}
    <div class="results">
    <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;
        font-weight: bold;
        {% comment %} opacity: 0; {% endcomment %}
    }
    .bar-chart .bar:hover .bar-tooltip {
        opacity: 1;
    }
    
    </style>
    <h2>Daily Active Teams:</h2>
    <div class="results">
        <div class="bar-chart">
        {% for x in summary_over_time %}
            <div class="bar" style="height:{{x.pct}}%">
                <div class="bar-tooltip">
                    {{x.total | default:0 }}<br>
                    {{x.period | date:"d/m/Y"}}
                </div>
            </div>
        {% endfor %}
        </div>
    </div>
    <br>
    <h2>Registered Teams:</h2>
    <div class="results">
        <div class="bar-chart">
        {% for x in registered_teams %}
            <div class="bar" style="height:{{x.pct}}%">
                <div class="bar-tooltip">
                    {{x.total | default:0 }}<br>
                    {{x.period | date:"d/m/Y"}}
                </div>
            </div>
        {% endfor %}
        </div>
    </div>
    
</div>
{% endblock %}
{% block pagination %}{% endblock %}