{% extends "layout.html" %}

{% block head %} <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/ts3_viewer.css') }}"> {% endblock %}

{% block title %}Dota Noobs{% endblock %}

{% block content %}
{#{% cache 60*5 %}#}
{% set teamspeak_data = get_teamspeak_window() %}
<div class="uk-grid">
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-panel uk-panel-space">
        <h1 class="uk-panel-title">Events</h1>
        {#
        {% if active_event %}
        <article class="uk-article"> 
            <h4>Right Now</h4>
            <a href="{{ url_for('event_summary', eventid=active_event._id) }}">{{ active_event.name }}</a>
            <p class="uk-article-meta">Ends at: {{ timestamp_to_js_date(active_event.end_time) }}</p>
        </article>
        {% endif %}
        {% if upcoming_event %}
        <article class="uk-article">
            <h4>Next Event</h4>
            <a href="{{ url_for('event_summary', eventid=upcoming_event._id) }}">{{ upcoming_event.name }}</a>
            <p class="uk-article-meta">Starts at: {{ timestamp_to_js_date(upcoming_event.start_time) }}</p>
        </article>
        {% else %}
            <em>No events planned for the near future. Suggest one on the forum!</em>
        {% endif %}
        #}
        <em>No events planned for the near future. Suggest one on the forum!</em>
    </div>
    <div class="uk-width-large-1-2 uk-width-medium-1-1 uk-panel uk-panel-box uk-text-center">
        <a href="#" data-uk-modal="{target: '#tsviewer'}"><div class="uk-badge uk-panel-badge uk-badge-success"><i class="uk-icon-user"></i> Users</div></a>
        <h1 class="uk-panel-title">Teamspeak</h1>
        <div class="uk-grid uk-margin-bottom">
            <div class="uk-width-1-3 uk-panel">
                <h3>Users<br/><span class="ts_num">{{ ts3_current_clients() }}</span></h3>
            </div>
            <div class="uk-width-1-3 uk-panel">
                <h3 class="uk-text-success">Online</h3>
            </div>
            <div class="uk-width-1-3 uk-panel">
                <h3>Countries<br/><span class="ts_num">{{ ts3_countries_active(teamspeak_data) }}</span></h3>
            </div>
        </div>

        <a class="uk-button uk-button-success uk-width-1-1" href="ts3server://voice.dotanoobs.com"><i class="uk-icon-microphone"></i> Connect</a>
        <a class="uk-button uk-width-1-1 uk-margin" href="{{ url_for('teamspeak') }}"><i class="uk-icon-globe"></i> Stats</a>
        <a class="uk-button uk-width-1-1" href="http://www.teamspeak.com/?page=downloads"><i class="uk-icon-download"></i> Download</a>

        <div id="tsviewer" class="uk-modal uk-text-left">
            <div class="uk-modal-dialog">
                <a class="uk-modal-close uk-close"></a>
                {{ ts3_viewer() | safe }}
            </div>
        </div>
    </div>

    <div id="streams" class="uk-width-1-1 uk-text-center uk-panel uk-panel-space">
    </div>

    <div class="uk-width-1-1 uk-panel uk-panel-header">
        <h4 class="uk-panel-title">News and Announcements</h4>
        {% for news in latest_news %}
            <article class="uk-article dn-news-article">
            <h4 class="uk-article-title" title="{{ news['title'] }}"><a href="{{ news['url'] }}">{{ news['title'] }}</a></h4>
                <p class="uk-article-meta">{{ news['date'] }}</p>
                <p>{{ news['text'] | shorten }}</p>
            </article>
        {% endfor %}
    </div>
</div>

{#{% endcache %}#}
{% endblock %}

{% block pagescripts %}
<script>
{% cache 60*5 %}
$(document).ready(function() {
	// Add the streams
	var stream_url = "https://api.twitch.tv/kraken/streams/";
        var channels = ["dotanoobs", "bearhugdota", "kreejaffakree", "prettypenguins", "shaneomad"];
	for (var idx in channels) {
		$.getJSON(stream_url+channels[idx]+"?callback=?", function(data) {
                    if (data.stream) {
                        var $a = $("<a href='"+data.stream.channel.url+"'></a>");
                        var $strm = $("<div class='dn-streamer uk-text-success uk-panel uk-panel-box' id='"+data.stream.channel.name+"'></div>");

                        $strm.append("<p class='uk-text-bold'>" + data.stream.channel.display_name + "</p>");
                        $strm.append("<img src='" + data.stream.preview.small + "' />");
                        $strm.append("<p><i class='uk-icon-male'></i> "+data.stream.viewers+"</p>");

                        $a.append($strm);
                        $("#streams").prepend($a);

                    } else {
                        $.getJSON(data._links.channel+"?callback=?", function(data) {
                            var $a = $("<a href='"+data.url+"'></a>");
                            var $strm = $("<div class='dn-streamer-offline uk-text-success uk-panel uk-panel-box' id='"+data.name+"'></div>");

                            $strm.append("<p class='uk-text-bold'>" + data.display_name + "</p>");
                            $strm.append("<img src='" + data.logo + "' />");
                            $strm.append("<p class='dn-offline'>Offline</p>");

                            $a.append($strm);
                            $("#streams").append($a);
                        });
                    }
		});
        }
        {% endcache %}

        
        $(".dn-streamer, .dn-streamer-offline").on({
            mouseover: function() {
                $(this).addClass('dn-streamer-hover');
            },
            mouseleave: function() {
                $(this).removeClass('dn-streamer-hover');
            }
        }, "div");

        // Localize the events
	$('.date').each( function( index ) {
		var d = new Date($(this).text());
		$(this).text( d.toLocaleDateString() + ' @ ' + d.toLocaleTimeString() );
        });
});
</script>
{% endblock %}