{% load i18n unfold %}
<div class="font-semibold text-2xl text-font-important-light tracking-tight dark:text-font-important-dark{% if class %} {{ class }}{% endif %}">
    <a>{% trans "Dashboard" %}</a>
    {% with cur=tf|default:30 %}
        <a href="?tf=7"
           class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 7 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">7d</a>
        <a href="?tf=30"
           class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 30 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">30d</a>
        <a href="?tf=90"
           class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 90 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">90d</a>
        <a href="?tf=360"
           class="px-3 py-1 rounded-full text-sm border transition-colors {% if cur == 360 %} bg-gray-900 text-white dark:bg-white dark:text-gray-900 border-transparent {% else %} border-gray-300 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 {% endif %}">360d</a>
    {% endwith %}
</div>
