{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% load custom_tags %}
{% block title %}
    Report an issue | OWASP {% env 'PROJECT_NAME' %}
{% endblock title %}
{% block description %}
    Report a bug by providing the domain URL, bug title, and type. Attach screenshots and categorize the bug to ensure comprehensive reporting.
{% endblock description %}
{% block keywords %}
    Report a Bug, Bug Reporting, Domain URL, Bug Title, Bug Type, Attach Screenshots, Categorize Bug
{% endblock keywords %}
{% block og_title %}
    Report a Bug - Comprehensive Reporting
{% endblock og_title %}
{% block og_description %}
    Report a bug efficiently by providing all necessary details such as domain URL, bug title, type, and screenshots. Categorize the bug for better tracking.
{% endblock og_description %}
{% load gravatar %}
{% load socialaccount %}
{% load humanize %}
{% providers_media_js %}
{% block content %}
    {% include "includes/sidenav.html" %}
    <div id="duplicate-container"
         class="fixed w-full h-full top-0 left-0 overflow-y-auto z-[10000] bg-black/80 backdrop-blur-sm"
         hidden>
        <div class="flex flex-col w-full  h-full items-center ">
            <div class=" flex bg-red-500 mx-4 lg:mx-0 rounded-xl flex-col justify-center items-center  mt-10 w-full lg:max-w-[1400px]">
                <div class="w-full flex bg-red-500 rounded-t-lg  select-none items-center justify-between py-1 px-4">
                    <h1 class=" text-center text-white font-bold text-2xl p-4 w-full">{% trans "DUPLICATE ISSUES" %}</h1>
                    <button id="close-duplicate-container"
                            class="flex w-10 h-10 bg-white justify-center items-center rounded-full hover:bg-red-100 hover:shadow-md transition-all duration-200">
                        <i class="text-red-500 scale-150 fa-sharp fa-solid fa-xmark cursor-pointer"></i>
                    </button>
                </div>
                <div class="p-6 w-full bg-white rounded-b-lg shadow-lg border border-gray-200">
                    <div class="flex justify-between items-center mb-6 select-none">
                        <h3 class="text-2xl font-bold text-red-500">{% trans "Latest Issues" %}</h3>
                        <a href=""
                           id="view_all"
                           class="text-lg font-medium text-blue-600 hover:underline hover:text-blue-500">View all</a>
                    </div>
                    <div class="flow-root">
                        <ul role="list"
                            id="duplicate-list"
                            class="divide-y divide-gray-200 max-h-[60vh] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-gray-100">
                        </ul>
                    </div>
                    <div class="pt-6 border-t border-gray-300  text-center ">
                        <button onclick="$('#duplicate-container').hide()"
                                class="px-6 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors duration-200 font-medium">
                            Close List
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="min-h-screen bg-gray-50 py-8">
        <div class="w-[90%] mx-auto">
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 px-4 md:px-8 py-8 mb-8">
                <div class="flex items-center gap-6">
                    <div class="size-16 bg-gradient-to-r from-[#e74c3c] to-[#c0392b] rounded-full flex items-center justify-center">
                        <i class="fas fa-bug text-2xl text-white"></i>
                    </div>
                    <div>
                        <h1 class="text-3xl font-bold text-gray-800">{% trans "REPORT A BUG" %}</h1>
                        <p class="text-gray-600 mt-2">Help improve security by reporting vulnerabilities</p>
                    </div>
                </div>
            </div>
            <form id="createIssueForm"
                  method="post"
                  action="#"
                  enctype="multipart/form-data"
                  onsubmit="return validateCVE()">
                {% csrf_token %}
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    <div class="lg:col-span-2 space-y-6">
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <label for="url" class="text-xl font-semibold text-gray-900">{% trans "Domain URL" %}</label>
                                    <button type="button"
                                            class="duplicates inline-flex items-center px-3 py-2 font-medium rounded-lg bg-[#e74c3c] text-white hover:bg-[#c0392b] transition-colors duration-200">
                                        <i class="fas fa-search mr-2"></i>
                                        {% trans "Check Duplicates" %}
                                    </button>
                                </div>
                                <div class="flex flex-col sm:flex-row gap-4">
                                    <input id="url"
                                           type="text"
                                           name="url"
                                           value="{{ request.GET.url }}{{ form.url.value|default:'' }}"
                                           placeholder="https://example.com/report"
                                           required
                                           class="placeholder:text-base flex-1 text-lg placeholder:text-gray-400 rounded-lg border-0 ring-1 ring-gray-300 shadow-sm py-3 px-4 focus:ring-2 transition-shadow duration-200" />
                                </div>
                                {% if top_domains %}
                                    <div class="mt-4 space-y-3">
                                        <div class="flex items-center gap-2">
                                            <svg class="w-5 h-5 text-gray-500"
                                                 fill="none"
                                                 stroke="currentColor"
                                                 viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                                            </svg>
                                            <span class="text-sm font-medium text-gray-700">Quick Access Domains</span>
                                        </div>
                                        <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3">
                                            {% for domain in top_domains %}
                                                <button type="button"
                                                        onclick="fillUrl('{{ domain.domain__name }}')"
                                                        class="group flex items-center gap-3 p-2 bg-white hover:bg-gray-50 border border-gray-200 rounded-lg transition-all duration-200 hover:border-[#e74c3c] hover:shadow-sm">
                                                    <div class="w-8 h-8 flex items-center justify-center bg-gray-100 rounded-lg group-hover:bg-white transition-colors">
                                                        <img src="https://www.google.com/s2/favicons?sz=32&domain_url={{ domain.domain__name }}"
                                                             alt="{{ domain.domain__name }}"
                                                             class="w-5 h-5 rounded transition-transform group-hover:scale-110"
                                                             width="20"
                                                             height="20">
                                                    </div>
                                                    <span class="flex-1 text-sm font-medium text-gray-700 truncate group-hover:text-[#e74c3c]">
                                                        {{ domain.domain__name }}
                                                    </span>
                                                </button>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                <div class="lg:col-span-2">
                                    <label for="description" class="block text-xl font-semibold text-gray-900">{% trans "Bug Title" %}</label>
                                    <input type="text"
                                           name="description"
                                           id="description"
                                           value="{{ request.GET.description }}{{ form.description.value|default:'' }}"
                                           placeholder="XSS Vulnerability in Bug Report Editor"
                                           required
                                           class="w-full text-lg placeholder:text-gray-400 placeholder:text-base rounded-lg border-0 ring-1 ring-gray-300 shadow-sm py-3 px-4 focus:ring-2 transition-shadow duration-200" />
                                </div>
                                <div>
                                    <label for="label" class="block text-xl font-semibold text-gray-900">{% trans "Bug Type" %}</label>
                                    <select name="label"
                                            id="labelSelect"
                                            required
                                            class="w-full text-lg rounded-lg border-0 ring-1 ring-gray-300 shadow-sm py-3 px-4 bg-gray-50 focus:ring-2 transition-shadow duration-200">
                                        <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>
                                        <option value="7">Server down</option>
                                        <option value="8">Trademark Squatting</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="bg-white rounded-md border border-gray-200 shadow-sm p-6">
                            <div class="space-y-4">
                                <div class="flex items-center justify-between">
                                    <h2 class="text-xl font-semibold text-gray-900 truncate">{% trans "Bug Description" %}</h2>
                                    <div class="flex gap-2">
                                        <button type="button"
                                                onclick="insertMarkdown('bold')"
                                                class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200">
                                            <i class="fas fa-bold"></i>
                                        </button>
                                        <button type="button"
                                                onclick="insertMarkdown('italic')"
                                                class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200">
                                            <i class="fas fa-italic"></i>
                                        </button>
                                        <button type="button"
                                                onclick="insertMarkdown('image')"
                                                class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200">
                                            <i class="fas fa-image"></i>
                                        </button>
                                        <button type="button"
                                                onclick="insertMarkdown('link')"
                                                class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-md transition-colors duration-200">
                                            <i class="fas fa-link"></i>
                                        </button>
                                        <button type="button"
                                                onclick="togglePreview()"
                                                class="px-4 py-2 bg-[#e74c3c] hover:bg-[#c0392b] text-white rounded-md transition-colors duration-200">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                    </div>
                                </div>
                                <textarea id="markdownInput"
                                          name="markdown_description"
                                          class="w-full placeholder:text-base h-[300px] p-4 text-gray-700 border border-gray-200 rounded-lg "
                                          placeholder="Enter your markdown here..."></textarea>
                                <div id="preview-area"
                                     class="hidden w-full h-[300px] p-4 bg-gray-50 border border-gray-200 rounded-lg overflow-y-auto prose prose-sm max-w-none">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="space-y-6">
                        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                            <label for="hunt" class="block text-xl font-semibold text-gray-900 mb-4">{% trans "Bug Hunt" %}</label>
                            <select name="hunt"
                                    required
                                    class="w-full text-lg rounded-lg border-0 ring-1 ring-gray-300 shadow-sm py-3 px-4 bg-gray-50 focus:ring-2  transition-shadow duration-200">
                                {% if not report_on_hunt %}
                                    <option value="None">{% trans "Report Independently" %}</option>
                                {% endif %}
                                {% for hunt in hunts %}
                                    <option value="{{ hunt.id }}">{{ hunt.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                            <label for="cve_id" class="block text-xl font-semibold text-gray-900 mb-4">{% trans "CVE ID" %}</label>
                            <div class="flex flex-wrap sm:flex-nowrap gap-2 w-full">
                                <input class="flex-1 placeholder:text-base text-lg sm:text-base md:text-lg placeholder:text-gray-400 rounded-lg border border-gray-300 py-2 px-4 transition-shadow duration-200 min-w-0"
                                       type="text"
                                       placeholder="CVE-XXXX-XXXX"
                                       id="cve_id_input"
                                       name="cve_id"
                                       pattern="CVE-\d{4}-\d{4,7}"
                                       title="Please enter a valid CVE ID format (e.g. CVE-2024-1234)">
                                <button type="button"
                                        onclick="validateCVE()"
                                        class="px-3 md:py-1 py-4 text-xs sm:text-sm md:text-base bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-200 shrink-0 w-full sm:w-auto">
                                    <i class="fas fa-check md:text-base text-lg"></i>
                                </button>
                            </div>
                        </div>
                        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                            <label class="block text-xl font-semibold text-gray-900 mb-4">{% trans "Screenshots" %}</label>
                            <div id="screenshot-container"
                                 onclick="document.getElementById('screenshots').click()"
                                 class="relative group border-2 border-dashed border-gray-300 hover:border-[#e74c3c] rounded-xl p-6 transition-all duration-200 cursor-pointer">
                                <div class="text-center">
                                    <div class="w-16 h-16 mx-auto mb-4 text-gray-400 group-hover:text-[#e74c3c] transition-colors duration-200">
                                        <i class="fas fa-cloud-upload-alt text-4xl"></i>
                                    </div>
                                    <div class="space-y-2">
                                        <label class="text-lg font-medium text-[#e74c3c] cursor-pointer hover:text-[#c0392b]">
                                            {% trans "Upload screenshots" %}
                                            <input id="screenshots"
                                                   name="screenshots"
                                                   type="file"
                                                   class="sr-only"
                                                   accept="image/*"
                                                   multiple
                                                   required
                                                   max="4" />
                                        </label>
                                        <p class="text-sm text-gray-500">{% trans "Drag & drop or click to upload" %}</p>
                                        <p class="text-xs text-gray-400">PNG, JPG, GIF up to 5 images</p>
                                    </div>
                                </div>
                            </div>
                            <div id="files_manage"
                                 class="mt-4 w-full flex flex-col gap-4 items-center"></div>
                        </div>
                        <div class="bg-white rounded-lg border border-gray-200 shadow-sm p-6">
                            <div class="flex items-center justify-between">
                                <h2 class="text-xl font-semibold text-gray-900">{% trans "Team Members" %}</h2>
                                <button onclick="add_email_container()"
                                        type="button"
                                        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-lg bg-[#e74c3c] text-white hover:bg-[#c0392b] transition-colors duration-200">
                                    <i class="fas fa-plus mr-2"></i>
                                    {% trans "Add" %}
                                </button>
                            </div>
                            <p class="text-sm text-gray-500 mb-4">{% trans "Team members should be bughunts users" %}.</p>
                            <div class="space-y-3" id="email-container">
                                <label class="block font-medium text-gray-700">{% trans "Email address:" %}</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-8 bg-white rounded-lg border border-gray-200 shadow-sm flex md:flex-row flex-col items-center justify-between gap-8 px-6 py-5">
                    <div class="flex flex-col items-start gap-2">
                        <div class="flex items-center gap-2">
                            <input id="report_anonymous"
                                   type="checkbox"
                                   name="report_anonymous"
                                   class="w-5 h-5 rounded-lg text-[#e74c3c]  cursor-pointer">
                            <p for="report_anonymous"
                               class=" font-medium text-gray-900 cursor-pointer select-none">
                                {% trans "Report Anonymously" %}
                            </p>
                        </div>
                    </div>
                    <div class="flex flex-col gap-4 md:flex-row items-center justify-center [&>img]:w-[150px] md:[&>input]:w-[30%] [&>input]:w-[50%] [&>input]:border [&>input]:border-black [&>input]:p-[10px] [&>input]:text-[1.4rem] [&>input]:ml-2 [&>input]:rounded">
                        {{ captcha_form.captcha }}
                    </div>
                    <div class="flex gap-4  justify-center">
                        <button type="button"
                                onclick="cancelForm()"
                                class="px-6 py-2 bg-gray-400 text-white rounded-lg hover:bg-gray-500 transition-colors duration-200 font-medium">
                            {% trans "Cancel" %}
                        </button>
                        <button type="submit"
                                name="reportbug_button"
                                class="px-6 py-2 bg-[#e74c3c] text-white rounded-lg hover:bg-[#c0392b] transition-colors duration-200 font-medium">
                            {% trans "Report" %}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock content %}
{% block after_js %}
    <script type="text/javascript">
    function isCVEValid(cveNumber) {
        const cveRegex = /^CVE-\d{4}-\d{4,7}$/;
        return cveRegex.test(cveNumber);
    }

    function validateCVE() {
        const cveInput = document.getElementById('cve_id_input').value;
        const validationResult = document.getElementById('cve_id_input');
        //check for empty submission(allow form submission)
        if (!cveInput.trim()) {
            validationResult.style.borderColor = '';
            return true;
        }

        if (isCVEValid(cveInput)) {
            validationResult.style.borderColor = 'green';
        } else {
            validationResult.style.borderColor = 'red';
            return false;
        }
    }
    const screenshots = document.getElementById('screenshots');
    let manage_div = document.getElementById("files_manage");

    function escapeHtml(str) {return str.replace(/[&<>"']/g, function (s) {var entityMap = {"&": "&amp;","<": "&lt;",">": "&gt;",'"': '&quot;',"'": '&#39;',};return entityMap[s];});}
    function previewFile(file_name) {
        event.preventDefault();
        Array.from(screenshots.files).map(file => {
            if (file.name === file_name) {
                let src = URL.createObjectURL(file);
                if (src.startsWith('blob:')) {
                    let escapedSrc = escapeHtml(src);
                    $("#image-preview").attr("src", escapedSrc);
                    $("#image-preview-wrapper").show();
                }else {$("#image-preview-wrapper").hide();}
            }
        });
    }

    $("#image-preview-wrapper").on("click", () => {
        event.preventDefault();
        $("#image-preview-wrapper").hide();
    })

    function removeFile(fileName) {
        event.preventDefault();

    }

    screenshots.addEventListener('change', (event) => {

        const fileList = Array.from(event.target.files);

        fileList.map(file => {
            let src = URL.createObjectURL(file);
            let safeName = $("<div>").text(file.name).html();
            let safeNameDisplay = safeName.slice(0, 20) + (safeName.length > 20 ? "..." : "");
            // Use the safe name for display and in the onclick handler
            let fileDiv = $("<div>").addClass("w-full md:w-[300px] h-[180px] overflow-hidden rounded-lg").attr("onclick", `previewFile('${safeName}')`);
            let titleDiv = $("<div>").addClass("w-full h-10 flex justify-center rounded-t-lg p-2 bg-gray-500");
            let titleP = $("<p>").addClass("text-xl text-white font-bold").text(safeNameDisplay);
            let img = $("<img>").addClass("object-cover").attr("src", escapeHtml(src));

            titleDiv.append(titleP);
            fileDiv.append(titleDiv).append(img);
            $("#files_manage").append(fileDiv);
        })

    });


    $(function () {
        $(".duplicates").click(async () => {
            var uri = $("input[name='url']").val();

            $("#view_all").attr("href", `/search/?query=${encodeURIComponent(uri)}`);

            let resp = await fetch("/api/v1/urlcheck/", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    "domain_url": uri
                })
            });

            let resp_json = await resp.json()

            $("#duplicate-list").html("")
            resp_json.map(issue => add_duplicates(issue));

            $("#duplicate-container").show()

        });

        $("#close-duplicate-container").click(() => {
            $("#duplicate-container").hide()
        })


        let add_duplicates = (issue) => {
            $("#duplicate-list").append(
                `
                    <li class="py-2 border-x-gray-500 border-t-2 cursor-pointer hover:bg-gray-100 transition-all duration-200">
                        <div class="flex items-center space-x-4 px-2 py-1">
                            <div class="flex-shrink-0">
                                <img class="w-[50px] h-[50px] rounded-full" src="{% media_url %}${issue.user__userprofile__user_avatar}" alt="Neil image" width="50px" height="50px">
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="text-xl font-bold text-black/90">
                                    ${issue.description.substring(0, 50)}...
                                </p>
                                <a href="/issue/${issue.id}" class="text-lg text-gray-500 hover:text-red-500 truncate">
                                    /issue/${issue.id}
                                </a>
                            </div>
                            <div class="inline-flex items-center text-base text-lg font-medium text-gray-500">
                                    ${issue.created__day}/${issue.created__month}/${issue.created__year}
                                </div>
                        </div>
                    </li>
                `
            )
        }

    });


    function removeErrors(){
        var errors = document.getElementsByClassName('popup-errors');
        var errorsArray = Array.from(errors);

        // Remove each element from the DOM
        errorsArray.forEach(function(error) {
            error.remove();
        });
    }


    function remove_email_container(){
        let email_container = document.getElementById("email-container");
        let lst_child = email_container.lastElementChild;
        email_container.removeChild(lst_child);
    }

    function add_email_container(){
        const email_container_child_html = document.createElement('div');
        email_container_child_html.innerHTML = `
            <div class="mt-2 flex flex-row items-center w-[70%]">
                <input name="team_members" type="email" autocomplete="email" required class="w-[90%] mt-2 text-xl block rounded-md border-0 py-3 pl-3 text-gray-900 shadow-sm  placeholder:text-gray-400 ring-1 ring-gray-300" />
                <button type="button" onclick="remove_email_container()">
                    <i class="fa-sharp fa-solid fa-trash fa-lg text-[#596780] ml-4 hover:text-black"></i>
                </button>
            </div>
        `;

        let email_container = document.getElementById("email-container");
        email_container.appendChild(email_container_child_html)
    }

    document.addEventListener("DOMContentLoaded", function() {
        // Get the value from the URL parameter
        var labelParam = new URLSearchParams(window.location.search).get("label");

        // Set the selected option based on the parameter
        if (labelParam !== null) {
            document.getElementById("labelSelect").value = labelParam;
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        const params = new URLSearchParams(window.location.search);
        const hashValue = params.get('hash');
        const screenshotsInput = document.getElementById('screenshots');
        
        if (hashValue) {
            // Hide the upload container
            document.getElementById('screenshot-upload-container').style.display = 'none';
            
            // Remove required attribute from screenshots input when we have a hash
            screenshotsInput.removeAttribute('required');
            
            // Create and show the hash image
            const container = document.getElementById('screenshot-hash-container');
            container.innerHTML = `
                <img src="{{ MEDIA_URL }}uploads/${hashValue}.png" class="img-responsive img-thumbnail screenshot-hash" width="100%" height="100%" alt="screenshot">
                <input type="hidden" required class="required" name="screenshot-hash" value="${hashValue}">
            `;
        } else {
            // Hide the hash container
            document.getElementById('screenshot-hash-container').style.display = 'none';
            
            // Ensure screenshots input is required when there's no hash
            screenshotsInput.setAttribute('required', '');
        }
    });

    document.addEventListener('DOMContentLoaded', function() {
        // Target the screenshot container for paste events
        const screenshotContainer = document.getElementById('screenshot-container');
        if (screenshotContainer) {
            screenshotContainer.addEventListener('paste', function (e) {
                var items = (e.clipboardData || e.originalEvent.clipboardData).items;
                for (var index in items) {
                    var item = items[index];
                    if (item.kind === 'file') {
                        var blob = item.getAsFile();
                        var reader = new FileReader();
                        reader.onload = function(event){
                            var img = new Image();
                            img.src = event.target.result;

                            var file = new File([blob], "pasted-image.png", {type: blob.type});

                            var dt = new DataTransfer();
                            var file_input = document.getElementById('screenshots');

                            // Add the existing files to the DataTransfer
                            if (file_input) {
                                for (var i = 0; i < file_input.files.length; i++) {
                                    dt.items.add(file_input.files[i]);
                                }

                                // Add the new file to the DataTransfer
                                dt.items.add(file);

                                // Replace the file input's FileList with the new one
                                file_input.files = dt.files;
                                file_input.dispatchEvent(new Event('change'));
                            }
                        };
                        reader.readAsDataURL(blob);
                    }
                }
            });
        }
    });

    function fillUrl(domain) {
        const urlInput = document.getElementById('url');
        if (!domain.startsWith('http')) {
            domain = 'https://' + domain;
        }
        urlInput.value = domain;
    }

    // Remove the old domain click handler and use this one
    document.addEventListener('DOMContentLoaded', function() {
        const domainButtons = document.querySelectorAll('[onclick^="fillUrl"]');
        domainButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.preventDefault();
                const domain = this.querySelector('span').textContent.trim();
                fillUrl(domain);
            });
        });
    });
    </script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script type="text/javascript">
    function insertMarkdown(type) {
        const editor = document.getElementById('markdownInput');
        const start = editor.selectionStart;
        const end = editor.selectionEnd;
        const selectedText = editor.value.substring(start, end);
        let insertion = '';

        switch(type) {
            case 'bold':
                insertion = selectedText ? `**${selectedText}**` : '**bold text**';
                break;
            case 'italic':
                insertion = selectedText ? `*${selectedText}*` : '*italic text*';
                break;
            case 'image':
                insertion = '![image description](image url)';
                break;
            case 'link':
                insertion = selectedText ? `[${selectedText}](url)` : '[link text](url)';
                break;
        }

        editor.focus();
        document.execCommand('insertText', false, insertion);

        // For browsers that don't support execCommand
        if (!document.execCommand) {
            const before = editor.value.substring(0, start);
            const after = editor.value.substring(end);
            editor.value = before + insertion + after;
        }

        // Update cursor position
        const newCursorPos = start + insertion.length;
        editor.setSelectionRange(newCursorPos, newCursorPos);
    }

    function togglePreview() {
        const editor = document.getElementById('markdownInput');
        const preview = document.getElementById('preview-area');
        const previewBtn = document.querySelector('button:contains("Preview")');

        if (preview.classList.contains('hidden')) {
            // Show preview
            preview.innerHTML = marked.parse(editor.value);
            preview.classList.remove('hidden');
            editor.classList.add('hidden');
            previewBtn.textContent = 'Edit';
        } else {
            // Show editor
            preview.classList.add('hidden');
            editor.classList.remove('hidden');
            previewBtn.textContent = 'Preview';
        }
    }
    marked.setOptions({
        sanitize: true,
        breaks: true
    });


    </script>
{% endblock after_js %}