{% extends "base.html" %}
{% load staticfiles %}
{% load gravatar %}
{% load socialaccount %}
{% providers_media_js %}
{% block content %}
    <style>
    .ds-btn li{ list-style:none; float:left; padding:10px; }
    .ds-btn li a span{padding-left:15px;padding-right:5px;width:100%;display:inline-block; text-align:left;}
    .ds-btn li a span small{width:100%; display:inline-block; text-align:left;}
    </style>
    <div class="row">
        <div class="col-lg-6">
            <h1 class="page-header">Get points for testing and finding issues!</h1>
        </div>
        <div class="col-lg-6">
            <h1 class="page-header">
            {% if messages %}
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
            {% endif %}&nbsp;
            </h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-6">
            <form role="form" action="/issue/" method="post" enctype="multipart/form-data" >
                {% csrf_token %}
                <div class="form-group">
                    <label>Find a bug on any website
                        {% if not user.is_authenticated %}
                            <span style="color:#DD4252; margin-left:60px;">* login required</span>
                        {% endif %}
                    </label>{{form.url.errors}}
                    {% if request.GET.url %}
                        <input class="form-control" placeholder="www.testsite.com/bug-found" name="url" value="{{request.GET.url}}">
                    {% else %}
                        <input class="form-control" placeholder="www.testsite.com/bug-found" name="url" value="{{form.url.value|default:""}}">
                    {% endif %}
                </div>
                <div class="form-group">
                    <label>Describe the bug</label>{{form.description.errors}}
                    <textarea class="form-control" rows="3" placeholder="I found a bug on a site."  name="description">{{form.description.value|default:""}}</textarea>
                </div>
                
                <div class="form-group">
                    <label>Attach Screenshot</label>
                    {{form.screenshot.errors}}
                    {% if request.GET.hash %}</br>
                        <img src="{{ MEDIA_URL }}uploads/{{request.GET.hash}}.png" height="100" style=" border: 1px solid #d43f3a;">
                        <input type="hidden" name="screenshot-hash" value="{{request.GET.hash}}">
                        <input type="file" name="screenshot" value="{{request.GET.hash}}" style="visibility:hidden;">
                    {% else %}
                        <input type="file" name="screenshot">
                    {% endif %}
                </div>
                
                <div class="form-group">
                    <button type="submit" class="btn btn-default btn-danger" style="background:#dd4252; height:43px; font-size:14px;">Enter Bug</button>
                    <label style="color:#dd4252; margin-left: 20px"> Win +3 points!</label>
                    {% if not user.is_authenticated %}
                        <a href="/accounts/login">
                            <button class="btn btn-default btn-caution" style="float:right;">
                            <i class="fa fa-envelope fa-2x"></i>
                            </button>
                        </a>
                        <a href="{% provider_login_url "facebook" method="js_sdk" %}">
                            <button class="btn btn-default btn-caution" style="float:right;">
                            <i class="fa fa-facebook fa-2x"></i>
                            </button>
                        </a>
                        <a href="{% provider_login_url "google" method="js_sdk" %}">
                            <button class="btn btn-default btn-caution" style="float:right;">
                            <i class="fa fa-google fa-2x"></i>
                            </button>
                        </a>
                        <a href="{% provider_login_url "github" method="js_sdk" %}">
                            <button class="btn btn-default btn-caution" style="float:right;">
                            <i class="fa fa-github fa-2x"></i>
                            </button>
                        </a>
                        <a href="/accounts/login">
                            <button class="btn btn-default btn-caution" style="color:#dd4252; float:right; height:43px; font-size:14px;">Login</button>
                        </a>
                    {% endif %}
                </div>
            </form>
        </div>
        
        <div class="col-lg-6">
            <div class="col-lg-6" style="margin-bottom:20px;">
                <div class="form-group">
                    <form role="form" action="/add_domain/" method="get">
                        <label>Search domains (+1 point for adding new)</label>
                        <input class="form-control" style="float:left;display:inline-block;width:200px;" placeholder="www.testsite.com" name="domain" value="{{request.GET.domain}}">
                        <button class="btn btn-default btn-caution" style="float:right; display:inline-block;"  >Search</button>
                    </form>
                </div>
            </div>
            <center>
            <span id="video_span">
                <iframe width="560" height="315" id="video_iframe" src="https://www.youtube.com/embed/o-t6HDXjpP8?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
            </span>
            </center>
        </div>
        
    </div>
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Sponsored Bug Hunts
            </h1>
        </div>
    </div>
    <div class="row">
        {% for hunt in hunts %}
            <div class="col-lg-3 col-md-6">
                <div class="panel"  id="hunt_{{hunt.id}}">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3" >
                                <img src="{{MEDIA_URL}}{{hunt.logo}}" width="75" height="75" id="hunt_image{{hunt.id}}" style="background-color:white;">
                            </div>
                            <div class="col-xs-9 text-right" style="color:white;">
                                <div class="huge">{{hunt.domain_title}}</div>
                                <div>Grand Prize ${{hunt.prize}}</div>
                            </div>
                        </div>
                    </div>
                    <a href="{{hunt.url}}" target="_new">
                        <div class="panel-footer">
                            <span class="pull-left" id="hunt_link{{hunt.id}}">View Website</span>
                            <span class="pull-right"><i class="fa fa-arrow-circle-right" id="hunt_icon{{hunt.id}}"></i></span>
                            <div class="clearfix"></div>
                        </div>
                    </a>
                </div>
                <script>
                $('#hunt_{{hunt.id}}').css('background-color', "{{hunt.color}}");
                $('#hunt_icon{{hunt.id}}').css('color', "{{hunt.color}}");
                $('#hunt_link{{hunt.id}}').css('color', "{{hunt.color}}");
                </script>
            </div>
        {% endfor %}
        <div class="col-lg-3 col-md-6">
            <div class="panel"  style="background-color:#234082">
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-xs-3">
                            <img src="https://www.owasp.org/images/thumb/2/2f/Owasp_logo_flat2_icon.jpg/100px-Owasp_logo_flat2_icon.jpg" width="75" height="75">
                        </div>
                        <div class="col-xs-9 text-right " style="color:white;">
                            <div class="huge">OWASP</div>
                            <div>Grand Prize $500</div>
                        </div>
                    </div>
                </div>
                <a href="https://www.owasp.org/index.php/Bug_Bounty_Projects" target="_new">
                    <div class="panel-footer">
                        <span class="pull-left" style="color:#234082">View Details</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right" style="color:#234082"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </a>
            </div>
        </div>
        
    </div>
    <a href="/start">
        <button type="submit" class="btn btn-default btn-danger" style="background:#dd4252; height:43px; font-size:14px;">Start a Hunt</button>
    </a>
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Random Domains
            </h1>
        </div>
    </div>
    <div class="row">
        <ul class="ds-btn">
        {% for domain in domains %}
            <li>
                <a class="btn btn-lg" style="background-color:{{domain.color}}" href="/domain/{{domain}}">
                    <img src="http://www.{{domain.domain_name}}/favicon.ico" height="25" width="25" style="vertical-align:top" onerror="this.onerror=null; this.parentNode.style.display ='none';">
                    <span>{{domain.domain_name}}<br><small>{{domain.issue_set.all|length}} issues </small></span>
                </a>
            </li>
           {% endfor %}
        </ul>
        
    </div>
    <div class="row">
        <div class="col-lg-9">
            <h1 class="page-header">Activity</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Latest
                </div>
                <div class="panel-body">
                    <div class="list-group" >
                        {% for activity in activities %}
                            {% include '_activity.html' %}
                        {% endfor %}
                    </div>
                    <a href="/all_activity" class="btn btn-default btn-block">View All Activity</a>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    {% now "F" %} Leaderboard
                </div>
                <div class="panel-body">
                    <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 %}
                                        {% gravatar leader.email 50 %}
                                    {% endif %}
                                    <a href="/profile/{{leader.username}}" style="margin-left:5px;">{{leader.username}}</a>
                                    <span class="pull-right text-muted small"><em> {{leader.total_score}} points</em>
                                    </span>
                                </div>
                            {% endfor %}
                        {% else %}
                            Leaderboard reset for {% now "F" %}. Be first to find issues!
                        {% endif %}
                    </div>
                    <!-- <a href="#" class="btn btn-default btn-block">View All</a>-->
                </div>
            </div>
        </div>
    </div>
    <script>
    var player_width = 560;
    var player_height = 315;
    var responsiveVideo = function() {
    var player_window_buffer = 120;
    var window_width = $(window).width();
    var aspect_ratio = player_width/player_height;
    var player_span = $('#video_span');
    var player_iframe = $('#video_iframe');
    if (window_width >= player_width) {
    $(player_span).width(player_width)
    $(player_span).height(player_height).css('line-height', player_height + 'px');
    $(player_iframe).width(player_width);
    $(player_iframe).height(player_height);
    $('#chrome_ext').show();
    } else {
    $(player_span).width(window_width-player_window_buffer);
    var new_wrapper_height = $(player_span).width()/aspect_ratio;
    $(player_span).height(new_wrapper_height).css('line-height', new_wrapper_height + 'px');
    $(player_iframe).width(window_width-player_window_buffer);
    $(player_iframe).height(($(player_span).width()/aspect_ratio));
    $('#chrome_ext').hide();
    }
    }
    $(document).ready(function(){responsiveVideo();});
    $(window).resize(function() {responsiveVideo();});
    </script>
{% endblock %}