{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% load custom_tags %}
{% block style %}
    <style>
    .row .col-md-6:nth-child(1) .panel {
        background-color: #F76B78;
    }

    .row .col-md-6:nth-child(2) .panel {
        background-color: #DC4353;
    }

    .row .col-md-6:nth-child(3) .panel {
        background-color: #C41E2E;
    }

    .row .col-md-6:nth-child(4) .panel {
        background-color: #9B0C1A;
    }

    .row .col-md-6:nth-child(1) .panel button {
        background-color: #F76B78;
        border-color: #F76B78;
    }

    .row .col-md-6:nth-child(2) .panel button {
        background-color: #DC4353;
        border-color: #DC4353;
    }

    .row .col-md-6:nth-child(3) .panel button {
        background-color: #C41E2E;
        border-color: #C41E2E;
    }

    .row .col-md-6:nth-child(4) .panel button {
        background-color: #9B0C1A;
        border-color: #9B0C1A;
    }

    .text-danger {
        margin-left: 0px;
    }

    input[type='file'] {
        height: auto;
        width: auto;
        opacity: 1;
    }

    .slider {
        width: 100% !important;
    }

    .hunt-form .form-group {
        margin-top: 10px;
        align-items: center !important;
    }
    #start-hunt-root{
        width: 100%;
        display: flex;
        justify-content: center; align-items: center;
        padding: 30px;

    }
    .main{
        width: 500px;
        height: max-content;
        padding: 20px;
        background-color: white;
        box-shadow:  0px 0px 10px rgb(174, 174, 174);
    }
    .title{
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
    }
    .title p{
        font-size: 5rem;
        font-weight:900;
        margin: 10px;
    }

    .input-container {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    }

    /* Style the form icons */
    .icon {
    padding: 10px;
    background: rgb(255, 30, 30);
    color: white;
    min-width: 50px;
    text-align: center;
    }

    /* Style the input fields */
    .input-field {
    width: 100%;
    padding: 10px;
    outline: none;
    }

    .input-field:focus {
    border: 1px solid rgb(255, 30, 30);
    }

    #bughunt-submit{
        display: flex;
        width: 100%;
        justify-content: flex-end;
        align-items: center;
        margin-top: 10px;
    }
    #bughunt-submit button {
        background-color: rgb(255, 30, 30);
        color: white;
        padding: 10px 10px;
        border: none;
        cursor: pointer;
        width: 200px;
        opacity: 0.9;
        font-size: 1.5rem;
        font-weight: bold;
    }

    #bughunt-submit button:hover {
        background-color: rgb(203, 0, 0);
    }

    #bughunt-select-plan{
        padding: 10px 10px 10px 10px;
        width: 100%;
        border-radius: 0;
        border: none;
        background-color: rgba(255, 0, 0, 0.784);
        color: white;
        font-size: 1.4rem;
        font-weight: bold;
    }

    @media (max-width:1222px) {
        .title p{
            font-size: 4rem ;
        }
    }

    @media (max-width:498px) {
        .main{
            width: 95vw;
        }
        .panel-title p{
            font-size: 1rem;
        }
        .title p{
            font-size: 3rem;
        }
    }

    .bottom-right {
            position: absolute;
            bottom: 10px;
            right: 15px;
    }    
    </style>
{% endblock style %}
{% block content %}
    <script src="{% static "js/jquery.validate.js" %}"></script>
    <div class="bottom-right">
        <a href="https://github.com/OWASP-BLT/BLT/blob/main/website/templates/hunt.html">
            <i class="fab fa-github"></i>
        </a>
        <a href="https://www.figma.com/file/s0xuxeU6O2guoWEfA9OElZ/Design?node-id=488%3A1341&t=pqxWpF3hcYxjEDrs-1">
            <i class="fab fa-figma"></i>
        </a>
    </div>
    <link href="{% static "css/bootstrap-slider.css" %}" rel="stylesheet">
    <form role="form"
          action="{% url 'hunt' %}"
          method="post"
          enctype="multipart/form-data"
          class="hunt-form">
        {% csrf_token %}
        <div id="start-hunt-root">
            <div class="row main">
                <div class="panel-heading">
                    <div class="panel-title text-center">
                        <div class="title">
                            <p>START A</p>
                            <p class="text-red-900">BUGHUNT</p>
                        </div>
                        <p class="font-bold">{% trans "Enter URL, APP name or GPS location of issue" %}</p>
                        <hr />
                    </div>
                </div>
                {% csrf_token %}
                <div class="form-group">
                    <div class="input-container">
                        <i class="fa fa-bug icon" aria-hidden="true"></i>
                        <input class="input-field url required"
                               type="text"
                               placeholder="Name of the bughunt"
                               name="name">
                    </div>
                    {% if form.url.errors %}<label id="url-error" class="error" for="url">{{ form.url.errors }}</label>{% endif %}
                </div>
                <div class="form-group">
                    <div class="input-container">
                        <i class="fa fa-link icon" aria-hidden="true"></i>
                        <input class="input-field url required"
                               type="text"
                               placeholder="http://example.com"
                               name="url"
                               value="{{ form.url.value|default:"" }}">
                    </div>
                    {% if form.url.errors %}<label id="url-error" class="error" for="url">{{ form.url.errors }}</label>{% endif %}
                </div>
                <div class="form-group">
                    <div class="input-container">
                        <i class="fa fa-file-picture-o icon" aria-hidden="true"></i>
                        <input class="input-field url required w-full border-2 border-gray-300 p-2 rounded-md"
                               type="file"
                               name="logo">
                    </div>
                    {% if form.logo.errors %}<label id="url-error" class="error" for="url">{{ form.logo.errors }}</label>{% endif %}
                </div>
                <div class="input-group">
                    <div class="input-container">
                        <i class="fa fa-pencil-square-o icon" aria-hidden="true"></i>
                        <textarea data-required="true" name="description" id="description" data-intro="Description of Issue" data-step="2" class="input-field url required" rows="3" cols="100%" placeholder="Describe bug issue">
                        </textarea>
                    </div>
                </div>
                <div class="form-group">
                    <select name="plan" value="Flea" id="bughunt-select-plan">
                        <option value="Flea">{% trans "Flea Plan" %} $9.00 / {% trans "Month" %}</option>
                        <option value="Ant">{% trans "Ant Plan" %} $99.00 / {% trans "Month" %}</option>
                        <option value="Wasp">{% trans "Wasp Plan" %} $499.00 / {% trans "Month" %}</option>
                        <option value="Scorpion">{% trans "Scorpion Plan" %} $1499.00 / {% trans "Month" %}</option>
                    </select>
                </div>
                <div class="form-group">
                    <strong>{% trans "Grand Prize" %}:</strong>
                    <p>{% trans "Max amout awarded to winner" %}</p>
                    <div>
                        <input class="slider"
                               type="text"
                               name="prize"
                               value="{{ form.prize.value|default:'100' }}"
                               data-provide="slider"
                               data-slider-min="100"
                               data-slider-max="10000"
                               data-slider-step="100"
                               data-slider-value="{{ form.prize.value|default:'100' }}">
                    </div>
                    {{ form.prize.errors }}
                </div>
                <div class="form-group" id="bughunt-submit">
                    <button type="submit">{% trans "START BUGHUNT" %}!</button>
                </div>
            </div>
        </div>
        <h1 class="page-sub-header">
            {% env 'PROJECT_NAME' %} is 100% {% trans "free to use" %}, {% trans "Open Source and a non-commercial" %}, {% trans "not for profit initiative" %}.
        </h1>
    </form>
{% endblock content %}
{% block after_js %}
    <script src='{% static "js/bootstrap-slider.js" %}''></script>
    <script>
    function numberWithCommas(x) {
        var parts = x.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
    }

    $(".slider").slider({
        tooltip: 'always',
        formatter: function (value) {
            return '$' + numberWithCommas(value);
        }
    });
    </script>
{% endblock after_js %}