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

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

  <body>

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

    <main>
      <div class="container">
        <form
          class="d-flex flex-column align-items-center"
          method="POST"
          action="/dictionary"
        >
          <input
            class="mt-2 border blue-border rounded-pill border-2 text-center"
            placeholder="Enter word..."
            type="text"
            name="word"
            id="input-text"
            required
          />
          <input
            class="mt-2 border blue-border rounded-pill border-2 text-light fw-bold"
            type="submit"
            id="input-submit"
          />
        </form>
        <% if (wordData.code == "404") { %>
          <h1 class="text-center fw-bold mb-0"><%= wordData.title %></h1>
        <% } else { %>
          <div class="block blue-border rounded-4 border-2 border mt-2 p-3">
            <h1 class="text-center fw-bold mb-0">"<%= wordData.word %>"</h1>
            <% if (wordData.phonetic) { %>
              <h5 class="text-center mt-0">(<%= wordData.phonetic %>)</h5>
            <% } %>
            <h3 class="mt-3"><span class="fw-bold">Part of Speech: </span><%= wordData.partOfSpeech %></h3>
            <h3 class="mt-3"><span class="fw-bold">Definition: </span><%= wordData.definition %></h3>
          </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>
