{#
    Media selector modal - shared by every `[data-editable-image="true"]` field
    (Actualité mainImage/block images, About heroImage POC, and any future one).
    Bound by assets/admin/media/MediaSelectorModal.ts - never duplicate this markup,
    include this partial instead.
#}
<div id="media-selector-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; overflow-y: auto;">
    <div style="max-width: 1200px; margin: 50px auto; background: white; border-radius: 8px; padding: 30px;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h2 style="margin: 0;">Sélectionner une image</h2>
            <button id="close-media-selector" style="background: #e74c3c; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">Fermer</button>
        </div>

        {# Direct upload - bypasses folder browsing, uploads to root and auto-selects #}
        <div id="media-upload-zone" style="margin-bottom: 20px; padding: 20px; border: 2px dashed #999; border-radius: 8px; text-align: center; cursor: pointer;">
            <input type="file" id="media-upload-input" accept="image/jpeg,image/jpg,image/png,image/gif,image/webp" multiple style="display: none;">
            <span id="media-upload-label">📤 Cliquez ou glissez une ou plusieurs images ici pour les importer</span>
        </div>

        <div id="media-folder-breadcrumb" style="margin-bottom: 15px; padding: 10px; background: #f5f5f5; border-radius: 4px; font-size: 14px;">
            <a href="#" data-folder-id="">Racine</a>
        </div>

        <div id="media-folder-list" style="margin-bottom: 15px;"></div>

        <div id="media-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px;"></div>
    </div>
</div>