<!DOCTYPE html>

<html>

<head>
  <title>o-search</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--Import Google Icon Font-->
  <link href="/static/css/material-icons.css" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="/static/css/materialize.min.css" media="screen,projection" />
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <style>
    .small { 
      font-size: x-small;
    }

    </style>
    <script type="text/javascript" src="/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
    $( document ).ready(function() {   
      $('.tooltipped').tooltip();
      $('.fixed-action-btn').floatingActionButton({direction: 'bottom'});
      $("#local").click( function()
        {
          query = $("#search").val()
          if (query) {
            window.location="/search?q="+encodeURIComponent($("#search").val());
          }
        }
      );
    });
    </script>
</head>

<body>

  {{ template "floating_menu.tpl" . }}    
 
    <div class="row">
      <div class="center-align">
       <img src="/static/img/O-cloud.svg" width="20%" height="auto"/>
      </div>
      <div class="input-field col s6 offset-s3">
        <i class="material-icons prefix">search</i>
        <input id="search" type="text" class="autocomplete">   
      </div>
    </div>
    <div  class="row">
      <div class="center-align">
       <button class="btn waves-effect tooltipped waves-light btn-small" data-position="bottom" data-tooltip="Search in my local datacenter" id="local" name="local">Local Search<i class="material-icons left">home</i>
        </button>

       <button class="btn waves-effect tooltipped waves-light btn-small" data-position="bottom" data-tooltip="Distributed search in my partners network" id="network" name="network">Network Search<i class="material-icons left">public</i>
        </button>      
      </div>
    </div> 
            
  <script type="text/javascript" src="/static/js/materialize.min.js"></script>

</body>

</html>