{% load common_tags %}
{% load i18n %}
<div class="dashboard-widget" data-widget="news" 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 post in latest_posts %}
        <a href="/news/{{ post.pk }}/" hx-get="/news/{{ post.pk }}/" hx-target="#main-content" hx-push-url="/news/{{ post.pk }}/" hx-indicator="#loader"
           class="li-hover"
           style="display: block; padding: 1.25rem 1.5rem; {% if not forloop.last %}border-bottom: 1px solid var(--color-border);{% endif %} {% if post.is_important %}border-left: 3px solid var(--color-destructive); background: hsl(0 72% 51% / 0.04);{% endif %} text-decoration: none; cursor: pointer;">
            <div style="display: flex; align-items: flex-start; gap: 1rem;">
                {% if post.first_image_url %}
                <img src="{{ post.first_image_url }}" alt="" style="width: 3.5rem; height: 3.5rem; border-radius: 0.5rem; object-fit: cover; flex-shrink: 0;">
                {% endif %}
                <div style="flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;">
                    <div style="min-width: 0;">
                        <div style="font-size: 0.9375rem; font-weight: {% if post.is_important %}600{% else %}500{% endif %}; color: {% if post.is_important %}var(--color-destructive){% else %}var(--color-card-foreground){% endif %}; margin-bottom: 0.375rem;">{{ post.title }}</div>
                        <div style="font-size: 0.8125rem; color: var(--color-muted-foreground); line-height: 1.5;">{{ post.body|clean_excerpt:160 }}</div>
                    </div>
                    <span style="font-size: 0.75rem; color: var(--color-muted-foreground); white-space: nowrap; flex-shrink: 0;">{{ post.created_at|date:"d.m.Y" }}</span>
                </div>
            </div>
        </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="/news/" hx-get="/news/" hx-target="#main-content" hx-push-url="/news/" hx-indicator="#loader" style="font-size: 0.8125rem; color: var(--color-primary); text-decoration: none; font-weight: 500;">{% trans "Все новости" %} →</a>
    </div>
</div>