{% 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;">Upcoming Events</h1>
      <p class="section-subtitle" style="color: rgba(255,255,255,0.9);">Join us for worship, fellowship, and community service</p>
    </div>
  </div>
</section>

<section class="section-2025">
  <div class="container-2025">
    {% if !upcoming_events.is_empty() %}
      <div class="events-grid">
        {% for event in upcoming_events %}
          <div class="event-card-2025 scroll-reveal">
            <div class="event-image-2025" {% if event.image %}style="background-image: url('{{ event.image }}');"{% endif %}></div>
            <div class="event-content-2025">
              <h3 class="event-title">{{ event.title }}</h3>
              <p><i class="fas fa-clock"></i> {{ event.start_time }} - {{ event.end_time }}</p>
              <p><i class="fas fa-map-marker-alt"></i> {{ event.location }}</p>
              {% if event.description %}
                <p>{{ event.description }}</p>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    {% else %}
      <div class="card-2025 scroll-reveal" style="text-align: center;">
        <h3>No upcoming events at this time</h3>
        <p>Check back soon for new events and activities!</p>
      </div>
    {% endif %}
  </div>
</section>
{% endblock %}