{% extends 'layouts/public.html' %}
{% load static %}

{% block title %}Notícias{% endblock title %}

{% block content %}
<div class="container mt-5 mb-5">
  <h1 class="mb-4" style="color: var(--gold);">Notícias Recentes</h1>

  <div class="row">
    {% if latest_news_list %}
      {% for news in latest_news_list %}
        <div class="col-md-4 mb-4">
          <div class="card h-100 border-0" style="background-color: var(--bg-section); color: var(--light); box-shadow: 0 0 10px rgba(0,0,0,0.5);">
            
            {% if news.image %}
              <img class="card-img-top" src="{{ news.image.url }}" alt="{{ news.title }}" style="object-fit: cover; height: 200px;">
            {% endif %}

            <div class="card-body d-flex flex-column">
              <h5 class="card-title mb-2" style="color: var(--gold);">{{ news.title }}</h5>
              <p class="card-text flex-grow-1">{{ news.summary }}</p>
              <p class="card-text mt-2">
                <small style="color: #aaa;">
                  Autor: {{ news.author.username }}<br>
                  Publicado em: {{ news.pub_date|date:"d/m/Y H:i" }}
                </small>
              </p>
              <a href="{% url 'public_news_detail' news.slug %}" class="btn btn-outline-light mt-auto">Leia mais</a>
            </div>
          </div>
        </div>
      {% endfor %}
    {% else %}
      <div class="col-12">
        <p class="text-muted">Não há notícias disponíveis no momento.</p>
      </div>
    {% endif %}
  </div>
</div>
{% endblock content %}