{% extends "base.html" %}
{% block content %}
<div style="display:none">
{% block title %}YellWOWPages - User{% endblock %}
</div>

<div id="main">
    <form action="{{ url_for('bp_routes.search') }}" method="GET">
        <input type="text" name="username" placeholder="Username to search">
    </form>
    <br>
    Result(s): {{users|length}}

    {% if not users %}
    Nothing found...
    {% else %}
    <div id="addresses">
        {% for user in users %}
        <article>
            <header>
                <em>{{user.username}}</em>
            </header>
            <kbd>{{user.address}}</kbd>
        </article>
        {% endfor %}
    </div>
    {% endif %}
</div>

<style>
    #main{
        width: 100%;
        height: 80vh;
        display: grid;
        place-content: center;
    }
    form{
        height: 80px;
    }
    #addresses{
        width: 100%;
        height: 50vh;
        overflow-y: auto;
    }
    #addresses::-webkit-scrollbar{
        display: none;
    }
    #footer{
        height: 12vh;
        width: 100%;
        text-align: center;
    }
    @media (max-width: 800px) {
        kbd{
            width: 100vw;
        }
    }
</style>

{% endblock %}