<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="css/styles.css">
    <title>Darkroom</title>
</head>
<body style="background-color: #f4f4f4;">
  <div class="navbar-fixed">
    <nav class="turquoise" >
      <div class="nav-wrapper  container">
        <a href="/" class="brand-logo ">Darkroom</a>
        <form class="right">
          <div class="input-field ">
            <input id="search" class="left"  type="search" required>
            <label class="label-icon" for="search"><i class="material-icons right">search</i></label>
            <i class="material-icons">close</i>
          </div>
        </form>
        <!-- <ul class="right hide-on-med-and-down">
          <li><a href=""></a></li>
          <li><a href=""></a></li>
        </ul> -->
      </div>
    </nav>
  </div>
    
    <div class="container">
        <h1>Image Upload </h1>
        <%= typeof msg != 'undefined' ? msg : '' %>
        <form action="/upload" method = "POST" enctype="multipart/form-data">
            <div class="file-field input-field">
              <div class="btn grey">
                <span>Image</span>
                <input name = "image" type="file">
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text">
              </div>
            </div>
            <button type="submit" class="btn">Submit</button>
        </form>
        <hr>
        <br>
        
          <div class="row">
            <% images.forEach(function(image){ %>

              <div class="column">

                <a href="/image/<%= image._id %>"> <img src="<%= image.path %>" class="responsive-img" alt="<%= image.name %>"> </a>
              </div>
            <% }); %>  
          </div>
            
              
            
        <!-- <img src="<%= typeof file != 'undefined' ? file : '' %>" class="responsive-img" alt=""> -->
    </div>
    
    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
                