{% load i18n %}
<div class="dashboard-widget" data-widget="my_tickets" 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 "Мои IT-заявки" %}</h3>
        <p style="font-size: 0.8125rem; color: var(--color-muted-foreground); margin-top: 0.125rem;">{% trans "Открытые обращения в IT-поддержку" %}</p>
    </div>
    <div>
        {% for ticket in my_tickets %}
        <div 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 %}">
            <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;">
                    <span style="color: var(--color-muted-foreground);">[{{ ticket.number }}]</span> {{ ticket.title }}
                </div>
                <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.125rem;">{{ ticket.created_at|date:"d.m.Y" }}</div>
            </div>
            <span class="badge badge-muted" style="flex-shrink: 0;">{{ ticket.status.name }}</span>
        </div>
        {% 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="/it-support/" hx-get="/it-support/" hx-target="#main-content" hx-push-url="/it-support/" hx-indicator="#loader" style="font-size: 0.8125rem; color: var(--color-primary); text-decoration: none; font-weight: 500;">{% trans "Поддержка IT" %} →</a>
    </div>
</div>