<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>MyFuel</title>
    <meta name='viewport' content='width=device-width,initial-scale=1,initial-scale=1,user-scalable=no' /> <!-- for map -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/stylesheets/navbar.css">
    <link rel="stylesheet" href="/stylesheets/main.css">
    <link rel="stylesheet" href="/stylesheets/landing.css">
    <link rel="stylesheet" href="/stylesheets/footer.css">
    <link rel="stylesheet" href="/stylesheets/progress.css">
    <link href="https://fonts.googleapis.com/css?family=Kalam:400" rel="stylesheet">
    <link rel="icon" href="/img/MyFuel_icon.svg">
  </head>

  <body>
  <nav id="fullNav" class="navbar navbar-expand-custom navbar-dark bg-dark mb-4">
        <a class="navbar-brand" href="/"><i class="fas fa-hand-holding-usd"></i>&nbsp;<span style="font-family: 'Kalam'">MyFuel</span></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <% if(currentUser && currentUser.isAdmin){ %>
            <li class="nav-item <%= typeof page !== 'undefined' && page === 'users' ? 'active' : '' %>">
              <a href="/users" class="nav-link"><i class="fa fa-users"></i>&nbsp;Χρήστες</a>
            </li>
            <% } %>
            <li class="nav-item <%= typeof page !== 'undefined' && page === 'stores' ? 'active' : '' %>">
              <a href="/stores" class="nav-link"><i class="fa fa-gas-pump"></i>&nbsp;Πρατήρια</a>
            </li>
            <% if(currentUser && !currentUser.isBlocked && currentUser.type=="user") { %>
            <li class="nav-item <%= typeof page !== 'undefined' && page === 'new' ? 'active' : '' %>">
              <a href="/posts/new" class="nav-link"><i class="fa fa-plus"></i>&nbsp;Προσθήκη</a>
            </li>
            <% } %>
            <% if(currentUser && !currentUser.isBlocked && currentUser.type=="user") { %>
              <li class="nav-item <%= typeof page !== 'undefined' && page === 'new' ? 'active' : '' %>">
                <a href="/statistics" class="nav-link"><i class="fas fa-chart-line m-auto"></i>&nbsp;Στατιστικά</a>
              </li>
            <% } %>
          </ul>
          <ul id="rightNav" class="navbar-nav">
              <% if(!currentUser){ %>
                <li class="nav-item <%= typeof page !== 'undefined' && page === 'register' ? 'active' : '' %>">
                  <a href="/register" class="nav-link"><i class="fas fa-user-plus"></i>&nbsp;Εγγραφή</a>
                </li>
                  <li class="nav-item <%= typeof page !== 'undefined' && page === 'login' ? 'active' : '' %>">
                    <a href="/login" class="nav-link"><i class="fas fa-sign-in-alt"></i>&nbsp;Είσοδος</a>
                  </li>
              <% } else { %>
                  <li class="nav-item">
                    <% if(currentUser.type=="user") { %>
                      <% if(!currentUser.avatar) { %>
                        <img class="card-img-top small-avatar" style="border-radius: 50%" src="/img/defaultAvatar.png">
                      <% } else { %>
                        <img class="card-img-top small-avatar" style="border-radius: 50%" src="<%= currentUser.avatar  %>">
                      <% } %>
                      <a style="display: inline-block" href="/users/<%= currentUser._id %>" class="nav-link"> <%= currentUser.username %></a>
                  <% } else { %>
                    <a style="display: inline-block" href="/stores/<%= currentUser._id %>" class="nav-link"><%= currentUser.username %></a>
                  <% } %>
                  </li>
                  <li class="nav-item">
                    <a href="/logout" class="nav-link"><i class="fas fa-sign-out-alt"></i>&nbsp;Έξοδος</a>
                  </li>
              <% } %>
          </ul>
        </div>
  </nav>


<div style="position: absolute; top: 0px; z-index: 10; width: 100%">
  <div class="container">
    <% if(error && error.length > 0){ %> <!-- if when error is empty, it's still an empty array, which is "truthy"-->
      <div class="alert alert-danger" role="alert">
        <i class="fas fa-exclamation"></i>
        <span class="sr-only">Error:</span><%= error %><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
    <% } %>
    <% if(success && success.length > 0){ %>
      <div class="alert alert-success" role="alert">
        <i class="fas fa-check"></i>
        <span class="sr-only">Success:</span><%= success %><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button></div>
    <% } %>
  </div>
</div>


  <script type="text/javascript">
  $(window).on("load",function(){
    $(".alert-success").delay(2000).fadeOut("swing",function(){
      $(this).remove();
    });
  });

  $(document).click(function (event) {
    $(".alert").hide();
  });
  </script>

  <script type="text/javascript">
    $(document).ready(function($){

    $("form").submit(function() {
    $(this).find(":input").filter(function(){ return !this.value; }).attr("disabled", "disabled");
    return true; // ensure form still submits
    });

    $( "form" ).find( ":input" ).prop( "disabled", false );
  });
  </script>
