<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Report Incident</title>
    <link rel="apple-touch-icon" sizes="180x180" href="../../Assets/favicon_io/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="../../Assets/favicon_io/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="../../Assets/favicon_io/favicon-16x16.png">
    <link rel="manifest" href="../../Assets/favicon_io/site.webmanifest">
    <link rel="stylesheet" href="../../Components/Loader/Loader.css">
    <script src="../../Components/Loader/Loader.js"></script>
    <link rel="stylesheet" href="./ReportIncident.css">
    <link rel="stylesheet" href="../../Components/Header/Header.css">
    <link rel="stylesheet" href="../../Components/Footer/Footer.css">
</head>
<body>
    <div id="loading-screen">
        <img src="../../Assets/logo/logo.png" alt="">  

        <div class="lds-ellipsis"><div></div><div></div><div></div></div>
    </div>
    <div id="content" class="main">
        <!-- Header -->
        <div id="header">

        </div>

        <div class="reportWrapper">
            <svg width="465" height="368" viewBox="0 0 465 368" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g filter="url(#filter0_f_1055_4117)">
                <ellipse cx="-14.5" cy="37" rx="285.5" ry="137" fill="#03ABEC" fill-opacity="0.35"/>
                <path d="M270.5 37C270.5 74.5292 238.783 108.652 187.163 133.423C135.579 158.176 64.2806 173.5 -14.5 173.5C-93.2806 173.5 -164.579 158.176 -216.163 133.423C-267.783 108.652 -299.5 74.5292 -299.5 37C-299.5 -0.529243 -267.783 -34.6524 -216.163 -59.4228C-164.579 -84.176 -93.2806 -99.5 -14.5 -99.5C64.2806 -99.5 135.579 -84.176 187.163 -59.4228C238.783 -34.6524 270.5 -0.529243 270.5 37Z" stroke="black"/>
                </g>
                <defs>
                <filter id="filter0_f_1055_4117" x="-494" y="-294" width="959" height="662" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
                <feGaussianBlur stdDeviation="97" result="effect1_foregroundBlur_1055_4117"/>
                </filter>
                </defs>
            </svg>
            <img src="../../Assets/images/Ellipse 21.png" alt="report-incident-image">
        </div>
        <!-- Report Incident Section -->
        <div class="reportIncidentSection">
            <div class="reportIncidentSectionContainer">
                <div class="reportIncidentLeft">
                    <h1>Report an incident</h1>
                    <p>Encountered a cybersecurity issue? Let us know, and our team will assist you immediately. Your report helps us protect and improve security for everyone.</p>

                    <div class="reportIncidentLeftBottom">
                        <h2>
                            WHAT YOU CAN EXPECT
                        </h2>
                        <ul>
                            <li>
                                <img src="../../Assets/icons/checkbox.png" alt="">
                                <p>Response to Your Questions</p>
                            </li>
                            <li>
                                <img src="../../Assets/icons/human.png" alt="">
                                <p>Expert guidance from dedicated security professionals</p>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="reportIncidentRight">
                    <form id="reportform">
                        <input type="text" id="name" placeholder="Name">
                        <input type="email" id="email" placeholder="Email">
                        <textarea name="" id="message" placeholder="Message"></textarea>
                        <button class="submitBtn" onclick="reportForm(event)" >Submit</button>
                    </form>
                </div>
            </div>
        </div>
        

        <!-- Footer -->
        <div id="footer">

        </div>
    </div>




    <!-- Script -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="./ReportIncident.js"></script>
    <script src="../../Components/Accordion/Accordion.js"></script>
</body>
</html>