{% extends "layout.html" %}

{% block content %}
<section class="section-2025" style="background: var(--gradient-primary); color: white; text-align: center;">
  <div class="container-2025">
    <div class="section-header scroll-reveal">
      <h1 class="section-title serif" style="color: white;">Church Bulletins</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">Weekly worship programs and announcements</p>
    </div>
  </div>
</section>

<section class="section-2025">
  <div class="container-2025">
    {% if !bulletins.is_empty() %}
      <div class="cards-grid">
        {% for bulletin in bulletins %}
          <div class="card-2025 scroll-reveal">
            <div class="card-icon-2025">
              <i class="fas fa-file-alt"></i>
            </div>
            <h3 class="card-title">{{ bulletin.title }}</h3>
            <p style="color: var(--medium-gray);">{{ bulletin.date }}</p>
            {% if bulletin.scripture_reading %}
              <p style="font-style: italic; margin: 1rem 0;">{{ bulletin.scripture_reading }}</p>
            {% endif %}
            <div style="margin-top: 1.5rem;">
              <a href="/bulletins/{{ bulletin.id }}" class="btn-2025 btn-primary">View Details</a>
              {% if bulletin.pdf_path %}
                <a href="{{ bulletin.pdf_path }}" target="_blank" class="btn-2025 btn-outline">Download PDF</a>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="card-2025 scroll-reveal" style="text-align: center;">
        <h3>No bulletins available</h3>
        <p>Check back soon for new bulletins!</p>
      </div>
    {% endif %}
  </div>
</section>
{% endblock %}