{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% include 'phoxtail_remotes/admin/remotes/partials/header.html' %}
<!-- Remote Cards -->
{% if remotes %}
    <div class="phx-grid">
        {% for r in remotes %}
            <div class="phx-card phx-card--clickable">
                <h4 class="phx-card__title">{{ r.name }}</h4>
                <div class="phx-card__meta">
                    <div class="phx-card__meta-row">
                        {% icon "globe" %}
                        <span class="phx-card__meta-value phx-card__meta-value--truncate">{{ r.base_url }}</span>
                    </div>
                    <div class="phx-card__meta-row">
                        {% icon "calendar_month" %}
                        <span class="phx-card__meta-value">{% blocktranslate with created_at=r.created_at|date:"M j, Y" %}Connected {{ created_at }}{% endblocktranslate %}</span>
                    </div>
                    <div class="phx-card__meta-row">
                        {% icon "key" %}
                        <span class="phx-card__meta-value">{{ r.token_fingerprint }}</span>
                    </div>
                </div>
                {% url 'remotes:edit_form' r.pk as edit_url %}
                <button class="phx-card__button"
                        type="button"
                        hx-get="{% url 'phoxtail_core:modal' %}"
                        hx-vals='{"content_url": "{{ edit_url }}"}'
                        hx-target="#core-modal-placeholder-wrapper"
                        hx-swap="innerHTML"
                        aria-label="{% blocktranslate with name=r.name %}Edit {{ name }}{% endblocktranslate %}">
                </button>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="phx-empty phx-card">
        <h3 class="phx-empty__title">
            {% if q %}
                {% blocktranslate with q=q %}No remotes match "{{ q }}"{% endblocktranslate %}
            {% else %}
                {% translate "No remotes connected" %}
            {% endif %}
        </h3>
        <p class="phx-empty__text">
            {% if q %}
                {% translate "Try a different search term." %}
            {% else %}
                {% blocktranslate trimmed %}Click <strong>Connect</strong> to add a remote Phoxtail project.{% endblocktranslate %}
            {% endif %}
        </p>
    </div>
{% endif %}
<!-- Pagination -->
{% paginator remotes url=search_url include="#remotes-search-form" param="filter-page" %}