{% load humanize helpers %}

<a class="card ~neutral !low service mb-6 p-0" href="{% url 'dashboard:service' object.uuid %}">
    {% with stats=object.stats %}
    <div class="p-4 md:flex justify-between">
        <div class="flex items-center mb-4 md:mb-0">
            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-purple-600">
                {{object.name}}
            </h3>
            {% include 'dashboard/includes/stats_status_chip.html' %}
        </div>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div>
                <p>Sessions</p>
                <p class="label">
                    {{stats.session_count|intcomma}}
                    {% compare stats.compare.session_count stats.session_count "UP" %}
                </p>
            </div>
            <div>
                <p>Hits</p>
                <p class="label">
                    {{stats.hit_count|intcomma}}
                    {% compare stats.compare.hit_count stats.hit_count "UP" %}
                </p>
            </div>
            <div>
                <p>Bounce Rate</p>
                <p class="label">
                    {% if stats.bounce_rate_pct != None %}
                    {{stats.bounce_rate_pct|floatformat:"-1"}}%
                    {% else %}
                    ?
                    {% endif %}
                    {% compare stats.compare.bounce_rate_pct stats.bounce_rate_pct "DOWN" %}
                </p>
            </div>
            <div>
                <p>Avg. Duration</p>
                <p class="label">
                    {% if stats.avg_session_duration != None %}
                    {{stats.avg_session_duration|naturaldelta}}
                    {% else %}
                    ?
                    {% endif %}
                    {% compare stats.compare.avg_session_duration stats.avg_session_duration "UP" %}
                </p>
            </div>
        </div>
    </div>
    <hr class="sep h-4">
    <div style="bottom: -1px;">
        {% include 'dashboard/includes/time_chart.html' with data=stats.session_chart_data sparkline=True height=100 name=object.uuid %}
    </div>
    {% endwith %}
</a>