{% extends 'base.html' %}


{% block content %}
<div class="section">
    <div class="container">

        <h1 class="title is-1">User: {{data.id}}</h1>
        <h3 class="subtitle is-3">Achievements</h3>
        <div class="tile is-ancestor">
            <div class="tile is-parent is-vertical">
                {% for achievement in data.achievements -%}
                <a href="{{url_for('get_achievement', id=achievement.id)}}" class="tile is-child box is-4">
                    <!-- The magical tile element! -->
                    <p class="title">{{ achievement.name }}</p>
                    <div class="content">
                        {{ achievement.endorsed_by|length }} endorsement{{ "s" if (achievement.endorsed_by|length != 1) else "" }}
                    </div>
                </a>
                {% else %}
                <h5 class="subtitle is-5">No achievements</h5>
                {% endfor -%}
            </div>
        </div>
        <a class="button" href="{{url_for('add_achievement', id=data.id)}}">Add achievement</a>
    </div>
</div>

{% endblock %}