{% extends "base.html" %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% providers_media_js %}
{% load custom_tags %}
{% block title %}Bug on {{ object.domain_title }} - {{ object.description }}{% endblock %}
{% block og_title %}Bug on {{ object.domain_title }}{% endblock %}

{% block og_image %}

    {% if object.screenshot %}
        {{ object.screenshot.url }}

    {% else %}
        {{ screenshots.0.image.url }}
    {% endif %}

{% endblock %}

{% block og_description %}{{ object.description }}{% endblock %}
{% block description %}{{ object.description }}{% endblock %}
{% block style %}
<style>
    .alt-img {
        padding-top: 25px;
        width: 75px;
        filter: blur(2px);
        -webkit-filter: blur(2px);
        display: none;
    }

    .fb-xfbml-parse-ignore {
        margin-top: -12px;
    }

    .comment {
        width: 120%;
    }

    .comment .comment-actions {
        display: inline-flex;
    }

    .comment .comment-actions .btn {
        margin-left: 10px;
    }

    .fa-white {
        color: white;
    }

    .page-header {
        padding: 10px;
        font-size: 30px;
    }

    textarea {
        height: auto !important;
    }

    .panel-heading h3 {
        margin-top: 5px;
    }

    .operations {
        display: grid;
    }

    .operations .btn {
        margin-bottom: 5px;
    }

    .bug-info {
        margin-top: 10px;
    }

    input[name="description"] {
        width: 600px !important;
    }

    .like_btn,
    .flag_btn,
    .bookmark,
    .copy-btn,
    .flag_btn a.flaged-by,
    .like_btn a.liked-by {
        vertical-align: top;
    }

    .fb-btn {
        margin-top: -1px;
    }

    .tweet-btn {
        background-color: #1b95e0;
        font-weight: 500;
        display: inline-block;
        vertical-align: top;
        padding: 1px 5px;
        color: #fff;
        font: normal normal normal 11px FontAwesome, Arial, sans-serif;
        line-height: 1.63;
    }

    .tweet-btn:hover {
        background-color: #0c7abf;
    }

    .btn_issclose {
        position: absolute;
        margin-top: 1.5px;
        margin-left: 3%;
    }

    .btn_addedon {
        position: absolute;
        margin-top: 1.5%;
        margin-left: 5%;
    }
</style>
{% endblock %}
{% block content %}
<script type="text/javascript" src="{% static "js/clipboard.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/lightbox.min.js" %}"></script>
<script type="text/javascript" src="{% static "js/issue.js" %}"></script>
<script src="{% static "js/jquery.atwho.js" %}"></script>
<script src="{% static "js/jquery.caret.js" %}"></script>
<link href="{% static "css/jquery.atwho.css" %}" rel="stylesheet">

