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

<div id="main">
  <form action="{{ url_for('bp_routes.search') }}" method="GET">
    <input type="text" name="username" placeholder="Search for an username...">
  </form>

  <div id="addresses">
    {% for user in users %}
    <article>
      <header>
        <em>{{user.username}}</em>
      </header>
      <kbd>{{user.address}}</kbd>
    </article>
    {% endfor %}
  </div>
</div>

<style>
  #main {
    width: 100%;
    height: 80vh;
    display: grid;
    place-content: center;
  }

  form {
    height: 80px;
  }

  #addresses {
    width: 100%;
    height: 54vh;
    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 %}