{% if show_edit_button %}
<section id="theme" class="bg-white rounded-xl p-6 shadow-sm border border-slate-200">
  {% if show_edit_button %}
    <div class="flex items-center justify-between group">
      <div>
        <h2 class="text-xl font-semibold text-slate-800 mb-2">Theme Settings</h2>
        <p class="text-slate-600">Current theme: <span class="font-medium text-blue-600">{{ theme.name|title }}</span></p>
      </div>
      <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="{{ theme.edit_url }}"
        hx-target="#theme"
        hx-swap="outerHTML"
        title="Change theme"
      >
        <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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v12a4 4 0 004 4h4a2 2 0 002-2V5z"></path>
        </svg>
      </button>
    </div>
  {% else %}
    <div>
      <h2 class="text-xl font-semibold text-slate-800 mb-2">Theme Settings</h2>
      <p class="text-slate-600">Current theme: <span class="font-medium text-blue-600">{{ theme.name|title }}</span></p>
    </div>
  {% endif %}

  <script>
      document.addEventListener("htmx:afterSwap", function (evt) {
          if (evt.detail.target.id === "theme" && evt.detail.requestConfig.verb === "post") {
              window.location.reload();
          }
      });
  </script>
</section>
{% endif %}