{% extends "base.html" %}
{% load activity_tags %}

{% block subtitle %}Follows{% endblock %}

{% block content %}
    <div class="view-options">
        {% if inbound %}
            <a href=".">Your Follows ({{ num_outbound }})</a>
            <a href="." class="selected">Follows You ({{ num_inbound }})</a>
        {% else %}
            <a href=".?inbound=true" class="selected">Your Follows ({{ num_outbound }})</a>
            <a href=".?inbound=true">Follows You ({{ num_inbound }})</a>
        {% endif %}
    </div>

    <section class="icon-menu">
        {% for identity in page_obj %}
            <a class="option" href="{{ identity.urls.view }}">
                <img src="{{ identity.local_icon_url.relative }}" loading="lazy">
                <span class="handle">
                    {{ identity.html_name_or_handle }}
                    <small>@{{ identity.handle }}</small>
                </span>

                {% if identity.id in outbound_ids %}
                    <span class="pill">Following</span>
                {% endif %}
                {% if identity.id in inbound_ids %}
                    <span class="pill">Follows You</span>
                {% endif %}

                <div class="right">
                    {% if inbound %}
                      <form action="{{ identity.urls.action }}" method="POST" class="follow">
                          {% csrf_token %}
                          {% if identity.id in outbound_ids %}
                              <input type="hidden" name="action" value="unfollow">
                              <button class="destructive">Unfollow</button>
                          {% else %}
                              <input type="hidden" name="action" value="follow">
                              <button>Follow</button>
                          {% endif %}
                      </form>
                    {% endif %}

                    <time>{{ identity.follow_date | timedeltashort }} ago</time>
                </div>
            </a>
        {% empty %}
            <p class="option empty">You have no follows.</p>
        {% endfor %}
    </section>

    <div class="pagination">
        {% if page_obj.has_previous %}
            <a class="button" href=".?page={{ page_obj.previous_page_number }}{% if inbound %}&amp;inbound=true{% endif %}">Previous Page</a>
        {% endif %}

        {% if page_obj.has_next %}
            <a class="button" href=".?page={{ page_obj.next_page_number }}{% if inbound %}&amp;inbound=true{% endif %}">Next Page</a>
        {% endif %}
    </div>
{% endblock %}
