{% 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-hidden-small uk-text-center">
        {% if user.public %}
        <div class="uk-button-group">
            <a class="uk-button" href="http://steamcommunity.com/profiles/{{ user.steam_id | safe }}">Steam</a>
            {% if user.forum_id %}
            <a class="uk-button" href="http://board.dotanoobs.com/?page=profile&id={{ user.forum_id | safe }}">Forum Profile</a>
            {% endif %}
            <a class="uk-button" href="http://dotabuff.com/search?q={{ user.steam_id }}">Dotabuff</a>
        </div>
        {% endif %}
    </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> 
    <div id="profile_links" class="uk-width-1-3 uk-visible-small uk-text-center">
        {% if user.public %}
        <div class="uk-button-group">
            <a class="uk-button" href="http://steamcommunity.com/profiles/{{ user.steam_id | safe }}">Steam</a>
            {% if user.forum_id %}
            <a class="uk-button" href="http://board.dotanoobs.com/?page=profile&id={{ user.forum_id | safe }}">Forum Profile</a>
            {% endif %}
            <a class="uk-button" href="http://dotabuff.com/search?q={{ user.steam_id }}">Dotabuff</a>
        </div>
        {% endif %}
    </div>
    <!-- Side bar -->
    <div class="uk-width-large-1-3 uk-width-medium-1-1 uk-panel">
        {% if user.public %}
        <div class="uk-container-center uk-text-center">
            <span class="uk-text-bold">Current Hero</span><br/>
            <span class="uk-text-success uk-text-bold">
                {{ user.random_hero['localized_name'] }} 
                ({{ user.random_heroes.completed | length + 1 }}
                /
                {{ total_hero_pool() - user.random_heroes.completed|length }})
            </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>
        <table class="uk-table uk-table-hover uk-table-condensed">
            <caption>{{ user.nickname }}</caption>
            <tbody class="uk-text-small">
                <tr>
                    <td class="uk-width-4-10">TS Points</td>
                    <td class="uk-width-6-10 uk-text-right">0</td>
                </tr>
                <tr>
                    <td>Events Points</td>
                    <td class="uk-text-right">0</td>
                </tr>
                <tr>
                    <td>Forum Points</td>
                    <td class="uk-text-right">0</td>
                </tr>
                <tr>
                    <td>Last Seen</td>
                    <td class="date uk-text-right">{{ user.last_seen | js_datetime }}</td>
                </tr>
                <tr>
                    <td>Member Since</td>
                    <td class="date uk-text-right">{{ user.created | js_datetime }}</td>
                </tr>
            </tbody>
        </table>
        <button class="uk-button uk-button-success uk-align-center" data-uk-modal="{target: '#winrate_modal'}">View Winrate</button>
        {% endif %}
    </div>
</div>

<!-- Modal -->
<div id="winrate_modal" class="uk-modal">
    <div class="uk-modal-dialog uk-modal-dialog-frameless uk-modal-dialog-large">
        <a class="uk-modal-close uk-close uk-close-alt"></a>
    </div>
    <div id="winrate_graph" class="uk-overflow-container"></div>
</div>
{% endblock %}

{% block pagescripts %}
<script src="http://code.highcharts.com/highcharts.js"></script>
{% cache 60*700 %}
<script>
    $('#winrate_modal').on({
        'uk.modal.show': function(){
            Highcharts.charts[0].reflow();
        },
    });
    $(function () {
        $('#winrate_graph').highcharts({
            chart: { reflow: true },
            title: { text: "Win rate for {{ user.nickname }}" },
            subtitle: { text: "Over last {{ user.winrate_data['total_games'] }} games" },
            xAxis: {type: 'datetime', dateTimeLabelFormats:{
                    month:'%m'
                }
            },
            yAxis: {min: 0.35, max: 0.90, plotLines: [{value:0, width:2, color:'#808080'}]},
            legend: {enabled: false},
            series: [
                {
                    name: '{{ user.nickname }}',
                    data: [
                    {% for date_nums, windowed in user.winrate_data['data'] %}
                        [({{ date_nums }} * 1000), parseFloat({{ windowed }}.toFixed(3))],
                    {% endfor %}
                    ]
                },
            ]
        });
    });
</script>
{% endcache %}
{% endblock %}