{% extends "base.html" %}
{% load static %}
{% block head %}
    <meta name="nonfiction" content="true">
    <script type="text/javascript" src="{% static "javascript/loader.js" %}"></script>
{% endblock %}
{% block title %}{{ network }}{% endblock %}
{% block description %}Overview of {{ network }}{% endblock %}
{% block keywords %}{{ network }},irc network{% endblock %}
{% block keywords-not %}{% endblock %}

{% block content %}
    <article class="ui container">
        <header class="ui six statistics">
            <a class="statistic" href="/">
                <div class="value">
                    <i class="hashtag icon"></i> {{ channels|length }}
                </div>
                <div class="label">
                    Channels
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="users icon"></i> {{ users|length }}
                </div>
                <div class="label">
                    Users
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="comments icon"></i> {{ totalmessages }}
                </div>
                <div class="label">
                    Messages
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="cocktail icon"></i> {{ totalactions }}
                </div>
                <div class="label">
                    Actions
                </div>
            </a>
            <a class="statistic" href="/">
                <div class="value">
                    <i class="announcement icon"></i> {{ totalnotices }}
                </div>
                <div class="label">
                    Notices
                </div>
            </a>
        </header>
        <section class="ui basic text segment container">
            <div class="ui basic segment">
                <div class="ui card">
                    <div class="content">
                        <div class="header">
                            <i class="cloud icon"></i>
                            {{ network }}
                        </div>
                        <div class="meta">
                            {{ network.host }}:{{ network.port }}
                            {% if network.use_ssl %}
                                <div class="right floated content">
                                    <i class="green lock icon" title="Encrypted connection"></i>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="content">
                        <div class="ui list">
                            <div class="item" title="Home channel">
                                <i class="hashtag icon"></i>
                                <div class="content">
                                    {{ network.home_channel }}
                                </div>
                            </div>
                            <div class="item" title="Username">
                                <i class="id card icon"></i>
                                <div class="content">
                                    {{ network.username }}
                                    {% if network.password %}
                                        <div class="right floated content">
                                            <i class="green privacy icon" title="NickServ password saved"></i>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="ui bottom right attached basic label">
                        <div class="ui divided horizontal list">
                            <div class="item" title="Command character">
                                <i class="terminal icon"></i>
                                {{ network.command_character }}
                            </div>
                            <div class="item" title="Help character">
                                <i class="help icon"></i>
                                {{ network.help_character }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </article>
    <div class="ui container">
         <article class="ui stackable cards">
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart0);
                function drawChart0() {
                    var data = google.visualization.arrayToDataTable([
                        ['Channel', 'Messages'],
                        {% for channel in channelslist.items %}
                            ['{{ channel.0|escapejs }}',     {{ channel.1.messagecount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('channelmessageschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Messages per channel" class="content">
                    <div class="header">
                        <div>
                            <i class="ui comments outline icon"></i>
                            /
                            <i class="ui hashtag icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="channelmessageschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart);
                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['Channel', 'Joins'],
                        {% for channel in channelslist.items %}
                            ['{{ channel.0|escapejs }}',     {{ channel.1.joincount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('channeljoinschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Joins per channel" class="content">
                    <div class="header">
                        <div>
                            <i class="ui add user icon"></i>
                            /
                            <i class="ui hashtag icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="channeljoinschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart1);
                function drawChart1() {
                    var data = google.visualization.arrayToDataTable([
                        ['Channel', 'Kicks'],
                        {% for channel in channelslist.items %}
                            ['{{ channel.0|escapejs }}',     {{ channel.1.kickcount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('channelkickschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks per channel" class="content">
                    <div class="header">
                        <div>
                            <i class="ui remove user icon"></i>
                            /
                            <i class="ui hashtag icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="channelkickschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart2);
                function drawChart2() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'Messages'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.messagecount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('usermessageschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Messages per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui comments outline icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="usermessageschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart3);
                function drawChart3() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'Joins'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.joincount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('userjoinschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Joins per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui add user icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="userjoinschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart4);
                function drawChart4() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'Kicks given'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.kgivencount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('userksgivenchart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks given per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui sign language icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="userksgivenchart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart5);
                function drawChart5() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'Kicks received'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.kreceivedcount }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('userksreceivedchart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks received per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui remove user icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="userksreceivedchart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart6);
                function drawChart6() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'XP spent'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.xpspent }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('userxpspentchart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks received per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui dashboard icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="userxpspentchart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart7);
                function drawChart7() {
                    var data = google.visualization.arrayToDataTable([
                        ['User', 'Coin'],
                        {% for item in userslist.items %}
                            ['{{ item.0|escapejs }}',     {{ item.1.coin }}],
                        {% endfor %}
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('usercoinschart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks received per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui money icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="usercoinschart"></div>
                </div>
            </section>
            <script type="text/javascript">
                google.charts.load("current", {packages:["corechart"]});
                google.charts.setOnLoadCallback(drawChart8);
                function drawChart8() {
                    var data = google.visualization.arrayToDataTable([
                        ['Coin spent', 'Coin given'],
                        ['{{ coinspent }}',     {{ coingiven }}],
                    ]);
                    var options = {
                        legend: 'none',
                        pieSliceText: 'label',
                        height: '275',
                        pieHole: 0.1,
                        'chartArea': {'width': '95%', 'height': '100%'},
                        pieSliceText: 'label',
                    };
                    var chart = new google.visualization.PieChart(document.getElementById('spenvsgivenchart'));
                    chart.draw(data, options);
                }
            </script>
            <section class="ui card">
                <div title="Kicks received per user" class="content">
                    <div class="header">
                        <div>
                            <i class="ui money icon"></i>
                            /
                            <i class="ui user icon"></i>
                        </div>
                    </div>
                </div>
                <div class="content">
                    <div id="spentvssgivenchart"></div>
                </div>
            </section>
        </article>
        {{ channelslist.items }}
    </div>
{% endblock %}
{% block breadcrumbs %}
    <i class="sitemap icon"></i>
    <a class="section" href="{% url 'stats:networks' %}">Networks</a>
    <div class="divider"> / </div>
    <i class="sitemap icon"></i>
    <div class="active section">{{ network }}</div>
{% endblock %}
