{% if page_break_before %}
<section id="{{ timeline.plugin_name }}" class="bg-white rounded-xl p-6 shadow-sm border border-slate-200 mt-8 print:mt-4 print:page-break-before">
{% else %}
<section id="{{ timeline.plugin_name }}" class="bg-white rounded-xl p-6 shadow-sm border border-slate-200">
{% endif %}
  {% include timeline.templates.flat %}
  
  <div class="space-y-6 mt-6">
    {% if show_edit_button %}
      <div id="add-{{ timeline.plugin_name }}-container" class="space-y-4">
        <div class="flex justify-center">
          <button 
            id="add-{{ timeline.plugin_name }}-icon" 
            class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg shadow-md hover:shadow-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" 
            hx-get="{{ timeline.add_item_url }}" 
            hx-target="#add-{{ timeline.plugin_name }}-container" 
            hx-swap="beforeend"
          >
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4"></path>
            </svg>
            Add Entry
          </button>
        </div>
      </div>
    {% endif %}
    
    {% for entry in timeline.ordered_entries %}
      <div>
        {% include timeline.templates.item with plugin_name=timeline.plugin_name %}
      </div>
    {% endfor %}
  </div>
</section>