{% extends "base.html" %}

{% block content %}

<div class="mx-auto text-center">
    <h1>Matchbook</h1>
    <ul class="list-group list-group-flush" id="matchbooklist">
        {% for user in userlist %}
        <li class="list-group-item matchbook-bg border rounded mx-auto">
            {% if user.profile_image %}
                <img src="static/uploads/{{ user.profile_image }}" class="border rounded-circle red-border">
            {% else %}
                <img src="static/uploads/default.png" class="border rounded-circle red-border">
            {% endif %}
            <p>{{ user.firstname }}</p>
            <p style="font-weight: 900;">{{ user.lastname }}</p>
            <p>{{ user.gender }} , {{ user.age }}</p>
            <p>{{ user.description }}</p>
            <form method="POST">
                <button type="submit" class="btn btn-primary" name="message_recipient" value="{{ user.id }}">Message</button>
            </form>
        </li>
        {% endfor %}
    </ul>
</div>

{% endblock %}