{% extends "layout.html" %}

{% block title %}Profile - {{ user.nickname }}{% endblock %}

{% block content %}
<div class="uk-grid" data-uk-grid-margin>
    <div class="uk-width-2-3">
        <h2 class="uk-float-left"><img class="" src="{{ user.avatar }}" />&nbsp;{{ user.nickname }}</h2>
    </div>
    <div class="uk-width-1-3 uk-text-center">
    </div>
    <!--Main content area -->
    <div class="uk-width-large-2-3 uk-width-medium-1-1 uk-panel">
        <em>This user profile is set to private.</em>
    </div>
    <!-- Side bar -->
    <div class="uk-width-large-1-3 uk-width-medium-1-1 uk-panel uk-panel-box uk-panel-box-secondary">
        <div class="uk-container-center uk-text-center">
            <span class="uk-text-bold">Current Hero</span><br/>
            <span>{{ user.random_hero['localized_name'] }}</span><br/>
            <a href={{ url_for('user_random_hero', userid=user.id) }}>
                <img src="{{ url_for('static', filename=hero_image_large(user.random_hero)) }}" class="dn-hero-icon" /><br/>
                <span>View A-Z Progress</span>
            </a>
        </div>
        <ul class="uk-list uk-list-space uk-list-striped uk-text-center">
            <li>Completed <span id='rands'>{{ user.random_heroes.completed | length }}</span> heroes in A-Z</li>
            <li>Has <span id='points_total'>0</span> doobs points</li>
            <li>Last seen at <span class='date'> {{ user.last_seen | js_datetime }}</span></li>
            <li>Doob since <span class='date'> {{ user.created | js_datetime }}</span></li>
        </ul>
    </div>
</div>
{% endblock %}