{% extends "base_dashboard.html" %}
{% load static %}
{% load custom_tags %}
{% load tz_detect %}
{% block title %}
    Start a Bughunt - OWASP {% env 'PROJECT_NAME' %}
{% endblock %}
{% block description %}
    Create a new bughunt by entering the URL, app name, or GPS location of the issue. Define start and end dates, domain, and prizes for the winners.
{% endblock %}
{% block keywords %}bughunt, OWASP, start a bughunt, security, rewards, prizes, bug tracking, competition{% endblock %}
{% block og_title %}
    Start a Bughunt - OWASP {% env 'PROJECT_NAME' %}
{% endblock %}
{% block og_description %}
    Start a new bughunt on OWASP {% env 'PROJECT_NAME' %}. Set the issue details, start/end dates, and prize information for participants.
{% endblock %}
{% block content %}
    <section>
        {% include "includes/organization_sidenav.html" %}
    </section>
    <script src="{% static "js/jquery.validate.js" %}"></script>
    <link href="{% static "css/bootstrap-slider.css" %}" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="{% static "css/mtr-datepicker.min.css" %}" />
    <link rel="stylesheet" type="text/css" href="{% static "css/mtr-datepicker.default-theme.min.css" %}" />
    <form id="create-hunt"
          class="fixed top-0 left-1/2 transform -translate-x-1/2 w-1/2">
        {% csrf_token %}
        <div class="bg-white p-6 rounded-lg shadow-lg">
            <div class="mb-6">
                <h4 class="text-2xl font-bold">
                    <span class="text-black">START A</span> BUGHUNT
                </h4>
                <h6 class="text-gray-600">Enter URL, App name or GPS location of issue</h6>
            </div>
            <div class="space-y-4">
                <div class="form-group w-full">
                    <input type="text"
                           name="name"
                           required
                           class="w-full p-2 border border-gray-300 rounded"
                           placeholder="Enter Name for the Bughunt"
                           id="name"
                           value="">
                </div>
                <div>
                    {{ hunt_form.media }}
                    {{ hunt_form.as_p }}
                </div>
                <div class="form-group w-1/2">
                    <label for="name" class="block text-gray-700">
                        Start Date/Time :
                        <div id="datepicker-1-res" class="hidden"></div>
                    </label>
                    <div id="datepicker-1"></div>
                </div>
                <div class="form-group w-1/2">
                    <label for="name" class="block text-gray-700">
                        End Date/Time :
                        <div id="datepicker-2-res" class="hidden"></div>
                    </label>
                    <div id="datepicker-2"></div>
                </div>
                <div class="form-group w-full">
                    <select name="domain"
                            class="w-full p-2 border border-gray-300 rounded"
                            id="domain">
                        {% for domain in domains %}<option>{{ domain.id }} - {{ domain.name }}</option>{% endfor %}
                    </select>
                </div>
                <div class="form-group w-full">
                    <span class="block text-gray-700">Prizes</span>
                    <div class="flex space-x-4">
                        <label class="flex-1 relative">
                            <input name="prize_winner"
                                   type="number"
                                   placeholder="Winner"
                                   class="w-full p-2 border border-gray-300 rounded pr-8" />
                            <div class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">$</div>
                        </label>
                        <label class="flex-1 relative">
                            <input placeholder="Runner's Up"
                                   name="prize_runner"
                                   type="number"
                                   class="w-full p-2 border border-gray-300 rounded pr-8" />
                            <div class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">$</div>
                        </label>
                        <label class="flex-1 relative">
                            <input placeholder="2nd Runner's Up"
                                   name="prize_second_runner"
                                   type="number"
                                   class="w-full p-2 border border-gray-300 rounded pr-8" />
                            <div class="absolute inset-y-0 right-0 flex items-center pr-2 text-gray-500">$</div>
                        </label>
                    </div>
                    <p class="text-sm text-gray-500 mt-2">
                        (Your wallet must contain the total prize money, if not you can go to profile to add money to wallet)
                    </p>
                </div>
                <label class="flex items-center space-x-2">
                    <input name="publish" type="checkbox" value="true" class="form-checkbox">
                    <span>Publish (If Not Published, the Hunt Will be saved as a draft)</span>
                </label>
            </div>
            <div class="mt-6 flex space-x-4">
                <input type="submit"
                       class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
                       value="Save" />
                <input type="reset"
                       class="bg-gray-500 text-white px-4 py-2 rounded hover:bg-gray-600"
                       value="Reset" />
            </div>
        </div>
    </form>
    <script type="text/javascript" src="{% static "js/mtr-datepicker-timezones.js" %}"></script>
    <script type="text/javascript" src="{% static "js/mtr-datepicker.js" %}"></script>
    <script type="text/javascript" src="{% static "js/dt.js" %}"></script>
    <script type="text/javascript">
  var dateNow = new Date();
  var Datepicker1 = MtrDatepickerDemo.init({
    target: 'datepicker-1',
    timestamp: dateNow.getTime(),
    future: true,
  }, {
    exportFormats: 'datepicker-1-res',
  });
  var Datepicker2 = MtrDatepickerDemo.init({
    target: 'datepicker-2',
    timestamp: dateNow.getTime(),
    future: true,
  }, {
    exportFormats: 'datepicker-2-res',
  });
    </script>
{% endblock content %}
{% block after_js %}
    <script src="{% static "js/bootstrap-slider.js" %}"></script>
    <script>
  $('.btn').on('click', function () {
    $(".hunt-form").valid();
  });

  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 %}