<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="row">
      <div class="col-3"></div>
      <div class="col-6 mt-2">
        <div class="card">
          <div class="card">
            <div class="card-header">
              <div class="text-center">
                <h1><%= item.name %></h1>
              </div>
            </div>
            <div class="card-body">
              <h2>Price : <%= item.price %></h2>
            </div>
            <div class="card-footer row">
              <div class="text-center col">
                <a href="/" class="btn btn-primary">Home</a>
              </div>
              <div class="text-center col">
                <a href="/product/<%= item.id %>/edit" class="btn btn-success"
                  >Edit</a
                >
              </div>

              <form
                action="/product/<%= item.id %>?_method=DELETE"
                method="post"
                class="text-center col"
              >
                <button class="btn btn-danger">Delete</button>
              </form>
              <div class="text-center col">
                <a href="/product" class="btn btn-dark">Back</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-3"></div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
