{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load email_obfuscator %}
{% load socialaccount %}
{% providers_media_js %}
{% block style %}
<style>
    .alt-img {
        padding-top: 25px;
        width: 100px;
        filter: blur(2px);
        -webkit-filter: blur(2px);
        display: none;
    }

    .header {
        display: inline-flex;
    }

    .header h3 {
        padding-left: 20px;
        margin-top: 30px;
    }

    .panel-body .list-group-item {
        display: inline-flex;
        width: 100%;
        height: 120px;
    }

    .header h3 a,
    .panel-body .list-group-item a {
        text-decoration: none;
    }

    .badge {
        margin-top: 15px;
    }

    button.btn-lg {
        margin-top: 25px;
    }

    .nav-tabs>li {
        float: none;
        display: inline-block;
        zoom: 1;
    }

    .nav-tabs {
        text-align: center;
    }

    .charts {
        margin-top: 50px;
        margin-bottom: 100px;
    }
</style>
{% endblock %}
{% block content %}
<script type="text/javascript" src="{% static 'js/Chart.bundle.min.js' %}"></script>
<div class="jumbotron">
    <div class="row">
        <div class="col-lg-10 col-md-10 header">
            <img src="{{ domain.get_logo }}" height="100"
                onerror="this.onerror=null; this.style.display='none';this.parentNode.childNodes[3].style.display='block';">
            <img src="{% static 'img/logo-small-transparent.png' %}" class="alt-img">
            <h3>
                <a href="{{ domain.url }}" target="/new">{{ name }}</a><br />
                {% if domain.email %}
                <small>
                    [{{ domain.email|obfuscate_mailto }}]
                    {% if domain.email_event %}
                    Last email {{ domain.email_event|default:"" }} {{ domain.modified|timesince }} ago |
                    Clicks {{ domain.clicks|default:"0" }}
                    {% endif %}
                </small>
                {% endif %}
            </h3>
        </div>
        <div class="col-lg-2 col-md-2">
            <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
                <input type="hidden" name="cmd" value="_s-xclick">
                <input type="hidden" name="hosted_button_id" value="SC7E9NRCWHGTL">
                <input type="hidden" name="hcustom" value="{{ domian.name }}">
                <button type="submit" class="btn btn-danger btn-lg pull-right">
                    <i class="fa fa-envelope fa-lg"></i> Subscribe to {{ name }} bugs
                </button>
            </form>
        </div>
    </div>
</div>

<div class="row charts">
    <div class="col-md-6">
        <canvas id="barChart" width="400" height="400"></canvas>
    </div>
    <div class="col-md-6">
        <canvas id="pieChart" width="400" height="400"></canvas>
    </div>
</div>

