<!DOCTYPE html>
<html lang="en">

  <%- include('partials/head') %>
  
  <body class="mb-5 pb-3">

    <%- include('partials/header') %>

    <main class="mb-4 mb-lg-1 mb-md-1 mb-sm-1">
      <div class="container">
        <h1 class="text-center mt-2">Random Cat Facts and Photos Generator</h1>
        <form
          class="d-flex flex-column align-items-center"
          method="POST"
          action="/cats"
        >
          <input
            class="mt-2 border blue-border rounded-pill border-2 text-light fw-bold"
            type="submit"
            id="input-submit"
            value="Generate"
          />
          <label for="#breed"
            ><input
              class="mt-2"
              type="checkbox"
              name="breed"
              id="breed"
              value="1"
              <%= checked %>
            />
            Purebred</label
          >
        </form>
        <div
          class="block-large border-2 blue-border rounded-2 border d-flex justify-content-between align-items-center flex-column mt-3 p-4"
        >
          <img
            class="mw-100 w-auto border-2 blue-border rounded-2 border"
            height="300px"
            src="<%= image %>"
            alt="Cat Photo"
          />
          <h5 class="fw-bold"><%= fact %></h5>
        </div>
      </div>
    </main>

    <%- include('partials/footer') %>

    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>
