<section id="education" class="bg-white rounded-xl p-6 shadow-sm border border-slate-200">
  <div class="flex items-center justify-between group mb-6">
    <h2 class="text-xl font-semibold text-slate-800">Education</h2>
    {% if show_edit_button %}
      <button
        class="opacity-0 group-hover:opacity-100 transition-opacity duration-200 p-2 rounded-lg hover:bg-slate-50 text-slate-500 hover:text-slate-700"
        hx-get="{{ education.edit_url }}"
        hx-target="#education"
        hx-swap="outerHTML"
        title="Edit education"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5M16 3l5 5L9 20H4v-5L16 3z"></path>
        </svg>
      </button>
    {% endif %}
  </div>
  
  <div class="bg-slate-50 rounded-lg p-4 border border-slate-200">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
      <div>
        <h3 class="text-lg font-semibold text-slate-800">
          <a href="{{ education.school_url }}" class="text-blue-600 hover:text-blue-800 underline decoration-blue-300 hover:decoration-blue-500 transition-colors">
            {{ education.school_name }}
          </a>
        </h3>
      </div>
      <div class="text-sm text-slate-500 font-medium whitespace-nowrap">
        {{ education.start }} - {{ education.end }}
      </div>
    </div>
  </div>
</section>