<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <title>miniURL - a TinyApp</title>
</head>

<body>
  <% include ./_header %>
  <style>
   b {
     color: seagreen;
   }
  </style>
  <div class="card text-center">
      <div class="card-header"></div>
      <div class="card-body">
        <h5 class="card-text"><b>Short URL: </b><a href="/u/<%= url.shortURL %>"><%= url.shortURL %></a></h5>
        <p class="card-title"><b>For: </b><i><%= url.longURL %></i></p>
        <p class="card-text"><b>Number of visits:</b> <%= url.visits %> visits</p>
        <p class="card-text"><b>Last updated:</b> <%= new Date(url.lastUpdated) %> </p>
      </div>
    <div class="card-footer text-muted">
      <div class="card-body">
          <h1 class="card-title">Edit</h1>
          <p class="card-text">
            <form class="bodyForm" action="/urls/<%= url.shortURL %>/update" method="POST">
              <div class="input-group mb-3">
                <div class="input-group-prepend">
                  <label for="longURL" class="input-group-text" id="inputGroup-sizing-default">New URL:</label>
                </div>
                <input name="longURL" type="text" class="" placeholder="&emsp;https://www...   " />
                <div class="input-group-append">
                    <button class="btn btn-primary">Update</button>
                </div>
              </div>
            </form>
          </p>
      </div>
    </div>
  </div>
  <!-- Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>