<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" type="image/png" href="{{ url_for('static', filename='favicon.png')}}">
        <link href="{{ url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
        <script src="{{ url_for('static', filename='js/jquery.js')}}"></script>
        <script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script>
        <title>PeARS - {{name}}</title>
    </head>

    <body style="background-image: url('/static/background.png'); background-color:#000000; background-size:100%; background-repeat:no-repeat; background-position:fixed; top:0; left:0;">
    <nav class="navbar navbar-default" style="background-color: #000000;">
    <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div style="padding-left:20px">
          <a href="{{url_for('.index')}}"><img src="/static/pears-logo-small-inverse.png" height="80px"></a>
          </div>
        </div>
        <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav">
        <li><a href="{{url_for('pages.return_about')}}">About</a></li>
        </ul>
        </div>
    </div>
    </nav>

    <div class="container">

        <div  class="row">
            <div class="col-md-10">
            <br><br>
            <form class="mx-sm-10" action="{{url_for('.index')}}">
                <div class="input-group" style="width:100%; height:40px; text-align:left; margin:0 auto;">
                <input class="form-control input-lg" title="Enter your Search Query." placeholder="Enter your Search Query" type="text" name='q'>
                <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit">Search</button></span>
                </div>
            </form>
            <br>
            <div style="background-color:#ffffff; padding-left:30px; padding-top:10px; padding-right:30px;  border-radius:5px">
            <br><br>
               {% for result in results %}
                   <div>
                   <h3><a href="{{result[0]}}">{{result[1]}}</a>
                   {% if result[3] == True %}<img src="{{ url_for('static', filename='cc.png')}}" width='24px'/>{% endif %} </h3>
                   {{result[2]}} ... <!-- <a href="{{result[3]}}">Cache</a>--> <br>
                   <a href="{{result[0]}}">{{result[0]}}</a>
                   <hr>
                   </div>
               {% endfor %}
            </div>
            
        <div class="container">
            <div style="background-color: #fff; position:fixed; right:4px; bottom:4px; border-radius:3px; padding: 3px" class="btn btn-lg" data-toggle="popover" title="<b>Background image</b>" data-content="<a href='https://www.flickr.com/photos/alanandanders/3975295765/'>tolmer</a> by <br>Flickr user Alan Lam - <a href='https://creativecommons.org/licenses/by-nd/2.0/'>CC-BY-ND 2.0</a>" data-placement="top" data-html="true">
                <img src="/static/camera_lens.png" width="30px"/><b> Credit</b>
            </button>
        </div>
        <script>
        $(document).ready(function(){
        $('[data-toggle="popover"]').popover({container: 'body'});   
        });
        </script>

       </div>
    </div>
    </body>
</html>
