{% extends 'layout.html' %}
{% load i18n %}

{% block title %}{% trans "Directory" %}{% endblock %}

{% block content %}
<header class="block">
    <h1 class="title">
        {% trans "Directory" %}
    </h1>
</header>

{% if not request.user.discoverable %}
<div class="box has-text-centered content" data-hide="hide_join_directory"><div class="columns">
    <div class="column">
    <p>
        {% trans "Make your profile discoverable to other BookWyrm users." %}
    </p>
    <form name="directory" method="POST" action="{% url 'directory' %}">
        {% csrf_token %}
        <button class="button is-primary" type="submit">{% trans "Join Directory" %}</button>
        <p class="help">
            {% url 'prefs-profile' as path %}
            {% blocktrans with path=path %}You can opt-out at any time in your <a href="{{ path }}">profile settings.</a>{% endblocktrans %}
        </p>
    </form>
    </div>
    <div class="column is-narrow">
        {% trans "Dismiss message" as button_text %}
        <button type="button" class="delete set-display" data-id="hide_join_directory" data-value="true">
            <span>{% trans "Dismiss message" %}</span>
        </button>
    </div>
</div></div>
{% endif %}

{% include 'directory/filters.html' %}

<div class="columns is-multiline">
    {% for user in users %}
    <div class="column is-one-third">
        {% include 'directory/user_card.html' %}
    </div>
    {% endfor %}
</div>

<div>
    {% include 'snippets/pagination.html' with page=users path="/directory" %}
</div>

{% endblock %}