{% extends 'base.html' %}

{% block content %}

<div class="mdl-grid">
    <div class="mdl-cell mdl-cell--8-col">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Tweet volume</h2>
            </div>
            <div id='tweetvolume' class="mdl-card__supporting-text">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <script>
                    loadJson("/tweets/volume", { 
                            'begin': localStorage.getItem('begin'), 
                            'end': localStorage.getItem('end')
                        }, 
                        data => plot(document.getElementById('tweetvolume'), data)
                    );
                </script>
            </div>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Tweeting behaviour</h2>
            </div>
            <div id='tweetbehaviour' class="mdl-card__supporting-text">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <script>
                    loadJson("/tweets/types", { 
                            'begin': localStorage.getItem('begin'), 
                            'end': localStorage.getItem('end')
                        }, 
                        data => plot(document.getElementById('tweetbehaviour'), data)
                    );
                </script>
            </div>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Most frequently posting users</h2>
            </div>
            <div id='uservolume' class="mdl-card__supporting-text">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <script>
                    loadText("/tweets/posting-users", { 
                            'begin': localStorage.getItem('begin'), 
                            'end': localStorage.getItem('end')
                        }, 
                        response => document.getElementById('uservolume').innerHTML = response
                    );
                </script>
            </div>
        </div>
    </div>
    
    <div class="mdl-cell mdl-cell--4-col">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Most frequently used hashtags</h2>
            </div>
            <div id='tagvolume' class="mdl-card__supporting-text">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <script>
                    loadText("/tweets/tags", { 
                            'begin': localStorage.getItem('begin'), 
                            'end': localStorage.getItem('end')
                        }, 
                        response => document.getElementById('tagvolume').innerHTML = response
                    );
                </script>
            </div>
        </div>
    </div>

    <div class="mdl-cell mdl-cell--4-col">
        <div class="mdl-card mdl-shadow--2dp">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Most frequently mentioned users</h2>
            </div>
            <div id='mentionsvolume' class="mdl-card__supporting-text">
                <div class="mdl-spinner mdl-js-spinner is-active"></div>
                <script>
                    loadText("/tweets/mentioned-users", { 
                            'begin': localStorage.getItem('begin'), 
                            'end': localStorage.getItem('end')
                        }, 
                        response => document.getElementById('mentionsvolume').innerHTML = response
                    );
                </script>
            </div>
        </div>
    </div>

</div>


{% endblock %}