{% extends "page.html" %}

{% block content %}
<h2>Discover Users</h2>

<section>
  <h3>Search Users</h3>
  <form method="GET" action="{{ url_for('home') }}">
    <input type="text" name="country" placeholder="Country" value="{{ request.args.get('country', '') }}">
    <input type="text" name="city" placeholder="City" value="{{ request.args.get('city', '') }}">
    
    <select name="sex">
      <option value="">Any Sex</option>
      <option value="male" {% if request.args.get('sex')=='male' %}selected{% endif %}>Male</option>
      <option value="female" {% if request.args.get('sex')=='female' %}selected{% endif %}>Female</option>
    </select>

    <input type="number" name="age_min" placeholder="Min Age" min="18" value="{{ request.args.get('age_min', '') }}">
    <input type="number" name="age_max" placeholder="Max Age" min="18" value="{{ request.args.get('age_max', '') }}">

    <input type="text" name="race" placeholder="Race" value="{{ request.args.get('race', '') }}">
    <input type="text" name="likes" placeholder="Likes" value="{{ request.args.get('likes', '') }}">
    <input type="text" name="dislikes" placeholder="Dislikes" value="{{ request.args.get('dislikes', '') }}">

    <button type="submit">Search</button>
  </form>
</section>

<section>
  <h3>Users</h3>
  {% if users %}
    <div>
      {% for user in users %}
        <div>
          <a href="{{ url_for('user_profile', username=user.username) }}">
            <img src="{{ user.profile_picture }}" alt="{{ user.username }}" width="100"><br>
            Age: {{ (date.today() - user.date_of_birth).days // 365 }}<br>
            Country: {{ user.country }}
          </a>
        </div>
      {% endfor %}
    </div>
  {% else %}
    <p>No users found.</p>
  {% endif %}
</section>
{% endblock %}