<div class="template-page template-page--contact">
  <div class="container">
    <div class="card">
      <div class="card-body">
        <h1 class="card-title fs-2">{{ page.title | escape }}</h1>
        <div class="card-text mb-3">{{ page.content }}</div>

        <div class="card">
          <div class="container pt-2 pb-3">
            {% form 'contact' %}
              {% render 'form-message' form: form %}

              <div class="mb-3">
                <label class="form-label" for="contact-name">Name</label>
                <input type="text" id="contact-name" class="form-control" name="contact[Name]" value="{% if customer.name %}{{ customer.name }}{% endif %}">
              </div>

              <div class="mb-3">
                <label class="form-label" for="contact-email">Email</label>
                <input type="email" id="contact-email" class="form-control" name="contact[email]" value="{% if customer.email %}{{ customer.email }}{% endif %}">
              </div>

              <div class="mb-3">
                <label class="form-label" for="contact-phone">Phone</label>
                <input type="tel" id="contact-phone" class="form-control" name="contact[Phone]" pattern="[0-9\-\+]*" value="{% if customer.phone %}{{ customer.phone }}{% endif %}">
              </div>

              <div class="mb-3">
                <label class="form-label" for="contact-message">Message</label>
                <textarea class="form-control" id="contact-message" name="contact[Message]" placeholder="Message" rows="5"></textarea>
              </div>

              <button class="btn btn-primary" type="submit">Send</button>
            {% endform %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /.template-page -->