{% load i18n phoxtail_design_tags wagtailimages_tags %}

{% if offset == 0 and not results %}
{% if tab == "images" %}{% translate "images" context "media kind" as kind %}{% elif tab == "videos" %}{% translate "videos" context "media kind" as kind %}{% elif tab == "audio" %}{% translate "audio files" context "media kind" as kind %}{% elif tab == "documents" %}{% translate "documents" context "media kind" as kind %}{% else %}{% translate "pages" context "media kind" as kind %}{% endif %}
<div class="phoxtail-media-picker-empty">{% if query %}{% blocktranslate %}No {{ kind }} found for "{{ query }}".{% endblocktranslate %}{% else %}{% blocktranslate %}No {{ kind }} found.{% endblocktranslate %}{% endif %}</div>

{% elif tab == "images" %}
{% if offset == 0 %}<div class="phoxtail-media-picker-grid">{% endif %}
    {% for item in results %}
    {% image item fill-160x120 as thumb %}
    {% image item max-800x600 as lbx_img %}
    <div class="phoxtail-media-picker-thumb"
         draggable="true"
         data-media-type="image"
         data-media-id="{{ item.pk }}"
         data-media-title="{{ item.title }}"
         data-media-file-url="{{ item.file.url }}"
         data-media-lightbox-url="{{ lbx_img.url }}"
         data-media-width="{{ item.width }}"
         data-media-height="{{ item.height }}"
         data-media-description="{{ item.description }}"
         data-media-file-size="{{ item.file_size|default:'' }}"
         data-media-created-at="{{ item.created_at|date:'M j, Y' }}"
         data-media-tags="{{ item.tags.all|join:', ' }}"
         data-media-collection="{{ item.collection.name }}"
         data-media-focal-x="{{ item.focal_point_x|default:'' }}"
         data-media-focal-y="{{ item.focal_point_y|default:'' }}"
         data-media-focal-w="{{ item.focal_point_width|default:'' }}"
         data-media-focal-h="{{ item.focal_point_height|default:'' }}">
        <img src="{{ thumb.url }}" alt="{{ item.title }}" loading="lazy">
        <div class="phoxtail-media-picker-thumb-overlay"></div>
        <div class="phoxtail-media-picker-thumb-title">{{ item.title|truncatechars:28 }}</div>
    </div>
    {% endfor %}
    {% if has_more %}
    <button type="button"
            class="phoxtail-media-picker-load-more"
            hx-get="{% url 'phoxtail_agent:media_picker' %}"
            hx-vals='{"tab": "{{ tab }}", "q": "{{ query|escapejs }}", "offset": {{ next_offset }}, "collection_id": "{{ collection_id }}"}'
            hx-target="this"
            hx-swap="outerHTML">
        {% translate "Load more" %}
    </button>
    {% endif %}
{% if offset == 0 %}</div>{% endif %}

{% elif tab == "videos" %}
{% if offset == 0 %}<div class="phoxtail-media-picker-grid">{% endif %}
    {% for item in results %}
    <div class="phoxtail-media-picker-thumb phoxtail-media-picker-thumb--video"
         draggable="true"
         data-media-type="video"
         data-media-id="{{ item.pk }}"
         data-media-title="{{ item.title }}"
         data-media-file-url="{{ item.url }}"
         data-media-thumbnail-url="{% if item.thumbnail %}{{ item.thumbnail.url }}{% endif %}"
         data-media-duration="{{ item.duration|default:'' }}"
         data-media-width="{{ item.width|default:'' }}"
         data-media-height="{{ item.height|default:'' }}"
         data-media-tags="{{ item.tags.all|join:', ' }}"
         data-media-collection="{{ item.collection.name }}"
         data-media-created-at="{{ item.created_at|date:'M j, Y' }}">
        {% if item.thumbnail %}
        <img src="{{ item.thumbnail.url }}" alt="{{ item.title }}" loading="lazy">
        {% else %}
        <div class="phoxtail-media-picker-thumb-placeholder">
            {% icon "videocam" class="phoxtail-media-picker-thumb-placeholder-icon" %}
        </div>
        {% endif %}
        <div class="phoxtail-media-picker-thumb-overlay"></div>
        <div class="phoxtail-media-picker-thumb-title">{{ item.title|truncatechars:28 }}</div>
    </div>
    {% endfor %}
    {% if has_more %}
    <button type="button"
            class="phoxtail-media-picker-load-more"
            hx-get="{% url 'phoxtail_agent:media_picker' %}"
            hx-vals='{"tab": "{{ tab }}", "q": "{{ query|escapejs }}", "offset": {{ next_offset }}, "collection_id": "{{ collection_id }}"}'
            hx-target="this"
            hx-swap="outerHTML">
        {% translate "Load more" %}
    </button>
    {% endif %}
{% if offset == 0 %}</div>{% endif %}

