<%- include('top') %>

<section>
  <h1>Contact Me</h1>
  <p>If you have questions about any of the blog posts, feel free to reach out.</p>

  <% if (typeof successMessage !== 'undefined' && successMessage) { %>
    <div class="alert success"><%= successMessage %></div>
  <% } %>

  <% if (errors && errors.general) { %>
    <div class="alert error"><%= errors.general %></div>
  <% } %>

  <form id="contactForm" action="/contact" method="post" novalidate aria-describedby="contactHelp">
    <p id="contactHelp">All fields are required. Use the Tab key to move between fields.</p>

    <div class="form-group">
      <label for="firstName">First Name</label>
      <input
        type="text"
        id="firstName"
        name="firstName"
        value="<%= formData.firstName || '' %>"
        aria-required="true"
        aria-invalid="<%= errors.firstName ? 'true' : 'false' %>"
      />
      <% if (errors.firstName) { %>
        <span class="error-message" role="alert"><%= errors.firstName %></span>
      <% } %>
    </div>

    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input
        type="text"
        id="lastName"
        name="lastName"
        value="<%= formData.lastName || '' %>"
        aria-required="true"
        aria-invalid="<%= errors.lastName ? 'true' : 'false' %>"
      />
      <% if (errors.lastName) { %>
        <span class="error-message" role="alert"><%= errors.lastName %></span>
      <% } %>
    </div>

    <div class="form-group">
      <label for="email">Email</label>
      <input
        type="email"
        id="email"
        name="email"
        value="<%= formData.email || '' %>"
        aria-required="true"
        aria-invalid="<%= errors.email ? 'true' : 'false' %>"
      />
      <% if (errors.email) { %>
        <span class="error-message" role="alert"><%= errors.email %></span>
      <% } %>
    </div>

    <div class="form-group">
      <label for="comments">Comments</label>
      <textarea
        id="comments"
        name="comments"
        rows="5"
        aria-required="true"
        aria-invalid="<%= errors.comments ? 'true' : 'false' %>"
      ><%= formData.comments || '' %></textarea>
      <% if (errors.comments) { %>
        <span class="error-message" role="alert"><%= errors.comments %></span>
      <% } %>
    </div>

    <button type="submit" class="btn">
      <i class="fa-solid fa-paper-plane"></i> Send Message
    </button>
  </form>
</section>

<%- include('bottom') %>