<div class="row">
    <div class="col-lg-12">
        <h3 class="page-header">
            <span class="editables">
                <span class="issue-desc">{{ object.description }}</span>
                <span class="pull-right">
                    <i class="fa fa-eye"></i> {{ object.views }}
                </span>
            </span>
            <div class="form form-inline" style="display:none">
                {% csrf_token %}
                <input type="text" name="domain" placeholder="Domain" class="form-control" value="" required>
                <input type="text" name="description" placeholder="Bug Description" class="form-control" value=""
                    required>
                <select name="label" class="form-control" required>
                    <option value="0">General</option>
                    <option value="1">Number error</option>
                    <option value="2">Functional</option>
                    <option value="3">Performance</option>
                    <option value="4">Security</option>
                    <option value="5">Typo</option>
                    <option value="6">Design</option>
                </select>
                <button class="btn btn-success save-issue">Save</button>
                <button class="btn btn-default cancel-edit">Cancel</button>
            </div>
            
        </h3>
        <strong>Domain:</strong>

        <a href="{{ object.url }}" target="_new" class="issue-domain">{{ object.url }}</a>
        <div class="pull-right">
            <button class="btn btn-primary btn-xs copy-btn" data-clipboard-text="{{ object.description }}">
                <i class="glyphicon glyphicon-copy"></i> Copy Title
            </button>
            {% if request.user.is_authenticated %}
            <span class="like_btn">
                {% include '_likes.html' %}
            </span>
            <span class="flag_btn">
                {% include '_flags.html' %}
            </span>
            <a class="bookmark btn btn-success btn-xs" name="{{ object.pk }}">
                <i class="fa fa-bookmark-o"></i> Bookmark
            </a>
            {% endif %}
            <a class="tweet-btn fa fa-twitter btn btn-xs tweet-btn"
                href="https://twitter.com/intent/tweet?text=Bug on @{{ object.domain_title }} - {{ object.description }}"
                data-size="small"> Tweet</a>
            <span class="fb-share-button"
                data-layout="button_count" data-size="small" data-mobile-iframe="true">
                <a href="https://www.facebook.com/sharer/sharer.php?u=https://{% env 'FQDN' %}/issue/{{ object.id }}" class="fb-xfbml-parse-ignore btn btn-primary btn-xs fb-btn" target="_blank">
                    <i class="fa fa-facebook fa-white"></i> Share
                </a>
            </span>
        </div>
        <hr>
    </div>
</div>

