{% extends 'carers/dashboard_layout.html' %}

{% load i18n %}

{% block title %}{% trans "Manage" %}{% endblock %}

{% block custom_main_class %}max-w-4xl{% endblock %}

{% block content %}


    <div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Carers signed up</h3>
            <p class="mt-2 text-3xl md:text-4xl">{{ num_users }}</p>
        </a>
        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Completed onboarding?</h3>
            <p class="mt-2 text-3xl md:text-4xl">{{ users_completed_onboarding }}</p>
        </a>

        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Total number of Special Mentions</h3>
            <p class="mt-2 text-3xl md:text-4xl">{{ num_reviews }}</p>
        </a>
        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Special Mentions this month</h3>
            <p class="mt-2 text-3xl md:text-4xl">{{ reviews_this_month }}</p>
        </a>
        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Average score lifetime</h3>
            <p class="mt-2 text-3xl md:text-4xl">{{ average_score|floatformat:1 }} stars</p>
        </a>
        <a href="#" class="block bg-bgColor border border-body border-opacity-10 shadow-sm p-7 rounded-lg">
            <h3 class="text-lg leading-tight">Average score this month</h3>
            {% if average_score_this_month %}
            <p class="mt-2 text-3xl md:text-4xl">{{ average_score_this_month|floatformat:1 }} stars</p>
            {% else %}
            <p class="mt-2">No Special Mentions yet</p>
            {% endif %}
        </a>
    </div>


{% endblock %}