{% extends "phoxtail_core/page_header.html" %}
{% load i18n phoxtail_core_tags phoxtail_design_tags %}
{% block icon %}{% icon "graph_5" %}{% endblock %}
{% block title %}{% translate "Remotes" %}{% endblock %}
{% block controls %}
    {% url 'remotes:search' as search_url %}
    <form id="remotes-search-form" class="phx-page-header__search">
        {% field "search" search_form.search count=remotes.paginator.count placeholder=_("Search…") hx_get=search_url %}
        {{ search_form.page }}
    </form>
    <!-- Connect Button -->
    {% url 'remotes:add_form' as add_form_url %}
    <button type="button"
            class="phx-button phx-button--secondary"
            hx-get="{% url 'phoxtail_core:modal' %}"
            hx-vals='{"content_url": "{{ add_form_url }}"}'
            hx-target="#core-modal-placeholder-wrapper"
            hx-swap="innerHTML">
        {% icon "plus" %}
        <span>{% translate "Connect" %}</span>
    </button>
{% endblock %}