{% extends "base.html" %}
{% load static %}
{% block title %}Contact {{ SITE_NAME }} · Get in Touch{% endblock %}
{% block og_title %}Contact {{ SITE_NAME }} · Get in Touch{% endblock %}
{% block twitter_title %}Contact {{ SITE_NAME }} · Get in Touch{% endblock %}
{% block meta_description %}Contact {{ SITE_NAME }}. {{ CONTACT_SERVICE_AREA }}. Call{% if CONTACT_PHONE %} {{ CONTACT_PHONE }}{% endif %}{% if CONTACT_EMAIL %} or email {{ CONTACT_EMAIL }}{% endif %}.{% endblock %}
{% block og_description %}Contact {{ SITE_NAME }}. Call{% if CONTACT_PHONE %} {{ CONTACT_PHONE }}{% endif %}{% if CONTACT_EMAIL %} or email {{ CONTACT_EMAIL }}{% endif %}.{% endblock %}
{% block twitter_description %}Contact {{ SITE_NAME }}. Call{% if CONTACT_PHONE %} {{ CONTACT_PHONE }}{% endif %}{% if CONTACT_EMAIL %} or email {{ CONTACT_EMAIL }}{% endif %}.{% endblock %}
{% block structured_data %}
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ContactPage",
  "name": "Contact {{ SITE_NAME|escapejs }}",
  "url": "{{ PUBLIC_SITE_URL }}{% url 'public:contact' %}",
  "description": "Contact {{ SITE_NAME|escapejs }}. {{ CONTACT_SERVICE_AREA|escapejs }}.",
  "mainEntity": {
    "@type": "Store",
    "name": "{{ SITE_NAME|escapejs }}",
    "url": "{{ PUBLIC_SITE_URL }}/",
    "telephone": "{{ CONTACT_PHONE|escapejs }}",
    "email": "{{ CONTACT_EMAIL|escapejs }}",
    {% if CONTACT_ADDRESS %}"address": "{{ CONTACT_ADDRESS|escapejs }}",{% endif %}
    "areaServed": "{{ CONTACT_SERVICE_AREA|escapejs }}",
    "contactPoint": {
      "@type": "ContactPoint",
      "contactType": "customer service",
      "telephone": "{{ CONTACT_PHONE|escapejs }}",
      "email": "{{ CONTACT_EMAIL|escapejs }}",
      "areaServed": "{{ CONTACT_SERVICE_AREA|escapejs }}",
      "availableLanguage": "English"
    }
  }
}
</script>
{% endblock %}
{% block content %}
  {% include "public/_breadcrumbs.html" with title="Contact Us" %}
  <section class="section section-xl bg-default">
    <div class="container">
      <div class="row row-30 row-md-50">
        <div class="col-lg-4 col-xl-5">
          <div class="inset-xl-right-70">
            <h3>Have Any Questions?</h3>
            <h5 class="title-6">Custom prints, order questions, or wholesale — we reply by phone and email.</h5>
            <ul class="list-contacts">
              {% if CONTACT_PHONE %}
              <li><span class="icon mdi mdi-phone"></span><a class="big" href="tel:{{ CONTACT_PHONE_TEL }}">{{ CONTACT_PHONE }}</a></li>
              {% endif %}
              {% if CONTACT_ADDRESS or CONTACT_SERVICE_AREA %}
              <li><span class="icon mdi mdi-map-marker"></span><span class="big">{% if CONTACT_ADDRESS %}{{ CONTACT_ADDRESS }}{% else %}{{ CONTACT_SERVICE_AREA }}{% endif %}</span></li>
              {% endif %}
              {% if CONTACT_EMAIL %}
              <li><span class="icon mdi mdi-email-outline"></span><a class="big" href="mailto:{{ CONTACT_EMAIL }}">{{ CONTACT_EMAIL }}</a></li>
              {% endif %}
            </ul>
          </div>
        </div>
        <div class="col-lg-8 col-xl-7">
          <form class="rd-form" method="post" action="{% url 'public:contact' %}">
            {% csrf_token %}
            <div class="row row-20 gutter-20">
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.first_name.id_for_label }}">First name</label>
                  {{ form.first_name }}
                  {{ form.first_name.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.last_name.id_for_label }}">Last name</label>
                  {{ form.last_name }}
                  {{ form.last_name.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.phone.id_for_label }}">Phone</label>
                  {{ form.phone }}
                  {{ form.phone.errors }}
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.email.id_for_label }}">E-mail</label>
                  {{ form.email }}
                  {{ form.email.errors }}
                </div>
              </div>
              <div class="col-12">
                <p class="form-label-outside">Mailing address <span style="font-weight:400;color:#6b7280">(optional)</span></p>
              </div>
              <div class="col-12" data-address-autocomplete data-suggest-url="{% url 'address_suggest' %}">
                <div class="form-wrap address-ac-wrap">
                  <label class="form-label-outside" for="{{ form.address_line1.id_for_label }}">Street address</label>
                  {{ form.address_line1 }}
                  {{ form.address_line1.errors }}
                </div>
                <div class="row row-20 gutter-20">
                  <div class="col-sm-6">
                    <div class="form-wrap">
                      <label class="form-label-outside" for="{{ form.address_line2.id_for_label }}">Apt / suite</label>
                      {{ form.address_line2 }}
                      {{ form.address_line2.errors }}
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-wrap">
                      <label class="form-label-outside" for="{{ form.address_city.id_for_label }}">City</label>
                      {{ form.address_city }}
                      {{ form.address_city.errors }}
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-wrap">
                      <label class="form-label-outside" for="{{ form.address_state.id_for_label }}">State</label>
                      {{ form.address_state }}
                      {{ form.address_state.errors }}
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="form-wrap">
                      <label class="form-label-outside" for="{{ form.address_zip.id_for_label }}">ZIP</label>
                      {{ form.address_zip }}
                      {{ form.address_zip.errors }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.interest.id_for_label }}">I am interested in</label>
                  {{ form.interest }}
                  {{ form.interest.errors }}
                </div>
              </div>
              <div class="col-12">
                <div class="form-wrap">
                  <label class="form-label-outside" for="{{ form.message.id_for_label }}">Message</label>
                  {{ form.message }}
                  {{ form.message.errors }}
                </div>
              </div>
              {% if form.captcha %}
              <div class="col-12">{{ form.captcha }}{{ form.captcha.errors }}</div>
              {% endif %}
            </div>
            <div class="group-lg group-custom-1">
              <div class="group-custom-ie">
                <div class="unit unit-spacing-md form-text">
                  <div class="unit-left"><span class="icon mdi mdi-information-outline"></span></div>
                  <div class="unit-body">
                    <p>By submitting, you agree we may contact you about your inquiry by email and SMS (if you provide a phone number). Unsubscribe anytime.{% if form.captcha %} Protected by reCAPTCHA.{% endif %}</p>
                  </div>
                </div>
              </div>
              <div>
                <button class="button button-gray-5" type="submit" data-tianji-event="contact_form_submit">Send Message</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>
{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="{% static 'css/address-autocomplete.css' %}">
{% endblock %}
{% block tracking_events %}
{% if "sent" in request.GET %}
<script>
  if (window.aimlTrackWhenReady) {
    window.aimlTrackWhenReady('contact_form_success');
  }
</script>
{% endif %}
{% endblock %}
{% block extra_js %}
<script src="{% static 'js/address-autocomplete.js' %}"></script>
{% endblock %}