{% extends "base.html" %}
{% block head %}
{{ super() }}
{% endblock %}
{% block content %}
{{ super() }}
<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="/">Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/conf">Conferences</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/words">Words</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="/stat">2ch.hk Stats</a>
    </li>
</ul>
<br>
<hr>
<h4>{{ user_info.first_name }}'s user data</h4>
<hr>
<div class="card-columns">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Identity</h5>
            <hr>
            <p class="card-text">
                <b>First name: </b>{{ user_info.first_name }}<br>
                <b>Last name: </b>{% if user_info.last_name != '_null' %}{{ user_info.last_name }}{% else %}
                <span class="badge badge-warning">N/D</span>{% endif %}<br>
                <b>Username: </b>{% if user_info.username != '_null' %}{{ user_info.username }}{% else %}
                <span class="badge badge-warning">N/D</span>{% endif %}<br>
                <b>Telegram ID: </b>{{ user_info.id }}<br>
                <b>Firstly seen: </b>{{ user_info.first_date }}<br>
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Activity</h5>
            <hr>
            <p class="card-text">
                <b>First message: </b>{{ user_info.first_date }}<br>
                <b>Last message: </b>{{ user_info.last_message }}<br>
                <b>Days known: </b>{{ user_info.day_known }}<br>
                <b>Words said: </b>{{ user_info.word_count }}<br>
                <b>Messages sent: </b>{{ user_info.messages }}<br>
                <b>Words per day: </b>{{ '%0.2f'| format((user_info.word_count / user_info.day_known)|float) }}<br>
                <b>Words per message: </b>~{{ '%0.2f'| format(user_info.avg|float) }}<br>
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Top</h5>
            <hr>
            <p class="card-text">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Word</th>
                            <th scope="col">Said</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for word in user_info.top %}
                        <tr>
                            <th scope="row">{{ loop.index }}</th>
                            <td>{{ word[0] }}</td>
                            {% if not loop.last %}
                            {% if (word[1]/loop.nextitem[1]) > 2 %}
                            <td><span class="badge badge-danger" data-toggle="tooltip" data-placement="right" title="Must have been abused">{{
                                    word[1] }} </span></td>
                            {% else %}
                            <td><span class="badge badge-secondary">{{ word[1] }} </span></td>
                            {% endif %}
                            {% else %}
                            <td><span class="badge badge-secondary">{{ word[1] }} </span></td>
                            {% endif %}
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Chats</h5>
            <p class="card-text">
                <table class="table table-hover table-sm">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Chat</th>
                            <th scope="col">Words</th>
                            <th scope="col">Messages</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for chat in user_info.chats %}
                        <tr>
                            <th scope="row">{{ loop.index }}</th>
                            <td>{{ chat[0] }}</td>
                            <td><span class="badge badge-secondary">{{ chat[1] }} </span></td>
                            <td><span class="badge badge-secondary">{{ chat[3] }} </span></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
        </div>
    </div>

</div>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Charts</h5>
        <hr>
        <span class="badge {% if 'bar' == plot_type %} badge-primary {% endif %}" id="bar" onclick="plot_type_changer(this.id)">Bars</span>
        <span class="badge {% if 'scatter' == plot_type %} badge-primary {% endif %}" id="scatter" onclick="plot_type_changer(this.id)">Lines</span>
        <div id="words_chart">
        </div>
        <script>
            function plot_type_changer(type="bar") {
                location.href = URL_add_parameter(location.href, 'plot_type', type);
            }
            function URL_add_parameter(url, param, value) {
                var hash = {};
                var parser = document.createElement('a');

                parser.href = url;

                var parameters = parser.search.split(/\?|&/);

                for (var i = 0; i < parameters.length; i++) {
                    if (!parameters[i])
                        continue;

                    var ary = parameters[i].split('=');
                    hash[ary[0]] = ary[1];
                }

                hash[param] = value;

                var list = [];
                Object.keys(hash).forEach(function (key) {
                    list.push(key + '=' + hash[key]);
                });

                parser.search = '?' + list.join('&');
                return parser.href;
            }
            var user_id = {{ user_info.id }};
            var plot_data = [];
            $.ajax({
                type: 'GET',
                url: '/data',
                data: { action: 'user_word_count', user: user_id, plot_type: "{{ plot_type }}" },
                dataType: 'json',
                success: function (data) {
                    plot_data[0] = data[0];
                    _write_plot();
                }
            });
            $.ajax({
                type: 'GET',
                url: '/data',
                data: { action: 'user_message_count', user: user_id, plot_type: "{{ plot_type }}" },
                dataType: 'json',
                success: function (data) {
                    plot_data[1] = data[0];
                    _write_plot();
                }
            });
            function _write_plot() {
                var layout = {
                    title: 'Daily plot',
                    showlegend: false,
                    //autosize: false,
                    //width: 500,
                    //height: 500,
                    margin: {
                        t: 30,
                        pad: 20
                    },
                };
                Plotly.newPlot('words_chart', plot_data, layout, { displayModeBar: false });
            }
        </script>
    </div>
</div>
{% endblock %}