{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% url 'streams-sync:variant_detail' as variant_detail_url %}
{% url 'streams-sync:streams' as streams_url %}
{% if remote_warning %}
    <div class="phx-notice phx-notice--warning sync-notice">
        {% icon "warning" %}
        <p>{{ remote_warning }}</p>
    </div>
{% endif %}
{% if error %}
    <div class="phx-notice phx-notice--destructive sync-notice">
        {% icon "warning" %}
        <p>{{ error }}</p>
    </div>
{% elif not page %}
    <div class="phx-empty phx-card">
        <h3 class="phx-empty__title">{% translate "No variants found" %}</h3>
        <p class="phx-empty__text">
            {% if q %}
                {% translate "Try a different search term." %}
            {% else %}
                {% translate "Nothing to display here yet." %}
            {% endif %}
        </p>
    </div>
{% else %}
    <div class="phx-grid">
        {% for item in page %}
            <div class="phx-card phx-card--clickable sync-card">
                <div class="sync-card__media">
                    {% if item.sync_state == 'differs' %}
                        <span class="phx-tag phx-tag--warning phx-tag--overlay">{% translate "Unsynced" %}</span>
                    {% elif item.sync_state == 'not_local' or item.sync_state == 'not_remote' %}
                        <span class="phx-tag phx-tag--info phx-tag--overlay">{% translate "New" context "sync state" %}</span>
                    {% elif item.sync_state == 'in_sync' %}
                        <span class="phx-tag phx-tag--success phx-tag--overlay">{% translate "Synced" %}</span>
                    {% endif %}
                    {% if item.preview_desktop_light_url or item.preview_desktop_dark_url %}
                        <picture>
                            {% if item.preview_desktop_dark_url %}
                                <source srcset="{{ item.preview_desktop_dark_url }}" media="(prefers-color-scheme: dark)">
                            {% endif %}
                            <img src="{{ item.preview_desktop_light_url|default:item.preview_desktop_dark_url }}"
                                 alt="{{ item.title }}"
                                 loading="lazy">
                        </picture>
                    {% else %}
                        {% icon "image" %}
                    {% endif %}
                </div>
                <h4 class="phx-card__title">{{ item.title }}</h4>
                {% if item.block_name %}<p class="phx-card__text">{{ item.block_name }}</p>{% endif %}
                <button class="phx-card__button"
                        type="button"
                        hx-get="{% url 'phoxtail_core:modal' %}"
                        hx-vals='{"content_url": "{{ variant_detail_url }}", "variant_id": "{{ item.id }}", "remote_id": "{{ remote_id }}", "mode": "{{ mode }}"}'
                        hx-target="#core-modal-placeholder-wrapper"
                        hx-swap="innerHTML"
                        aria-label="{% blocktranslate with title=item.title %}View {{ title }}{% endblocktranslate %}">
                </button>
            </div>
        {% endfor %}
    </div>
    {% paginator page url=streams_url include="#remote-selected-value, #streams-mode-control, #sync-search-form" param="filter-page" %}
{% endif %}