<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Search | Infenion AI Challenge</title>
    <link rel="icon" type="image/ico" href="icons/loupe.svg">
    <link rel="stylesheet" href="static/search.css">
    <script src="static/search_script.js"></script>
</head>
<body>
    <!-- front_body starts -->
    <div class="front_body">
        <div class="navbar_holder">
            <nav class="navbar">
                <ul class="navbar_list">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="#" class="active">Search</a></li>
                    <li><a href="upload.html">Upload</a></li>
                </ul>
            </nav>
        </div>
        
        <div class="search_box_holder">
            <div class="search_container">
            <!--    <select name="file_types" id="type_selector" class="type_selector">                    
                    <option value=".txt" onclick="txt_border_bottom()">txt</option>
                    <option value=".pdf" onclick="pdf_border_bottom()">pdf</option>
                    <option value=".doc" onclick="doc_border_bottom()">doc</option>
                    <option value=".ppt" onclick="ppt_border_bottom()">ppt</option>      
                </select>
            -->
                
                <input type="text" class="search_box" id="search_box" placeholder="Enter text to search..."> <!-- <input class="search_submit" type="submit" value="">  -->
            </div>
        </div>
        <br>
        <div class="other_search_holder">
            
            <p class="or_container">- or -</p>
            
            <div class="search_by_tag_container">
                <p>Search by tags </p>
                <input type="text" placeholder="Eg. Education" class="tag_search_bar">
            </div>
            <p class="or_container">- or -</p>
            <div class="tags_container">
                <p>Select tags</p>
                <ul>
                    <li>
                        <div class="tag_holder">
                            Education
                        </div>
                    </li>
                    <li>
                        <div class="tag_holder">
                            Technology
                        </div>
                    </li>
                    <li>
                        <div class="tag_holder">
                            Australian forest fire
                        </div>
                    </li>
                    <li>
                        <div class="tag_holder">
                            Pulwama
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="submit_button_container">
            <button class="submit_button" type="submit">Search</button>
        </div>
    </div>
    <!-- front-body ends -->
    <br><br><br>
    <!-- output starts -->
    <div class="output_holder">
        <div class="output">
            <div class="text">
                <div class="heading">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit alias corrupti nulla eius similique officiis inventore autem fuga doloribus. Recusandae!
                </div>
                <div class="original_text">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum beatae, porro nihil vitae quam corrupti odio vel at error enim.
                </div>
                <div class="tags">
                    Tags: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, similique.
                </div>
            </div>
            <div class="summary">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Et nihil hic, quisquam suscipit repellat incidunt saepe ullam distinctio aspernatur id tempore consequatur ratione amet, delectus assumenda temporibus eaque! Molestiae ipsum cumque itaque placeat expedita excepturi?
            </div>
        </div>
    </div>
    <div class="output_holder">
        <div class="output">
            <div class="text">
                <div class="heading">
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. A libero labore repellendus est obcaecati explicabo?
                </div>
                <div class="original_text">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eaque error expedita, mollitia perspiciatis iste deleniti iusto quas dicta eligendi dolorum amet. Quas, vitae vero! Nisi.
                </div>
                <div class="tags">
                    Tags: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, similique.
                </div>
            </div>
            <div class="summary">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perspiciatis sunt ullam in numquam molestias quis voluptate necessitatibus aperiam laborum facilis, cum ab excepturi eveniet illum distinctio ipsa totam, itaque tempora? Deserunt voluptates, repellat similique consequatur perspiciatis esse hic quis vel veniam laboriosam officia tempora voluptatibus quod dolorum nam ducimus possimus.
            </div>
        </div>
    </div>
    <div class="output_holder">
        <div class="output">
            <div class="text">
                <div class="heading">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus iusto tempore dicta eaque nam, rem praesentium laborum in, autem sequi alias eius deserunt tenetur vero repellat numquam! Eveniet laboriosam possimus aspernatur dignissimos quo dicta velit iste qui ipsam amet vitae tenetur illo in, minus obcaecati eos provident? Vitae quo commodi animi dolor voluptatum iure doloremque molestias odit, neque sint impedit quasi. Quis beatae commodi ratione ea impedit quisquam provident culpa pariatur dignissimos odio vel, nemo debitis excepturi repellat distinctio corporis?
                </div>
                <div class="original_text">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quo reiciendis, deleniti omnis tenetur eligendi culpa vitae magnam consequatur exercitationem consectetur accusantium saepe. Et, est reprehenderit veniam sed officiis, voluptas error maxime nemo dolorem non incidunt saepe unde numquam earum veritatis odio, culpa illo laboriosam quia fugit consequuntur ullam. Nobis ea mollitia aliquid illum illo, adipisci architecto amet quaerat sapiente temporibus voluptatibus cumque eaque numquam sequi!
                </div>
                <div class="tags">
                    Tags: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, similique.
                </div>
                
            </div>
            <div class="summary">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum voluptatem consequuntur sapiente eum! Totam ratione officiis adipisci cumque? Explicabo voluptates asperiores minus aut! Necessitatibus, perferendis sint veniam non a maiores hic dolorem sapiente. Culpa ad asperiores atque voluptatibus quasi a hic! Eveniet praesentium necessitatibus voluptatibus mollitia magni consequuntur minus dolores consequatur, facilis corporis ipsa quo nobis dolorum error nisi? Delectus inventore nam animi optio, magni facere cum, quos hic quis corporis esse consequatur fugiat itaque vero voluptates, nemo accusamus molestias architecto corrupti et nostrum mollitia maiores quas quibusdam. Amet quam aut veritatis, quaerat magni at ipsa temporibus exercitationem. Laboriosam rerum error, perspiciatis reiciendis amet nobis minus sed fugiat molestias reprehenderit consequuntur, explicabo ipsum possimus, officia suscipit placeat tenetur saepe totam quas nam ullam debitis! Cupiditate quia soluta perspiciatis esse voluptatibus fugit veritatis optio mollitia nulla praesentium. Ab est nostrum ipsam! Temporibus suscipit enim facilis minima minus, debitis dolorum labore sed.
            </div>
        </div>
    </div>
    <div class="output_holder">
        <div class="output">
            <div class="text">
                <div class="heading">
                    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aliquid nesciunt aliquam expedita omnis sed! Vel?
                </div>
                <div class="original_text">
                    Lorem ipsum dolor sit amet.
                </div>
                <div class="tags">
                    Tags: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, similique.
                </div>
            </div>
            <div class="summary">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur totam, nam rerum odio nulla temporibus.
            </div>
        </div>
    </div>
    <br><br><br><br>
    <!-- output ends -->
</body>
</html>