

<ul class="right hide-on-med-and-down">
<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 8%;">
      <span class="tooltiptext">{{_("My Account")}}</span>
     <a href="{{ url_for('core.accountManage') }}" class="btn-floating btn-large  {{ buttonColor }}">
      <i class="large fa fa-user  " aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 13%;">
<span class="tooltiptext">{{_("Options")}}</span>
    <a href="{{ url_for('core.options') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large fa fa-cogs" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 24%;">
<span class="tooltiptext">{{_("Help")}}</span>
    <a href="{{ url_for('core.help') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large fa fa-question-circle" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 29%;">
  <span class="tooltiptext">{{_("News")}}</span>
    <a href="{{ url_for('core.info') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large fa fa-info" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 34%;">
  <span class="tooltiptext">{{_("Map")}}</span>
    <a href="{{ url_for('core.map') }}" class="btn-floating btn-large {{ buttonColor }}" >
      <i class="large material-icons">navigation</i>
    </a>

</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 62%;">
<span class="tooltiptext">{{_("Tasks")}}</span>
    <a href="{{ url_for('core.task') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large fa fa-tasks" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 67%;">
<span class="tooltiptext">{{_("Weather")}}</span>
    <a href="{{ url_for('core.weather') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large fa fa-tint" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 72%;">
<span class="tooltiptext">{{_("Calendar")}}</span>
    <a href="{{ url_for('core.calendar') }}" class="btn-floating btn-large {{ buttonColor }}" >
      <i class="large fa fa-calendar-o" aria-hidden="true"></i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 83%;">
<span class="tooltiptext">{{_("Store")}}</span>
    <a href="{{ url_for('core.store') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large material-icons">store</i>
    </a>
</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 88%;">
<span class="tooltiptext">{{_("Utilities")}}</span>
       <a href="{{ url_for('core.utilities') }}" class="btn-floating btn-large {{ buttonColor }}" >
      <i class="large fa fa-wrench" aria-hidden="true"></i>
    </a>

</div>

<div class="fixed-action-btn tooltip" style="height: 50px; top: 70px; right: 93%;">
<span class="tooltiptext">{{_("My App")}}</span>
    <a href="{{ url_for('core.app') }}" class="btn-floating btn-large {{ buttonColor }}">
      <i class="large material-icons">widgets</i>
    </a>
 </div>


 <div class="fixed-action-btn" style="bottom: 100px; right: 3%;">
    <a href="" class="button-collapse" data-activates="slide-out"><img class="circle" src="{{ urlAvatar }}"></a>
  </div>
  
</ul>
<ul id="nav-mobile" class="side-nav">
<li><a href="{{url_for('core.app')}}">{{_("My App")}}</a></li>
<li><a href="{{url_for('core.utilities')}}">{{_("Utilities")}}</a></li>
<li><a href="{{ url_for('core.map') }}">{{_("Map")}}</a></li>
<li><a href="{{ url_for('core.calendar') }}">{{_("Calendar")}}</a></li>
<li><a href="{{ url_for('core.task') }}">{{_("Tasks")}}</a></li>
<li><a href="{{ url_for('core.weather') }}">{{_("Weather")}}</a></li>
<li><a href="{{ url_for('core.info') }}">{{_("News")}}</a></li>
<li><a href="{{ url_for('core.store') }}">{{_("Store")}}</a></li>
<li><a href="{{ url_for('core.help') }}">{{_("Help")}}</a></li>
<li><a href="{{ url_for('core.options') }}">{{_("Options")}}</a></li>
 <li><a href="{{ url_for('core.accountManage') }}">{{_("My Account")}}</a></li>
<li><a href="{{ url_for('core.logout') }}">{{_("Log Out")}}</a></li>

                </ul>
                <div class="fixed-action-btn" style="height: 50px; top: 70px; right: 3%;">
                  <a href="" data-activates="nav-mobile" class=" button-collapse btn-floating btn-large {{ buttonColor }}">
                    <i class="large material-icons">reorder</i>
                  </a>
                </div>
                
            </div>
        </div>
    </nav>
</div>

<div class="main">   
        <a href="{{ url_for('core.index') }}">
        <img   style="max-width: 100%; height:250px; " class="responsive-img" src="{{ url_for('static', filename='images/logo.png') }}" alt="LOGO"/>
        </a>  
</div>


 


 <ul id="slide-out" class="side-nav">
    <li> <div class="userView">
      <img src="{{ url_for('static', filename='images/nav.png') }}" alt="" class="background">
      <a href="{{ url_for('core.accountManage') }}"><img class="circle" src="{{ urlAvatar }}"></a>
      <span class="white-text name">{{ currentUser }}</span>
      <span class="white-text email">{{ currentEmail }}</span>
    </div></li>
    <li><a href="{{ url_for('core.accountManage') }}">{{_("My Account")}}</a></li>
    <li><div class="divider"></div></li>
    <li><a href="{{ url_for('core.logout') }}">{{_("Log Out")}}</a></li>

  </ul>






<div class="row">
<div class="container">
    <div id="search">
    <form method=post action="{{ url_for('core.action') }}">
        <input id="searchInput" class="autocomplete" type="search" ng-model="vm.text" ng-keypress="$event.keyCode == 13 && vm.classify(vm.text)"  name="action" placeholder="{{_('What I can do for you ?')}}"  />
    </form>

    <p id="searchResult" ng-model="vm.answer"></p>
    </div>
</div>

</div>
<script type="text/javascript">

  $( function() {
    var action = {{ g.action | tojson }};
    var tab = [];
    for (var key in action)
    {
        tab.push(key);
    }   
    $( ".autocomplete" ).autocomplete({
      source: tab
    });
  } );


</script>



<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">$('.button-collapse').sideNav();</script>