{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% load custom_tags %}
{% block title %}
    Report an IP
{% endblock title %}
{% block description %}
    Report an IP by providing details such as the activity title, IP address, activity type, and a detailed description. Ensure comprehensive reporting for better monitoring.
{% endblock description %}
{% block keywords %}
    Report an IP, IP Reporting, Activity Title, IP Address, Activity Type, Detailed Description
{% endblock keywords %}
{% block og_title %}
    Report an IP - Comprehensive Reporting
{% endblock og_title %}
{% block og_description %}
    Efficiently report an IP by providing necessary details such as the activity title, IP address, activity type, and a comprehensive description.
{% endblock og_description %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div class="bg-[#F3F5F7] flex flex-col items-center">
        <form id="reportIpForm"
              method='post'
              action="#"
              enctype="multipart/form-data"
              class="w-[96%] bg-white rounded-2xl p-10 my-10 shadow-md"
              onsubmit="return validateReportIp()">
            {% csrf_token %}
            <div class="w-full pb-12">
                <p class="text-5xl font-semibold leading-7 text-gray-900">REPORT AN IP</p>
                <!-- Activity Title and Input -->
                <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-5">
                        <label for="activity_title"
                               class="block text-2xl font-semibold leading-6 text-gray-900">Activity Title</label>
                        <div class="mt-2">
                            <input id="activity_title"
                                   type="text"
                                   name="activity_title"
                                   maxlength="100"
                                   required
                                   placeholder="Short Title"
                                   class="block w-full placeholder:text-xl rounded-md border-0 py-5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:leading-6" />
                        </div>
                    </div>
                    <div class="sm:col-span-1">
                        <label for="activity_type"
                               class="block text-2xl font-semibold leading-6 text-gray-900">Activity Type</label>
                        <div class="mt-2">
                            <select name="activity_type"
                                    id="activity_type"
                                    required
                                    class="block w-full rounded-md border-0 py-4 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset">
                                <option value="friendly" selected>Friendly</option>
                                <option value="malicious">Malicious</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <!-- IP Address Input -->
                    <div class="sm:col-span-5">
                        <label for="ip_address"
                               class="block text-2xl font-semibold leading-6 text-gray-900">Enter IP Address</label>
                        <div class="mt-2">
                            <input id="ip_address"
                                   type="text"
                                   name="ip_address"
                                   required
                                   placeholder="e.g. 192.168.1.1 or 2001:0db8:85a3:0000:0000:8a2e:0370:7334"
                                   class="block w-full placeholder:text-xl rounded-md border-0 py-5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:leading-6" />
                        </div>
                    </div>
                    <!-- IP Type Selection -->
                    <div class="sm:col-span-1">
                        <label for="ip_type"
                               class="block text-2xl font-semibold leading-6 text-gray-900">IP Type</label>
                        <div class="mt-2">
                            <select name="ip_type"
                                    id="ip_type"
                                    required
                                    class="block w-full rounded-md border-0 py-4 px-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset">
                                <option value="ipv4" selected>IPv4</option>
                                <option value="ipv6">IPv6</option>
                            </select>
                        </div>
                    </div>
                </div>
                <!-- Activity Description Input -->
                <div class="mt-12 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-5">
                        <label for="description"
                               class="block text-2xl font-semibold leading-6 text-gray-900">
                            Detailed Description
                        </label>
                        <div class="mt-2">
                            <textarea id="description"
                                      name="description"
                                      required
                                      rows="4"
                                      placeholder="Describe the activity in detail"
                                      class="block w-full placeholder:text-xl rounded-md border-0 py-5 pl-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 sm:leading-6"></textarea>
                        </div>
                    </div>
                </div>
                <!-- Captcha -->
                <div class="w-full mt-6 flex flex-col md:flex-row items-center justify-between gap-x-6 ">
                    <div class="flex h-full justify-between items-center flex-col my-16 md:flex-row md:mt-0">
                        <div class="captcha-form flex ml-10 flex-col w-full md:flex-row items-center">
                            <div class="[&_img]:w-36 [&_img]:mr-2.5 [&_input]:w-full [&_input]:border [&_input]:border-black [&_input]:p-2.5 [&_input]:text-lg">
                                {{ captcha_form.captcha }}
                            </div>
                        </div>
                    </div>
                    <div class="w-full flex justify-evenly md:justify-end">
                        <button type="button"
                                onclick="cancelForm()"
                                class="text-md font-semibold leading-6 mr-10 text-gray-900">Cancel</button>
                        <button type="submit"
                                class="rounded-md bg-red-600 px-11 py-3 text-md font-semibold text-white shadow-sm hover:bg-red-500">
                            Report
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
{% endblock content %}
{% block after_js %}
    <script type="text/javascript">
    function validateIP(ipInput) {
        const ipPattern = /^(\d{1,3}\.){3}\d{1,3}$|^(?:[a-f0-9]{1,4}:){7}[a-f0-9]{1,4}$|^(?:[a-f0-9]{1,4}:){1,7}:$|^(?:[a-f0-9]{1,4}:){1,6}:[a-f0-9]{1,4}$|^(?:[a-f0-9]{1,4}:){1,5}(:[a-f0-9]{1,4}){1,2}$|^(?:[a-f0-9]{1,4}:){1,4}(:[a-f0-9]{1,4}){1,3}$|^(?:[a-f0-9]{1,4}:){1,3}(:[a-f0-9]{1,4}){1,4}$|^(?:[a-f0-9]{1,4}:){1,2}(:[a-f0-9]{1,4}){1,5}$|^[a-f0-9]{1,4}(:[a-f0-9]{1,4}){1,6}$|^:((?::[a-f0-9]{1,4}){1,7}|:)$$/i;
        return ipPattern.test(ipInput);
    }

    function validateReportIp() {
        const ipInput = document.getElementById('ip_address').value;
        const validationResult = document.getElementById('ip_address');

        if (validateIP(ipInput)) {
            return true;
        } else {
            alert("invalid ip")
            return false;
        }
    }
    </script>
{% endblock after_js %}