{% comment %}Modal for creating a new folder. Expects: workspace{% endcomment %}

<div class="fixed inset-0 z-50 flex items-center justify-center" @keydown.escape.window="showNewFolder = false">
  <!-- Backdrop -->
  <div class="absolute inset-0 bg-black/30 backdrop-blur-sm" @click="showNewFolder = false"></div>

  <!-- Modal -->
  <div class="relative bg-white rounded-2xl shadow-xl w-full max-w-sm mx-4 p-6"
       @click.stop>
    <h3 class="text-base font-semibold mb-4" style="color: var(--text-primary, var(--color-stone-900));">New Folder</h3>

    <form hx-post="{% url 'media_library:folder_create' workspace_id=workspace.id %}"
          hx-target="#folder-tree"
          hx-swap="innerHTML"
          @htmx:after-request="showNewFolder = false">
      <input type="text" name="name" placeholder="Folder name..."
             class="input-focus w-full text-sm px-3 py-2 border rounded-lg outline-none mb-4"
             style="border-color: var(--border, var(--color-stone-200));"
             required autofocus>

      <div class="flex justify-end gap-2">
        <button type="button" @click="showNewFolder = false"
                class="btn-surface-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors cursor-pointer"
                style="color: var(--text-secondary, var(--color-stone-600));">
          Cancel
        </button>
        <button type="submit"
                class="btn-primary-hover px-4 py-2 text-sm font-semibold text-white rounded-lg transition-colors cursor-pointer"
                style="background: var(--primary, #F97316);">
          Create Folder
        </button>
      </div>
    </form>
  </div>
</div>