{% extends "base.html" %}
{% block content %}
<div class="w3-panel w3-card w3-third w3-margin"> 
    <img src="/static/images/default_avatar.png" class="w3-circle w3-margin" style="width: 60%" alt="avatar">
    <h1>{{ user_name }}</h1>
    <b>Languages:</b>
    <p> {{ user_language }} -> {{ foreign_language }}</p>
    <b>Interests:</b>
    <ul class="w3-ul">
        <li>{{ interest1 }}</li>
        <li>{{ interest2 }}</li>
        <li>{{ interest3 }}</li>
    </ul>
    <form method="POST" action="" style="width: 100%"
        class="w3-card w3-section w3-padding-small w3-center">
        <input type="text" name="param-str" placeholder="Type here" required>
        <input class="w3-button w3-ripple w3-green" type="submit" value="Submit">
        <p>
            <input class="w3-radio" type="radio" name="param-id" value="i1" checked>
            <label>Change First Interest</label>
        </p>
        <p>
            <input class="w3-radio" type="radio" name="param-id" value="i2">
            <label>Change Second Interest</label>
        </p>
        <p>
            <input class="w3-radio" type="radio" name="param-id" value="i3">
            <label>Change Third Interest</label>
        </p>
        <p>
            <input class="w3-radio" type="radio" name="param-id" value="usr-lang">
            <label>Change Your Language</label>
        </p>
        <p>
            <input class="w3-radio" type="radio" name="param-id" value="foreign-lang">
            <label>Change Foreign Language</label>
        </p>
    </form>
    <label class="w3-text-red w3-container w3-center">{{ form_msg }}</label>
</div>
<div class="w3-panel w3-margin w3-third">
    <ul class="w3-ul w3-card" style="width: 100%">
        {% for usr in matching_users %}
            <li>
                <h2><b><i class="fas fa-user"></i> {{ usr[0] }}</b></h2>
                <p>
                    Same interest - {{ usr[1] }}
                </p>
            </li>
        {% endfor %}
    </ul>
</div>
{% endblock %}