<div class="jumbotron">
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-red">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-4">
                            <a href="/domain/{{ object.domain_name }}">
                                <img src="{{ object.domain.get_logo }}" class="img-thumbnail" height="100" width="100">
                            </a>
                        </div>
                        <div class="col-xs-8">
                            <h3>Reported on {{ object.domain_name }}</h3>
                            <h4>Total # of issues reported = {{ issue_count }}</h4>
                            <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-primary btn-xs pull-right">
                                    Subscribe to {{ object.domain_title }} bugs
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-green">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-4">
                            {% if object.user.username %}
                            <a href="/profile/{{ object.user.username }}">
                                {% if object.user.socialaccount_set.all.0.get_avatar_url %}
                                <img class="img-thumbnail" height="100" width="100"
                                    src="{{ object.user.socialaccount_set.all.0.get_avatar_url }}">
                                {% else %}
                                <img class="img-thumbnail" src="{% gravatar_url object.user.email 100 %}" height="100"
                                    width="100">
                                {% endif %}
                            </a>
                            {% else %}
                            <img class="img-thumbnail" height="100" width="100"
                            src="{% static 'images/dummy-user.png' %}" class="img-responsive img-rounded">
                            {% endif %}
                        </div>
                        <div class="col-xs-8">
                            <h3>Reported by {{ object.user.username|default_if_none:"Anonymous" }}</h3>
                            {% if object.user.username %}
                            <h4>Total Points of {{ object.user.username }} = {{ users_score }}</h4>

                            <form name="_xclick" action="https://www.paypal.com/cgi-bin/webscr" method="post">
                                <input type="hidden" name="cmd" value="_xclick">
                                <input type="hidden" name="business" value="coderbounty@gmail.com">
                                <input type="hidden" name="item_name"
                                    value="tip for {{ object.user.username }} on {% env 'DOMAIN_NAME' %} bug # {{ object.id }}">
                                <input type="hidden" name="currency_code" value="USD">
                                <button type="submit" class="btn btn-primary btn-xs pull-right">
                                    Send a Tip
                                </button>
                            </form>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-purple">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-4">
                            {% if browser_family %}
                            {% with 'img/browser-logos/'|add:browser_family|add:'/'|add:browser_family|add:'_64x64.png'|lower as image_static %}
                            <img src="{% static image_static %}" class="img-thumbnail" height="100" width="100">
                            {% endwith %}
                            {% endif %}
                        </div>
                        <div class="col-xs-8">
                            <h4>Browser Version: {{ browser_version }}</h4>
                            <h4>Operating System: {{ os_family }}</h4>
                            <h4>OS Version: {{ os_version }}</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading" style="height: 120px">
                    <div class="row">
                        <div class="col-xs-6">
                            <div class="bug-info">
                                <strong>Bug Type:</strong>
                                <span class="label label-info bug-label">{{ object.get_label_display }}</span>
                            </div>
                            <div class="bug-info">
                                <strong>Status:</strong>
                                <span class="label label-{% if object.status == 'open' %}success{% else %}danger{% endif %} text-capitalize status">{{object.status }}</span>
                                {% if request.user.is_authenticated %}
                                <a class="btn btn-default btn-xs edit-issue-status btn_issclose" id="issue_stat">Click
                                    to
                                    {% if object.status == "open" %}Close{% else %}Open{% endif %}</a>
                                {% endif %}
                            </div>
                            <div class="bug-info">
                                <strong>Added on:</strong>
                                <span class="label label-info btn_addedon">{{ object.created }}</span>
                            </div>
                        </div>
                        <div class="col-xs-6 operations">
                            {% if object.domain.github %}
                                {% if object.github_url %}
                                    <a href="{{ object.github_url }}" target="_new" class="btn btn-warning btn-xs">View
                                        on Github</a>
                                {% else %}
                                    {% if request.user.is_superuser or request.user == object.user %}
                                        {% if object.screenshot %}
                                            <a href="{{ object.domain.github }}/issues/new?title={{ object.description|urlencode }}&body=![0]({{ object.screenshot.url }})%20http://{% env 'FQDN' %}/issue/{{ object.id }}"
                                        
                                        {% else %}
                                            {% if screenshots %}
                                                <a href="{{ object.domain.github }}/issues/new?title={{ object.description|urlencode }}&body=![0]({{ screenshots.0.image.url }})%20http://{% env 'FQDN' %}/issue/{{ object.id }}"
                                            {% endif %}
                                        {%endif%}
                                    {% endif %}
                                {% endif %}
                            {% endif %}
                            {% if request.user.is_superuser or request.user == object.user %}
                                <a class="btn btn-info btn-xs edit-issue">Edit Issue</a>
                                <a href="/delete_issue/{{ object.id }}"
                                    onclick="return confirm('Are you sure you want to delete this issue?')"
                                    class="btn btn-danger btn-xs">Delete Issue</a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <h4>Screenshot:</h4>
        <hr>
        {% if object.screenshot %}
            <a href="{{ object.screenshot.url }}" data-lightbox="image">
                <img src="{{ object.screenshot.url }}" class="img-thumbnail">
            </a>
        {% else %}
            {% for screenshot in screenshots %}
                <a href="{{ screenshot.image.url }}" data-lightbox="image">
                    <img src="{{ screenshot.image.url }}" class="img-thumbnail" style="margin-bottom: 10px !important; border: 2px solid black">
                </a>
            {% endfor %}
        {% endif %}
        <hr>
    </div>
    {% if object.get_ocr %}
    <div class="col-lg-12">
        <h4>OCR Results:</h4> {{ object.get_ocr }}
        <hr>
    </div>
    {% endif %}
</div>

<div class="row">
    <div class="col-md-6">
        <h3>Comments:</h3>
        {% if all_comment %}
        <div id="target_div">
            {% include 'comments.html' %}
        </div>
        {% else %}
        <p>No comment added yet. Be the first to comment!</p>
        {% endif %}
        {% if user.is_authenticated %}
        <form id="comments">
            {% csrf_token %}
            <div class="form-group">
                <input type="hidden" name="issue_pk" id="issue_pk" value="{{ issue.pk }}">
                <textarea placeholder="Comment" class="form-control" id="text_comment" name="text_comment" rows="3"
                    required></textarea>
            </div>
            <div class="alert alert-danger hidden" role="alert">
                <strong>Oh snap!</strong> Cannot comment just newlines and spaces. Please add text.
            </div>
            <button id="comment_submit" class="btn btn-small" type="submit">Add Comment</button>
        </form>
        {% endif %}
    </div>
