<section id="theme" class="mt-8">
  <h1>Theme Section</h1>
  {% if show_edit_button %}
    <div class="flex items-center justify-between">
      <h2 class="text-xl font-semibold text-gray-800">Theme</h2>
      <button
        class="text-gray-500 hover:text-gray-700"
        hx-get="{{ theme.edit_url }}"
        hx-target="#theme"
        hx-swap="outerHTML"
      >
        <!-- Pencil Icon -->
        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M11 5H6a2 2 0 00-2 2v11.5A1.5 1.5 0 005.5 20H17a2 2 0 002-2v-5M16 3l5 5L9 20H4v-5L16 3z"></path>
        </svg>
      </button>
    </div>
    <p class="mt-2 text-gray-600">{{ theme.name }}</p>
  {% else %}
    <h2 class="text-xl font-semibold text-gray-800">Theme</h2>
    <p class="mt-2 text-gray-600">{{ theme.name }}</p>
  {% endif %}
  <script>
      document.addEventListener("htmx:afterSwap", function (evt) {
          if (evt.detail.target.id === "theme" && evt.detail.requestConfig.verb === "post") {
              window.location.reload();
          }
      });
  </script>
</section>