{% 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;
    }
    .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
    }
    .tweet-btn {
    background-color: #1da1f2; /* Twitter blue */
    color: #fff; /* White text color */
    border: none; /* Remove border */
    padding: 5px 10px; /* Add padding */
    border-radius: 4px; /* Rounded corners */
    text-decoration: none; /* Remove underline */
    transition: background-color 0.3s ease; /* Smooth hover transition */
    }

    .tweet-btn:hover {
        background-color: #0d8ddb; /* Darker shade of Twitter blue on hover */
    }

    /* Adjust Font Awesome icon size */
    .fa-twitter {
        font-size: 16px;
        margin-right: 5px; /* Add some spacing between icon and text */
    }

    </style>
{% endblock style %}
{% block content %}
    <script type="text/javascript" src="{% static 'js/Chart.bundle.min.js' %}"></script>
    <div class="bottom-right">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/domain.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=488%3A1342&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <div class="jumbotron">
        <div class="row">
            <div class="col-lg-10 col-md-10 header">
                <img src="{{ domain.get_logo }}"
                     height="100"
                     width="100"
                     alt="logo"
                     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"
                     alt="logo"
                     width="100"
                     height="100">
                <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>
            {% if twitter_url %}
                <div class="col-lg-1 col-md-1">
                    <a class="tweet-btn btn btn-xs"
                       href="{{ twitter_url }}"
                       rel="noopener noreferrer">
                        <i class="fab fa-twitter"></i> Tweet
                    </a>
                </div>
            {% endif %}
        </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"
                                     alt="{{ leader.username }}">
                            {% else %}
                                <img src="{% gravatar_url leader.email 50 %}"
                                     width="50"
                                     height="50"
                                     alt="{{ leader.username }}">
                            {% endif %}
                            <a href="{% url 'profile' slug=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 }}"
                       rel="noopener noreferrer"
                       target="_new">
                        <img src="{{ domain.webshot.url }}"
                             width="100%"
                             height="100%"
                             alt="{{ domain.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 content %}