{% load add_to_qs %}
{% if event_sparkline %}
{% for sparkline_variant in event_sparkline.variants %}
{% if not event_sparkline_interval_hours or sparkline_variant.interval_hours == event_sparkline_interval_hours %}
<div class="mt-8 {% if event_sparkline_interval_hours %}grid{% elif sparkline_variant.interval_hours == 24 %}grid md:hidden{% elif sparkline_variant.interval_hours == 12 %}hidden md:grid 2xl:hidden{% else %}hidden 2xl:grid{% endif %}"
     style="grid-template-columns: max-content 1fr; grid-template-rows: auto auto; column-gap: 0.5rem;">

    {# y-axis #}
    <div class="flex flex-col justify-between h-24 {# h matches chart height #} mr-2 text-right tabular-nums text-xs text-slate-700 dark:text-slate-200">
    {# basic idea: first and last are half-cells, middle are full-width; this way the outermost labels are aligned with the outsides #}

    {% for y_label in sparkline_variant.y_labels %}

        {% if forloop.first %}
            {#-- top half-cell #}
            <div class="flex-[0.5] flex items-start justify-end relative">
                <span class="-translate-y-[35%]">
                    {{ y_label }}
                </span>
            </div>

        {% elif forloop.last %}
            {# bottom half-cell #}
            <div class="flex-[0.5] flex items-end justify-end relative">
                <span class="translate-y-[35%]">
                    {{ y_label }}
                </span>
            </div>

        {% else %}
            {# full-width middle cells #}
            <div class="flex-1 flex items-center justify-end">
                {{ y_label }}
            </div>

        {% endif %}

    {% endfor %}
    </div>


    {# Chart area #}
    <div class="row-span-1">
        {# bars #}
        <div class="grid h-24"
             style="grid-template-columns: repeat({{ sparkline_variant.event_buckets|length }}, minmax(0,1fr)); gap: 2px;">
            {% for bucket in sparkline_variant.event_buckets %}
                {% if event_sparkline_clickable and bucket.click_count and bucket.digest_order %}
                    <a class="group relative flex items-end cursor-pointer"
                       href="{% url this_view issue_pk=issue.pk digest_order=bucket.digest_order %}{% current_qs %}"
                       title="{{ bucket.title }}">
                        {% include "events/_event_sparkline_bucket.html" with clickable=True %}
                    </a>
                {% else %}
                    <div class="relative flex items-end"
                         title="{{ bucket.title }}">
                        {% include "events/_event_sparkline_bucket.html" %}
                    </div>
                {% endif %}
            {% endfor %}
        </div>

        {# baseline directly under bars #}
        <div class="h-[1px] border-b border-slate-300 dark:border-slate-500"></div>

        {# x-axis #}
        <div class="mt-1 flex text-xs">
            {# basic idea: as the y-axis, but without the float-out #}

            {% for x_label in sparkline_variant.x_labels %}
                {% if forloop.first %}
                    <!-- Left half-cell -->
                    <div class="flex-[0.5] flex justify-start">
                        <span class="{#-ml-2 would float-out; ugly though #}">
                            {{ x_label|date:"j M" }}
                        </span>
                    </div>

                {% elif forloop.last %}
                    <!-- Right half-cell -->
                    <div class="flex-[0.5] flex justify-end">
                        <span class="{#-mr-2 would float-out; ugly though #}text-right">
                            {{ x_label|date:"j M" }}
                        </span>
                    </div>

                {% else %}
                    <!-- Full-width middle cells -->
                    <div class="flex-1 flex justify-center">
                        {{ x_label|date:"j M" }}
                    </div>
                {% endif %}

            {% endfor %}
        </div>
    </div>

    {# bottom-left stays empty #}
    <div></div>

</div>
{% endif %}
{% endfor %}
{% endif %}