{% load i18n %}
<div class="dashboard-widget" data-widget="my_hr_requests" 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 req in my_hr_requests %}
        <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);">{{ req.summary }}</div>
                <div style="font-size: 0.75rem; color: var(--color-muted-foreground); margin-top: 0.125rem;">{{ req.created_at|date:"d.m.Y" }}</div>
            </div>
            <span class="badge {% if req.status == 'approved' %}badge-success{% elif req.status == 'rejected' %}badge-danger{% elif req.status == 'cancelled' %}badge-muted{% else %}badge-warning{% endif %}" style="flex-shrink: 0;">{{ req.status_label }}</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="/hr-portal/" hx-get="/hr-portal/" hx-target="#main-content" hx-push-url="/hr-portal/" hx-indicator="#loader" style="font-size: 0.8125rem; color: var(--color-primary); text-decoration: none; font-weight: 500;">{% trans "HR-портал" %} →</a>
    </div>
</div>