<section id="skills" 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">Skills</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="{{ skills.edit_url }}"
        hx-target="#skills"
        hx-swap="outerHTML"
        title="Edit skills"
      >
        <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>
  
  {% if skills.badges %}
    <div class="flex flex-wrap gap-2">
      {% for badge in skills.badges %}
        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 border border-blue-200">
          {{ badge }}
        </span>
      {% endfor %}
    </div>
  {% else %}
    <p class="text-slate-500 italic">No skills added yet.</p>
  {% endif %}
</section>