<div class="row">
    <div class="col-lg-9">
        <div class="pull-left text-center">
            {% if opened.has_previous %}
            <a href="?open={{ opened.previous_page_number }}" class="btn btn-default">Prev</a>
            {% endif %}
            <span>Page {{ opened.number }} of {{ opened.paginator.num_pages }}</span>
            {% if opened.has_next %}
            <a href="?open={{ opened.next_page_number }}" class="btn btn-default">Next</a>
            {% endif %}
        </div>
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
                <a href="#open" aria-controls="home" role="tab" data-toggle="tab">Open [{{ opened_net.count }}]</a>
            </li>
            <li role="presentation">
                <a href="#closed" aria-controls="profile" role="tab" data-toggle="tab">Closed
                    [{{ closed_net.count }}]</a>
            </li>
        </ul>

        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="open">
                <div class="list-group">
                    {% for activity in opened %}
                    {% include '_activity.html' %}
                    {% endfor %}
                </div>
                <div class="text-center">
                    {% if opened.has_previous %}
                    <a href="?open={{ opened.previous_page_number }}" class="btn btn-default">Prev</a>
                    {% endif %}
                    <span>Page {{ opened.number }} of {{ opened.paginator.num_pages }}</span>
                    {% if opened.has_next %}
                    <a href="?open={{ opened.next_page_number }}" class="btn btn-default">Next</a>
                    {% endif %}
                </div>
                <br><br>
            </div>
            <div role="tabpanel" class="tab-pane" id="closed">
                <div class="list-group">
                    {% for activity in closed %}
                    {% include '_activity.html' %}
                    {% endfor %}
                </div>
                <div class="text-center">
                    {% if closed.has_previous %}
                    <a href="?close={{ closed.previous_page_number }}" class="btn btn-default">Prev</a>
                    {% endif %}
                    <span>Page {{ closed.number }} of {{ closed.paginator.num_pages }}</span>
                    {% if closed.has_next %}
                    <a href="?close={{ closed.next_page_number }}" class="btn btn-default">Next</a>
                    {% endif %}
                </div>
                <br><br>
            </div>
        </div>
    </div>
    <div class="col-lg-3">
        <h4 class="text-center">Top Bug Hunters for {{ name }}</h4>
        <div class="list-group">
            {% if leaderboard %}
            {% for leader in leaderboard %}
            <div class="list-group-item">
                {% if leader.socialaccount_set.all.0.get_avatar_url %}
                <img src="{{ leader.socialaccount_set.all.0.get_avatar_url }}" width="50" height="50">
                {% else %}
                <img src="{% gravatar_url leader.email 50 %}" width="50" height="50">
                {% endif %}
                <a href="/profile/{{ leader.username }}">{{ leader.username }}</a>
                <span class="badge">{{ leader.total }} bug{{ leader.total|pluralize }}</span>
            </div>
            {% endfor %}
            {% else %}
            Leaderboard reset for {% now "F" %}. Be first to find issues!
            {% endif %}
        </div>
    </div>

    <div class="col-lg-3 col-md-3 ">
        {% if domain.webshot %}
        <div class="col-lg-12">
            <a href="https://{{ domain.url }}" target="_new">
                <img src="{{ domain.webshot.url }}">
            </a>
        </div>
        {% endif %}
    </div>
</div>

<script type="text/javascript">
    var all_months = ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
    var months = [],
        data = [];
    var all_data = new Array(12).fill(0);
    var pie = new Array(7).fill(0);
    var current_month = {{ current_month }};

    {% for i in graph %}
    all_data['{{i.month}}' - 1] = {{ i.c }};
    {% endfor %}
    
    if (current_month - 6 < 0) {
        months = all_months.slice(current_month - 6);
        months = months.concat(all_months.slice(0, current_month));
        data = all_data.slice(current_month - 6);
        data = data.concat(all_data.slice(0, current_month));
    } else {
        months = all_months.slice(current_month - 6, current_month);
        data = all_data.slice(current_month - 6, current_month);
    }

    var ctx = document.getElementById("barChart").getContext('2d');
    var domain_chart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: months,
            datasets: [{
                label: 'Monthly Activity',
                data: data,
                backgroundColor: [
                    'rgba(225, 17, 20, 0.6)',
                    'rgba(99, 179, 56, 0.6)',
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(241, 217, 7, 0.6)',
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(230, 80, 21, 0.6)',
                    'rgba(153, 102, 255, 0.6)'
                ],
                borderColor: [
                    'rgba(225,17,20,1)',
                    'rgba(99, 179, 56, 1)',
                    'rgba(255,99,132,1)',
                    'rgba(241, 217, 7, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(230, 80, 21, 1)',
                    'rgba(153, 102, 255, 1)'
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true,
                        fixedStepSize: 1
                    }
                }],
                xAxes: [{
                    time: {
                        unit: 'month'
                    }
                }]
            }
        }
    });

    var ctx = document.getElementById("pieChart").getContext('2d');
    var myDoughnutChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['General', 'Number Error', 'Functional', 'Performance', 'Security', 'Typo', 'Design'],
            datasets: [{
                data: pie,
                backgroundColor: [
                    'rgba(225, 17, 20, 0.6)',
                    'rgba(99, 179, 56, 0.6)',
                    'rgba(255, 99, 132, 0.6)',
                    'rgba(241, 217, 7, 0.6)',
                    'rgba(75, 192, 192, 0.6)',
                    'rgba(230, 80, 21, 0.6)',
                    'rgba(153, 102, 255, 0.6)'
                ],
                borderColor: [
                    'rgba(225,17,20,1)',
                    'rgba(99, 179, 56, 1)',
                    'rgba(255,99,132,1)',
                    'rgba(241, 217, 7, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(230, 80, 21, 1)',
                    'rgba(153, 102, 255, 1)'
                ],
                borderWidth: 1
            }]
        }
    });
</script>
{% endblock %}