{% extends "settings/base.html" %}

{% block subtitle %}Identities{% endblock %}

{% block content %}
    <form action="." class="search">
        <input type="search" name="query" value="{{ query }}" placeholder="Search by name/username">
        {% if local_only %}
            <input type="hidden" name="local_only" value="true">
        {% endif %}
        <button><i class="fa-solid fa-search"></i></button>
    </form>
    <div class="view-options">
        {% if local_only %}
            <a href=".?{% if query %}query={{ query }}{% endif %}" class="selected"><i class="fa-solid fa-check"></i> Local Only</a>
        {% else %}
            <a href=".?local_only=true{% if query %}&amp;query={{ query }}{% endif %}"><i class="fa-solid fa-xmark"></i> Local Only</a>
        {% endif %}
    </div>
    <section class="icon-menu">
        {% for identity in page_obj %}
            <a class="option" href="{{ identity.urls.admin_edit }}">
                <img src="{{ identity.local_icon_url.relative }}" class="icon" alt="Avatar for {{ identity.name_or_handle }}" loading="lazy">
                <span class="handle">
                    {{ identity.html_name_or_handle }}
                    <small>
                        {{ identity.handle }}
                    </small>
                </span>
                {% if identity.banned %}
                    <span class="pill bad">Banned</span>
                {% endif %}
            </a>
        {% empty %}
            <p class="option empty">
                {% if query %}
                    No identities match your query.
                {% else %}
                    There are no identities yet.
                {% endif %}
            </p>
        {% endfor %}
        <div class="load-more">
            {% if page_obj.has_previous %}
                <a class="button" href=".?page={{ page_obj.previous_page_number }}{% if local_only %}&amp;local_only=true{% endif %}{% if query %}&amp;query={{ query }}{% endif %}">Previous Page</a>
            {% endif %}
            {% if page_obj.has_next %}
                <a class="button" href=".?page={{ page_obj.next_page_number }}{% if local_only %}&amp;local_only=true{% endif %}{% if query %}&amp;query={{ query }}{% endif %}">Next Page</a>
            {% endif %}
        </div>
    </section>
{% endblock %}