{% load i18n %}
<div class="dashboard-widget" data-widget="my_tasks" style="background: var(--color-card); border-radius: 0.75rem; border: 1px solid var(--color-border); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);">
    <div style="padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border);">
        <h3 style="font-weight: 600; color: var(--color-card-foreground); font-size: 0.9375rem;">{% trans "Мои задачи" %}</h3>
        <p style="font-size: 0.8125rem; color: var(--color-muted-foreground); margin-top: 0.125rem;">{% trans "Активные задачи, где вы участник" %}</p>
    </div>
    <div>
        {% for task in my_tasks %}
        <a href="/tasks/{{ task.pk }}/" hx-get="/tasks/{{ task.pk }}/" hx-target="#main-content" hx-push-url="/tasks/{{ task.pk }}/" hx-indicator="#loader"
           class="li-hover"
           style="display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1.5rem; {% if not forloop.last %}border-bottom: 1px solid var(--color-border);{% endif %} text-decoration: none; cursor: pointer;">
            <div style="flex: 1; min-width: 0;">
                <div style="font-size: 0.875rem; font-weight: 500; color: var(--color-card-foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ task.title }}</div>
                {% if task.due_date %}
                <div style="font-size: 0.75rem; color: {% if task.is_overdue %}var(--color-destructive){% else %}var(--color-muted-foreground){% endif %}; margin-top: 0.25rem;">
                    {% trans "Срок" %}: {{ task.due_date|date:"d.m.Y" }}{% if task.is_overdue %} · {% trans "просрочено" %}{% endif %}
                </div>
                {% endif %}
            </div>
            <span class="badge {{ task.priority_badge }}" style="flex-shrink: 0;">{{ task.get_priority_display }}</span>
        </a>
        {% empty %}
        <div style="padding: 1.5rem; text-align: center; color: var(--color-muted-foreground); font-size: 0.8125rem;">{% trans "Активных задач нет" %}</div>
        {% endfor %}
    </div>
    <div style="padding: 0.875rem 1.5rem; border-top: 1px solid var(--color-border);">
        <a href="/tasks/" hx-get="/tasks/" hx-target="#main-content" hx-push-url="/tasks/" hx-indicator="#loader" style="font-size: 0.8125rem; color: var(--color-primary); text-decoration: none; font-weight: 500;">{% trans "Все задачи" %} →</a>
    </div>
</div>