<div class="dam-wrapper">
  <div class="dam-folder-modal" id="dam-folder-modal">
    <div class="dam-folder-modal__backdrop"></div>
    <div class="dam-folder-modal__content">
      <div class="dam-folder-modal__header">
        <h3 class="dam-folder-modal__title" id="dam-folder-modal-title">Edit Folder</h3>
        <button type="button" class="dam-folder-modal__close" aria-label="Close">&times;</button>
      </div>
      <div class="dam-folder-modal__body">
        <div class="dam-folder-modal__field">
          <label class="dam-folder-modal__label" for="dam-folder-name">Folder Name</label>
          <input type="text" id="dam-folder-name" class="dam-folder-modal__input" placeholder="Enter folder name">
        </div>
        <div class="dam-folder-modal__field">
          <label class="dam-folder-modal__label" for="dam-folder-parent">Parent Folder</label>
          <select id="dam-folder-parent" class="dam-folder-modal__select">
            <option value="">— Root level —</option>
            {% for folder in folders %}
              <option value="{{ folder.id }}">{% for i in 1..folder.depth %}—{% endfor %}{{ folder.depth > 0 ? ' ' : '' }}{{ folder.name }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div class="dam-folder-modal__footer">
        <button type="button" class="dam-folder-modal__cancel">Cancel</button>
        <button type="button" class="dam-folder-modal__save">Save</button>
      </div>
      <input type="hidden" id="dam-folder-modal-id">
      <input type="hidden" id="dam-folder-modal-mode" value="edit">
    </div>
  </div>

  <div class="dam-collection-modal" id="dam-collection-modal">
    <div class="dam-collection-modal__backdrop"></div>
    <div class="dam-collection-modal__content">
      <div class="dam-collection-modal__header">
        <h3 class="dam-collection-modal__title" id="dam-collection-modal-title">Edit Collection</h3>
        <button type="button" class="dam-collection-modal__close" aria-label="Close">&times;</button>
      </div>
      <div class="dam-collection-modal__body">
        <div class="dam-collection-modal__field">
          <label class="dam-collection-modal__label" for="dam-collection-name">Collection Name</label>
          <input type="text" id="dam-collection-name" class="dam-collection-modal__input" placeholder="Enter collection name">
        </div>
      </div>
      <div class="dam-collection-modal__footer">
        <button type="button" class="dam-collection-modal__delete" id="dam-collection-modal-delete" style="display: none;">Delete</button>
        <div class="dam-collection-modal__footer-right">
          <button type="button" class="dam-collection-modal__cancel">Cancel</button>
          <button type="button" class="dam-collection-modal__save">Save</button>
        </div>
      </div>
      <input type="hidden" id="dam-collection-modal-id">
      <input type="hidden" id="dam-collection-modal-mode" value="edit">
    </div>
  </div>

  <div class="dam-preview" id="dam-preview">
    <div class="dam-preview__backdrop"></div>
    <div class="dam-preview__content">
      <button type="button" class="dam-preview__close" aria-label="Close">&times;</button>
      <div class="dam-preview__media"></div>
      <div class="dam-preview__info">
        <div class="dam-preview__field">
          <label class="dam-preview__label" for="dam-preview-name">Name</label>
          <input type="text" id="dam-preview-name" class="dam-preview__name-input">
        </div>
        <div class="dam-preview__field dam-preview__alt-field" style="display: none;">
          <label class="dam-preview__label" for="dam-preview-alt">Alt text</label>
          <input type="text" id="dam-preview-alt" class="dam-preview__alt-input">
        </div>
        <button type="button" class="dam-preview__save button" style="display: none;">Save changes</button>
        <dl class="dam-preview__meta">
          <dt>Type</dt>
          <dd class="dam-preview__type"></dd>
          <div class="dam-preview__dimensions-row" style="display: none;">
            <dt>Dimensions</dt>
            <dd class="dam-preview__dimensions"></dd>
          </div>
          <div class="dam-preview__filesize-row">
            <dt>File size</dt>
            <dd class="dam-preview__filesize"></dd>
          </div>
          <dt>Created</dt>
          <dd class="dam-preview__date"></dd>
        </dl>
        <div class="dam-preview__styles" style="display: none;">
          <h4 class="dam-preview__styles-title">Image URLs</h4>
          <ul class="dam-preview__styles-list"></ul>
        </div>
        <div class="dam-preview__actions">
          <a href="#" class="dam-preview__edit button">Edit</a>
        </div>
      </div>
    </div>
  </div>

  <div class="dam-bulk-modal" id="dam-bulk-move-modal">
    <div class="dam-bulk-modal__backdrop"></div>
    <div class="dam-bulk-modal__content">
      <div class="dam-bulk-modal__header">
        <h3 class="dam-bulk-modal__title">Move to Folder</h3>
        <button type="button" class="dam-bulk-modal__close" aria-label="Close">&times;</button>
      </div>
      <div class="dam-bulk-modal__body">
        <p class="dam-bulk-modal__info">Move <span id="dam-bulk-move-count">0</span> selected items to:</p>
        <select id="dam-bulk-move-folder" class="dam-bulk-modal__select">
          <option value="_none">— Unfiled —</option>
          {% for folder in folders %}
            <option value="{{ folder.id }}">{% for i in 1..folder.depth %}—{% endfor %}{{ folder.depth > 0 ? ' ' : '' }}{{ folder.name }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="dam-bulk-modal__footer">
        <button type="button" class="dam-bulk-modal__cancel">Cancel</button>
        <button type="button" class="dam-bulk-modal__confirm" id="dam-bulk-move-confirm">Move</button>
      </div>
    </div>
  </div>

  <div class="dam-bulk-modal" id="dam-bulk-collection-modal">
    <div class="dam-bulk-modal__backdrop"></div>
    <div class="dam-bulk-modal__content">
      <div class="dam-bulk-modal__header">
        <h3 class="dam-bulk-modal__title">Add to Collection</h3>
        <button type="button" class="dam-bulk-modal__close" aria-label="Close">&times;</button>
      </div>
      <div class="dam-bulk-modal__body">
        <p class="dam-bulk-modal__info">Add <span id="dam-bulk-collection-count">0</span> selected items to:</p>
        <div class="dam-bulk-modal__collection-select" id="dam-bulk-collection-select-wrapper">
          <select id="dam-bulk-collection-select" class="dam-bulk-modal__select">
            <option value="">— Select a collection —</option>
            {% for collection in collections %}
              <option value="{{ collection.id }}">{{ collection.name }}</option>
            {% endfor %}
            <option value="_new">+ Create new collection</option>
          </select>
        </div>
        <div class="dam-bulk-modal__new-collection" id="dam-bulk-new-collection" style="display: none;">
          <input type="text" id="dam-bulk-new-collection-name" class="dam-bulk-modal__input" placeholder="New collection name">
          <button type="button" class="dam-bulk-modal__back" id="dam-bulk-collection-back" title="Back to list">&larr;</button>
        </div>
      </div>
      <div class="dam-bulk-modal__footer">
        <button type="button" class="dam-bulk-modal__cancel">Cancel</button>
        <button type="button" class="dam-bulk-modal__confirm" id="dam-bulk-collection-confirm">Add</button>
      </div>
    </div>
  </div>

  <div class="dam-bulk-bar" id="dam-bulk-bar">
    <div class="dam-bulk-bar__info">
      <span id="dam-bulk-count">0</span> selected
    </div>
    <div class="dam-bulk-bar__actions">
      <button type="button" class="dam-bulk-bar__btn" id="dam-bulk-move" title="Move to folder">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
        </svg>
        Move
      </button>
      <button type="button" class="dam-bulk-bar__btn" id="dam-bulk-collection" title="Add to collection">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/>
          <line x1="7" y1="7" x2="7.01" y2="7"/>
        </svg>
        Add to Collection
      </button>
      <button type="button" class="dam-bulk-bar__btn dam-bulk-bar__btn--danger" id="dam-bulk-remove-collection" title="Remove from collection" style="display: none;">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"/>
          <line x1="6" y1="6" x2="18" y2="18"/>
        </svg>
        Remove from Collection
      </button>
      <button type="button" class="dam-bulk-bar__btn" id="dam-bulk-download" title="Download as ZIP">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
          <polyline points="7 10 12 15 17 10"/>
          <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        Download
      </button>
      <button type="button" class="dam-bulk-bar__btn dam-bulk-bar__btn--clear" id="dam-bulk-clear" title="Clear selection">
        Clear
      </button>
    </div>
  </div>

  {# Main search bar - full width above layout #}
  <div class="dam-search-bar">
    <div class="dam-search-group">
      <select
        name="type"
        class="dam-group-select"
        hx-get="/nodehive/admin/dam/grid"
        hx-trigger="change"
        hx-target="#dam-grid"
        hx-include=".dam-filters__input, .dam-filters__select, .dam-group-select"
      >
        <option value="">{{ 'All types'|t }}</option>
        {% for id, label in media_types %}
          <option value="{{ id }}">{{ label }}</option>
        {% endfor %}
      </select>
      <div class="dam-search-input-wrapper">
        <svg class="dam-search-icon" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input
          type="search"
          name="search"
          placeholder="{{ 'Search media...'|t }}"
          class="dam-search-input dam-filters__input"
          hx-get="/nodehive/admin/dam/grid"
          hx-trigger="input changed delay:300ms, search"
          hx-target="#dam-grid"
          hx-include=".dam-filters__input, .dam-filters__select, .dam-group-select"
        >
      </div>
    </div>
    <input type="hidden" name="folder" id="dam-folder-input" class="dam-filters__select" value="">
    <input type="hidden" name="collection" id="dam-collection-input" class="dam-filters__select" value="">
    <script>
      // Set filter values from URL hash immediately before HTMX processes.
      (function() {
        var hash = window.location.hash.substring(1);
        if (!hash) return;
        var parts = hash.split('=');
        if (parts.length !== 2) return;
        var type = parts[0];
        var id = parts[1];
        if (type === 'folder') {
          var folderInput = document.getElementById('dam-folder-input');
          if (folderInput) {
            folderInput.value = (id === 'unfiled') ? '_none' : id;
          }
        } else if (type === 'collection') {
          var collectionInput = document.getElementById('dam-collection-input');
          if (collectionInput) {
            collectionInput.value = id;
          }
        }
      })();
    </script>
  </div>

  <div class="dam-layout">
    <aside class="dam-sidebar">
      <div class="dam-upload-zone dam-upload-zone--sidebar" id="dam-upload-zone">
        <div class="dam-upload-zone__content">
          <svg class="dam-upload-zone__icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="17 8 12 3 7 8"/>
            <line x1="12" y1="3" x2="12" y2="15"/>
          </svg>
          <p class="dam-upload-zone__text">Drop files or <button type="button" class="dam-upload-zone__button">browse</button></p>
        </div>
        <input type="file" id="dam-file-input" class="dam-upload-zone__input" multiple accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.xls,.xlsx,.txt">
        <div class="dam-upload-zone__progress" id="dam-upload-progress"></div>
      </div>

      <div class="dam-sidebar__header">
        <h3 class="dam-sidebar__title">{{ 'Folders'|t }}</h3>
        <button type="button" class="dam-sidebar__add" id="dam-add-folder" title="{{ 'New folder'|t }}">+</button>
      </div>
      <ul class="dam-folders" id="dam-folders">
        <li class="dam-folders__item dam-folders__item--active" data-folder="">
          <button type="button" class="dam-folders__btn">
            <span class="dam-folders__icon">📁</span>
            <span class="dam-folders__name">{{ 'All Media'|t }}</span>
          </button>
        </li>
        <li class="dam-folders__item" data-folder="_none">
          <button type="button" class="dam-folders__btn">
            <span class="dam-folders__icon">📄</span>
            <span class="dam-folders__name">{{ 'Unfiled'|t }}</span>
          </button>
        </li>
        {% for folder in folders %}
          <li class="dam-folders__item" data-folder="{{ folder.id }}" data-folder-parent="{{ folder.parent_id }}" style="padding-left: {{ folder.depth * 16 + 8 }}px;">
            <button type="button" class="dam-folders__btn" data-folder-dropzone="{{ folder.id }}">
              <span class="dam-folders__icon">📁</span>
              <span class="dam-folders__name">{{ folder.name }}</span>
            </button>
            <button type="button" class="dam-folders__edit" title="{{ 'Edit folder'|t }}">✏️</button>
          </li>
        {% endfor %}
      </ul>

      <div class="dam-sidebar__header dam-sidebar__header--collections">
        <h3 class="dam-sidebar__title">{{ 'Collections'|t }}</h3>
        <button type="button" class="dam-sidebar__add" id="dam-add-collection" title="{{ 'New collection'|t }}">+</button>
      </div>
      <ul class="dam-collections" id="dam-collections">
        {% for collection in collections %}
          <li class="dam-collections__item" data-collection="{{ collection.id }}">
            <button type="button" class="dam-collections__btn">
              <span class="dam-collections__icon">🏷️</span>
              <span class="dam-collections__name">{{ collection.name }}</span>
            </button>
            <button type="button" class="dam-collections__edit" title="{{ 'Edit collection'|t }}">✏️</button>
          </li>
        {% endfor %}
        {% if collections is empty %}
          <li class="dam-collections__empty">{{ 'No collections yet'|t }}</li>
        {% endif %}
      </ul>
    </aside>

    <div class="dam-main">
      <div id="dam-grid" class="dam-grid" hx-get="/nodehive/admin/dam/grid" hx-trigger="load, dam-refresh" hx-include=".dam-filters__input, .dam-filters__select, .dam-group-select">
        <div class="dam-grid__loading">
          <div class="dam-grid__spinner"></div>
          <p>{{ 'Loading media...'|t }}</p>
        </div>
      </div>
    </div>
  </div>
</div>
