<section class="bg-white rounded-xl p-6 shadow-sm border border-slate-200 print:page-break-before">
  {% include projects.templates.flat %}
  
  {% if show_edit_button %}
    <div class="flex justify-center mb-6">
      <button 
        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="{{ projects.add_item_url }}" 
        hx-target="#projects-grid" 
        hx-swap="afterbegin"
      >
        <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 Project
      </button>
    </div>
  {% endif %}
  
  <div id="projects-grid" class="grid grid-cols-1 md:grid-cols-2 gap-6">
    {% for project in projects.ordered_entries %}
      <div class="animate-fade-in">
        {% include projects.templates.item %}
      </div>
    {% endfor %}
  </div>
</section>