{% elif tab == "audio" %}
{% if offset == 0 %}<div class="phoxtail-media-picker-rows">{% endif %}
    {% for item in results %}
    <div class="phoxtail-media-picker-doc-row phoxtail-media-picker-audio-row"
         draggable="true"
         data-media-type="audio"
         data-media-id="{{ item.pk }}"
         data-media-title="{{ item.title }}"
         data-media-file-url="{{ item.url }}"
         data-media-duration="{{ item.duration|default:'' }}"
         data-media-file-extension="{{ item.file_extension }}"
         data-media-created-at="{{ item.created_at|date:'M j, Y' }}"
         data-media-tags="{{ item.tags.all|join:', ' }}"
         data-media-collection="{{ item.collection.name }}">
        {% icon "music_note" class="phoxtail-bar-row-icon" %}
        <div class="phoxtail-bar-row-info">
            <span class="phoxtail-bar-row-type">{{ item.title|truncatechars:40 }}</span>
            <span class="phoxtail-bar-row-meta">{{ item.file_extension|upper }}{% if item.duration %} · {{ item.duration|floatformat:0 }}s{% endif %}</span>
        </div>
        <button type="button"
                class="phoxtail-media-picker-add-btn"
                title="{% translate "Add to chat" %}">
            {% icon "plus" class="phoxtail-bar-btn-icon" %}
        </button>
    </div>
    {% endfor %}
    {% if has_more %}
    <button type="button"
            class="phoxtail-media-picker-load-more"
            hx-get="{% url 'phoxtail_agent:media_picker' %}"
            hx-vals='{"tab": "{{ tab }}", "q": "{{ query|escapejs }}", "offset": {{ next_offset }}, "collection_id": "{{ collection_id }}"}'
            hx-target="this"
            hx-swap="outerHTML">
        {% translate "Load more" %}
    </button>
    {% endif %}
{% if offset == 0 %}</div>{% endif %}

{% elif tab == "documents" %}
{% if offset == 0 %}<div class="phoxtail-media-picker-rows">{% endif %}
    {% for item in results %}
    <div class="phoxtail-media-picker-doc-row"
         draggable="true"
         data-media-type="document"
         data-media-id="{{ item.pk }}"
         data-media-title="{{ item.title }}"
         data-media-file-url="{{ item.url }}"
         data-media-file-extension="{{ item.file_extension }}"
         data-media-file-size="{{ item.file_size }}"
         data-media-tags="{{ item.tags.all|join:', ' }}"
         data-media-collection="{{ item.collection.name }}"
         data-media-created-at="{{ item.created_at|date:'M j, Y' }}">
        {% icon "draft" class="phoxtail-bar-row-icon" %}
        <div class="phoxtail-bar-row-info">
            <span class="phoxtail-bar-row-type">{{ item.title|truncatechars:40 }}</span>
            <span class="phoxtail-bar-row-meta">{{ item.file_extension|upper }}{% if item.file_size %} · {{ item.file_size|filesizeformat }}{% endif %}</span>
        </div>
        <button type="button"
                class="phoxtail-media-picker-add-btn"
                title="{% translate "Add to chat" %}">
            {% icon "plus" class="phoxtail-bar-btn-icon" %}
        </button>
    </div>
    {% endfor %}
    {% if has_more %}
    <button type="button"
            class="phoxtail-media-picker-load-more"
            hx-get="{% url 'phoxtail_agent:media_picker' %}"
            hx-vals='{"tab": "{{ tab }}", "q": "{{ query|escapejs }}", "offset": {{ next_offset }}, "collection_id": "{{ collection_id }}"}'
            hx-target="this"
            hx-swap="outerHTML">
        {% translate "Load more" %}
    </button>
    {% endif %}
{% if offset == 0 %}</div>{% endif %}

{% elif tab == "menu" %}
{% if offset == 0 %}<div class="phoxtail-media-picker-menu-tree{% if query %} phoxtail-media-picker-menu-tree--flat{% endif %}">{% endif %}
    {% include "phoxtail_agent/partials/menu_picker_nodes.html" with pages=results flat=query active_page_id=active_page_id active_ancestor_ids=active_ancestor_ids %}
    {% if has_more %}
    <button type="button"
            class="phoxtail-media-picker-load-more"
            hx-get="{% url 'phoxtail_agent:media_picker' %}"
            hx-vals='{"tab": "menu", "q": "{{ query|escapejs }}", "offset": {{ next_offset }}, "page_id": "{{ active_page_id|default:'' }}"}'
            hx-target="this"
            hx-swap="outerHTML">
        {% translate "Load more" %}
    </button>
    {% endif %}
{% if offset == 0 %}</div>{% endif %}

{% endif %}