{% 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 id="profile_links" class="uk-width-1-3 uk-text-center">
        <div class="uk-panel">
            {% if user.public %}
            <a href="http://steamcommunity.com/profiles/{{ user.steam_id | safe }}">Steam</a> | 
            <a href="http://board.dotanoobs.com/?page=profile&id={{ user.id | safe }}">Forum Profile</a> |
            <a href="http://dotabuff.com/search?q={{ user.steam_id }}">Dotabuff</a>
            {% endif %}
        </div>
    </div>
    <!--Main content area -->
    <div class="uk-width-large-2-3 uk-width-medium-1-1 uk-panel">
    {% if user.public %}
        {% if user.bio_text == None %}
        <em class="uk-text-danger">This user's profile bio is empty!</em>
        {% else %}
        <em class="uk-text-bold">{{ user.bio_text }}</em>
        {% endif %}
    {% else %}
        <em class="uk-text-danger">This user profile is set to private</em>
    {% endif %}
        {% if user.id == g.user.id %}&nbsp;<a href="{{ url_for('user_settings')}}"><i class="uk-icon-edit"></i></a>{% endif %}
    </div> 
    <!-- Side bar -->
    <div class="uk-width-large-1-3 uk-width-medium-1-1 uk-panel uk-panel-box uk-panel-box-secondary">
        {% if user.public %}
        <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 uk-text-small">
            <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>
        {% endif %}
    </div>
</div>
{% endblock %}