</div>

<script type="text/javascript">
   var label = "{{object.label}}";

    $(document).on('click', '.edit-issue', function (e) {
        $('.form input[name=description]').val($('.issue-desc').text());
        $('.form input[name=domain]').val($('.issue-domain').text());
        $('.form select').val(label);
        $('.editables').hide();
        $('.form').show();
    });

    $(document).on('click', '.cancel-edit', function (e) {
        $('.form').hide();
        $('.editables').show();
    });

    $(document).on('click', '.save-issue', function (e) {
        e.preventDefault();

        if ($('.form input[name=description]').val().trim().length == 0 ||
            $('.form input[name=domain]').val().trim().length == 0) {
            return;
        }
        var dom_regex = /[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi;
        dom_regex = new RegExp(dom_regex);
        var domain_url = $('.form input[name=domain]').val();
        if (domain_url.match(dom_regex) == null) {
            alert('Enter a valid url');
            return;
        }


        $.ajax({
            type: 'POST',
            url: '/issue/edit/',
            data: {
                issue_pk: $('#issue_pk').val(),
                domain: $('.form input[name=domain]').val(),
                description: $('.form input[name=description]').val(),
                label: $('.form select').val(),
                csrfmiddlewaretoken: $('.form input[name=csrfmiddlewaretoken]').val(),
            },
            success: function (data) {
                $('.issue-desc').text($('.form input[name=description]').val());
                $('.issue-domain').text($('.form input[name=domain]').val());
                $('.issue-domain').attr("href", ($('.form input[name=domain]').val()));
                label = $('.form select').val();
                var l = $(".form select option[value='" + label + "']").text();
                $('.bug-label').text(l);
                $('.form').hide();
                $('.editables').show();
                $.notify("Issue updated!", {
                    style: "custom",
                    className: "success"
                });
                if (data === "Domain Created")
                    $.notify("Domain Added!", {
                        style: "custom",
                        className: "success"
                    });
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });

    $(document).on('click', '.edit-issue-status', function (e) {
        var s = $('.status').text();
        var action = s == "open" ? "close" : "open";
        $.ajax({
            type: 'POST',
            url: '/issue/update/',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('X-CSRFToken', "{{csrf_token}}");
            },
            data: {
                issue_pk: $('#issue_pk').val(),
                action: action
            },
            success: function (data) {
                if (data == "Updated") {
                    if (action == "open") {
                        $('.status').text('open');
                        $('.status').removeClass('label-danger');
                        $('.status').addClass('label-success');
                        $('#issue_stat').text('Click to Close');
                    } else {
                        $('.status').text('closed');
                        $('.status').removeClass('label-success');
                        $('.status').addClass('label-danger');
                        $('#issue_stat').text('Click to Open');
                    }
                    $.notify("Issue updated!", {
                        style: "custom",
                        className: "success"
                    });
                } else {
                    $.notify(
                        "Only the user who has submitted the bug and superuser can close/open an issue"
                    ), {
                        style: "custom",
                        className: "danger"
                    }
                }
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });

    $('body').on('click', '.like_unlike', function (e) {
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/like_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('.like_btn').html(data);
            },
        });
    });

    $('body').on('click', '.flag_unflag', function (e) {
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/flag_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('.flag_btn').html(data);
            },
        });
    });

    $('body').on('click', '.bookmark', function (e) {
        e.preventDefault();
        var issue_pk = $(this).attr('name');
        $.ajax({
            type: 'GET',
            url: '/save_issue/' + issue_pk + '/',
            data: {},
            success: function (data) {
                $('.bookmark i').toggleClass('fa-bookmark-o').toggleClass('fa-bookmark');
                $.notify("Bookmark Updated!", {
                    style: "custom",
                    className: "success"
                });
            },
            error: function () {
                $.notify("Some error occurred!", {
                    style: "custom",
                    className: "danger"
                });
            }
        });
    });
</script>
{% endblock %}