{% import "macros.jinja" as macros %}
{% if current_page == 'moderation-panel' %}
    {% set user_link = '/moderation?viewing=user&username=' + crab.username %}
{% else %}
    {% set user_link = '/user/' + crab.username %}
{% endif %}

<div class="mini-molt mini-bio {{'border-bottom' if not hide_border}} border-dark px-3 py-2 d-flex flex-row">
    <div class="mini-molt-profile-box zindex-front">
        <a href="{{user_link}}">
            <div class="rounded-circle px43 profile-picture"
                style="background-image: url('{{crab.avatar}}');"></div>
        </a>
    </div>
    <div class="mini-molt-text-box w-100 h-100 px-2">
        <!-- Display correct follow button if page is not current user -->
        {% if crab != current_user and current_user and not crab.is_blocked_by(current_user) %}
        <form method="POST" class="mini-follow zindex-front">
            <input type="hidden" name="target_user" value="{{crab.id}}">
            <!-- TODO: When an unfollow button is first display (hard refresh) clicking it the first time doesn't update screen. all further clicks do. -->
            {% if not current_user in crab.followers %}
            <input type="hidden" name="user_action" value="follow">
            <button type="button" onclick="SubForm(this.parentNode, '/');toggleFollow(this);"
                                  class="btn btn-outline-primary rounded-pill" id="follow-btn">
            {% if spooky_mode %}
                <strong class="default-text">Haunt</strong>
                <strong class="hover-text">Haunt</strong>
            {% else %}
                <strong class="default-text">Follow</strong>
                <strong class="hover-text">Follow</strong>
            {% endif %}
            </button>
            {% else %}
            <input type="hidden" name="user_action" value="unfollow">
            <button type="button" onclick="SubForm(this.parentNode, '/');toggleFollow(this);"
                                  class="btn btn-primary rounded-pill" id="follow-btn">
            {% if spooky_mode %}
                <strong class="default-text">Haunting</strong>
                <strong class="hover-text">Unhaunt</strong>
            {% else %}
                <strong class="default-text">Following</strong>
                <strong class="hover-text">Unfollow</strong>
            {% endif %}
            </button>
            {% endif %}
        </form>
        {% endif %}
        <div class="mini-molt-credentials {{"mt-1" if is_remolt else ""}}"><a href="{{user_link}}"
                class="mini-molt-display-name zindex-front">{{crab.display_name}}</a>
            {% if crab.verified %}
            <a title="This user is verified">{{macros.verified(17)}}</a>
            {% endif %}
            <br><span class="mini-molt-username zindex-front"
                style="position: relative;top: -.1em;">@{{crab.username}}
                {% if current_user in crab.following and not hide_description %}
                    <small class="follows-you">
                    {% if spooky_mode %}
                        Haunts you
                    {% else %}
                        Follows you
                    {% endif %}
                    </small>
                {% endif %}
            </span>
        </div>
        {% if not hide_description %}
            <div class="mini-molt-content">
                <p class="mb-2">{{crab.description}}</p>
            </div>
        {% endif %}
        {% if current_page == 'moderation-panel' %}
            <p class="text-muted">
                email: {{crab.email}}
            </p>
        {% endif %}
    </div>
    <!-- User page link -->
    <a href="{{user_link}}" class="absolute-fill mini-bio-link"
    {% if current_page == 'moderation-panel' %}
        target="_blank"
    {% endif %}
    ></a>
</div>