{% load i18n %}
<div class="dashboard-widget" data-widget="metrics" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem;">

    {% if employees_active != None %}
    <div class="stat-card" style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-bottom: 0.5rem;">{% trans "Сотрудников онлайн" %}</div>
            <div style="font-size: 1.75rem; font-weight: 700; color: var(--color-foreground); line-height: 1;">{{ employees_online }}</div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem;">{% trans "из" %} {{ employees_active }} {% trans "активных" %}</div>
        </div>
        <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsl(205 80% 55% / 0.12); color: hsl(205 80% 45%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
        </div>
    </div>

    {% endif %}
    {% if pharmacies_active != None %}
    <div class="stat-card" style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-bottom: 0.5rem;">{% trans "Доступных аптек" %}</div>
            <div style="font-size: 1.75rem; font-weight: 700; color: var(--color-foreground); line-height: 1;">{{ pharmacies_active }}</div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem;">{% trans "активных точек" %}</div>
        </div>
        <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsl(270 60% 55% / 0.12); color: hsl(270 60% 45%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z"/>
            </svg>
        </div>
    </div>

    {% endif %}
    <div class="stat-card" style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-bottom: 0.5rem;">{% if tickets_are_personal %}{% trans "Моих открытых IT-заявок" %}{% else %}{% trans "Открытых IT-заявок" %}{% endif %}</div>
            <div style="font-size: 1.75rem; font-weight: 700; color: var(--color-foreground); line-height: 1;">{{ open_tickets }}</div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem;">{% trans "в работе и новых" %}</div>
        </div>
        <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsl(174 55% 42% / 0.12); color: hsl(174 55% 35%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M3 18v-6a9 9 0 0 1 18 0v6"/>
                <path d="M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z"/>
            </svg>
        </div>
    </div>

    {% if directories_count != None %}
    <div class="stat-card" style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-bottom: 0.5rem;">{% trans "Справочников" %}</div>
            <div style="font-size: 1.75rem; font-weight: 700; color: var(--color-foreground); line-height: 1;">{{ directory_types_count }}</div>
            <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.375rem;">{{ directories_count }} {% trans "записей" %}</div>
        </div>
        <div style="width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; background: hsl(38 92% 50% / 0.12); color: hsl(38 80% 35%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/>
            </svg>
        </div>
    </div>

    {% endif %}
</div>