{% extends "template.html" %}
{% block content %}

<div class="container">
    <div class="card-panel grey lighten-5 z-depth-1">
        <div class="col s12 center">
        <h1>Friends</h1>
        </div>
        <div class="divider"></div>
        <div class="section">
            <div class="row">
                <form action="{{url_for('addcode')}}" method="post">
                    <div class="offset-s4 input-field col s4">
                        <input placeholder="Placeholder" id="friendcode" name="friendcode" type="text" class="validate">
                        <label for="friendcode">Enter your FriendCode</label>
                    </div>
                    <div class="input-field col s2">
                        <button type="submit" class="btn waves-effect waves-light green" name=action>
                            Add
                        </button>
                    </div>
                </form>
            </div>
            <ul class="collection">
                {% for friend in data %}
                    <li class="collection-item avatar">

                    {% if friend.m_avatar == 'default' %}
                    <img src="{{ avatars.default() }}" alt="" class="circle">
                    {% else %}
                    <img src="{{url_for("static", filename=friend.m_avatar)}}" class="circle responsive-img">
                    {% endif %}
                    <h5>{{friend.username}}</h5>
                    <h5 class="secondary-content">{{friend.friendcode}}</h5>
                    </li>
                {% endfor %}
            </ul>


        </div>
    </div>
</div>


{% endblock %}