<!DOCTYPE html>
<html>
    <head>
        <meta lang="de"/>
        <meta charset="utf-8"/>
        <meta name="viewport" content="device=device-width, initial-scaling=1"/>
        <link rel="Stylesheet" type="text/css" href="style.css"/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>Candle Bibliothek | Erweiterte Suche</title>
        <link rel="icon" href="pictures/candle.png">
        <script src="notwendiges_laden.js" defer></script>
    </head>
    <body>
        <header id="header">
           <h1 class="kopf" >
               <br><br>
               Bibliothek
               <a href="index.php" id="bildID">
                   <img id="CandleID" src="pictures/candle.png"
                        alt="Bild von einer Kerze" width="200" height="192"/></a>
               <br><br>
               Candle
           </h1>
           <div>
               <a id="uberuns" href="uberuns.php">Über Uns</a>
               <a id="buecher" href="buecher.php">Bücher</a>
               <a id="meinebuecher" href="anmelden_meinebuecher.php">
                   Meine Bücher</a>
               <?php
               session_start();
               if(isset($_SESSION["eingeloggt"])  && $_SESSION["eingeloggt"] == 1 ){
                echo "<a id='abmelden' href='abmelden.php'>Abmelden</a>";}
               ?>
               <form action="suchergebnisse.php">
                   <input type="hidden" name="searchType" value="simple">
                   <input name="searchFor" class="suchleiste" type="search"
                          placeholder="Suche...">
                   <button type="submit" id="buttonID" class="searchButton">
                       <i class="fa fa-search"></i>
                   </button>
               </form>
               <a id="erweitertesuche" href="erweitertesuche.html">
                   Erweiterte Suche</a>
               <a href="anmelden.php" id="warenKorbID">
                   <img id="shoppingCard" src="pictures/einkaufswagen.png"
                        alt="Bild von einem Wagen" width="50" height="50"/>
               </a>
           </div>
       </header>
        
        <div class="hauptcontainer">
            <span id="titelerweitertesuche" > Erweiterte Suche </span> <br><br>
            <form action="suchergebnisse.php" method="get">

                <input type="hidden" name="searchType" value="extended">

                <select id="dropdown1" name="dropdown1" class="buchtitel">
                    <option selected="selected">Titel</option>
                    <option>Autor</option>
                    <option>Verlag</option>
                    <option>Stichwort</option>
                    <option>Kategorie</option>
                </select>
                <input type="search" name="search1" class="buchtiteloptions">

                <select id="and_or" name="and_or1" class="und-wort1">
                    <option>und</option>
                    <option>oder</option>
                </select>
                <select id="dropdown2" name="dropdown2" class="autor">
                    <option>Titel</option>
                    <option selected="selected">Autor</option>
                    <option>Verlag</option>
                    <option>Stichwort</option>
                    <option>Kategorie</option>
                </select>
                <input type="search" name="search2" class="autoroptions">
                
                <select id="and_or" name="and_or2" class="und-wort2">
                    <option>und</option>
                    <option>oder</option>
                </select>
                <select id="dropdown3" name="dropdown3" class="stichwort">
                    <option>Titel</option>
                    <option>Autor</option>
                    <option>Verlag</option>
                    <option selected="selected">Stichwort</option>
                    <option>Kategorie</option>
                </select>                
                <input type="search" name="search3" class="stichwörteroptions">

                <span id="weiteresuchkriterien" style> 
                    Weitere Suchkriterien</span><br><br></p>
                <span class="jahrvon">Jahr von </span> 
                <input type="date" class="anfangsdatum" name="Buchdatum1">
                <span class="bis">bis </span>
                <input type="date" class="endsdatum" name="Buchdatum2">
                <span class="sprache">Sprache </span> 
                <select id="language" name="language" class="spracheingabe">
                    <option>Alle Sprachen</option>
                    <option>Deutsch</option>
                    <option>Englisch</option>
                    <option>Französisch</option>
                    <option>Arabisch</option>
                </select>   
                <span class="verfügbarkeit">Verfügbarkeit</span>
                <input type="checkbox" class="checkbox" 
                    name="status" value="verfügbareBücher"> 
                <span class="kommentar">verfügbare Bücher</span>
        
                <input type="submit" id="suchen" value="Suchen">
                <a id="suchfelderleeren" href="">Suchfelder leeren</a>
            </form>
        </div>
            
    <!------------------------------------------------------------------------->

    <!--Link JS file-->
    <script src="burgerIcon.js"></script>
    <!--If it was small and got big, 
        it calls the function only one time and doesn't do it all the time-->
    <script>
        var widthissue = false;
        window.addEventListener("resize", function(event) {
            if(window.innerWidth > 800 && widthissue) {
                widthissue = false
                unset()
            } 
            else if(window.innerWidth < 800) widthissue = true;
        })
    </script>
   
    <nav id="activeid" class="active"></nav>
   
    <footer id="footer" class="fuss" ></footer>
    
    </body>
</html>