{% if include.calendar_id %}
  <div class="post mt-4">
    <h2 class="mb-3"><i class="fas fa-calendar-alt"></i> Upcoming Events</h2>

    <button
      class="btn btn-sm btn-outline-primary mb-3"
      onclick="toggleCalendar()"
      id="calendar-toggle-btn"
    >
      Show Calendar
    </button>

    <div class="calendar-wrapper" id="calendar-container" style="display: none;">
      <iframe
        id="calendar-iframe"
        data-calendar-id="{{ include.calendar_id }}"
        data-timezone="{{ include.timezone | default: 'UTC' }}"
        style="{{ include.style | default: 'border:0; width:100%; height:600px;' }}"
        frameborder="0"
        scrolling="no"
      >
      </iframe>
    </div>
  </div>
{% endif %}