{{ header }}
<main id="information-contact" class="contact-page">
  <section class="contact-hero">
    <div class="container-fluid">
      <ul class="breadcrumb contact-breadcrumb">
        {% for key, breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span class="mx-2">•</span>{% endif %}</li>
        {% endfor %}
      </ul>

      <div class="contact-hero__grid">
        <div class="contact-hero__content">
          <span class="contact-eyebrow">{{ text_contact }}</span>
          <h1>{{ heading_title }}</h1>
          <p>{{ text_contact_lead }}</p>
        </div>

        <div class="contact-quick">
          {% if telephone %}
          <a class="contact-quick__item" href="tel:{{ telephone|replace({' ': '', '-': '', '(': '', ')': ''}) }}">
            <span class="contact-quick__icon" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2A19.79 19.79 0 0 1 11.19 19a19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.91.33 1.8.62 2.65a2 2 0 0 1-.45 2.11L8 9.72A16 16 0 0 0 14.28 16l1.24-1.23a2 2 0 0 1 2.11-.45c.85.29 1.74.5 2.65.62A2 2 0 0 1 22 16.92Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </span>
            <span>
              <small>{{ text_telephone }}</small>
              <strong>{{ telephone }}</strong>
            </span>
          </a>
          {% endif %}

          {% if geocode %}
          <a class="contact-quick__item" href="https://maps.google.com/maps?q={{ geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15" target="_blank" rel="noopener">
            <span class="contact-quick__icon" aria-hidden="true">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                <path d="M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
                <path d="M12 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" stroke="currentColor" stroke-width="1.6"/>
              </svg>
            </span>
            <span>
              <small>{{ text_address }}</small>
              <strong>{{ button_map }}</strong>
            </span>
          </a>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  {{ content_top }}

  <section class="contact-section">
    <div class="container-fluid">
      <div class="row">{{ column_left }}
        {% if column_left and column_right %}
        {% set class = 'col-sm-6' %}
        {% elseif column_left or column_right %}
        {% set class = 'col-sm-9' %}
        {% else %}
        {% set class = 'col-sm-12' %}
        {% endif %}

        <div id="content" class="{{ class }}">
          <div class="contact-layout">
            <div class="contact-info">
              <div class="contact-card contact-card--store{% if not image %} contact-card--no-image{% endif %}">
                {% if image %}
                <div class="contact-store__image">
                  <img src="{{ image }}" alt="{{ store }}" title="{{ store }}" />
                </div>
                {% endif %}

                <div class="contact-store__body">
                  <span class="contact-eyebrow">{{ text_location }}</span>
                  <h2>{{ store }}</h2>
                  <p class="contact-muted">{{ text_location_lead }}</p>
                </div>
              </div>

              <div class="contact-details">
                <div class="contact-detail">
                  <span class="contact-detail__label">{{ text_address }}</span>
                  <address>{{ address }}</address>
                  {% if geocode %}
                  <a class="contact-link" href="https://maps.google.com/maps?q={{ geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15" target="_blank" rel="noopener">{{ button_map }}</a>
                  {% endif %}
                </div>

                {% if telephone or fax %}
                <div class="contact-detail">
                  {% if telephone %}
                  <span class="contact-detail__label">{{ text_telephone }}</span>
                  <a class="contact-detail__value" href="tel:{{ telephone|replace({' ': '', '-': '', '(': '', ')': ''}) }}">{{ telephone }}</a>
                  {% endif %}
                  {% if fax %}
                  <span class="contact-detail__label contact-detail__label--spaced">{{ text_fax }}</span>
                  <span class="contact-detail__value">{{ fax }}</span>
                  {% endif %}
                </div>
                {% endif %}

                {% if open or comment %}
                <div class="contact-detail">
                  {% if open %}
                  <span class="contact-detail__label">{{ text_open }}</span>
                  <div class="contact-detail__value">{{ open }}</div>
                  {% endif %}
                  {% if comment %}
                  <span class="contact-detail__label contact-detail__label--spaced">{{ text_comment }}</span>
                  <div class="contact-muted">{{ comment }}</div>
                  {% endif %}
                </div>
                {% endif %}
              </div>

              {% if locations %}
              <div class="contact-locations">
                <h2>{{ text_store }}</h2>
                <div class="accordion" id="accordion">
                  {% for location in locations %}
                  <div class="accordion-item contact-location">
                    <h3 class="accordion-header" id="heading-location{{ location.location_id }}">
                      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-location{{ location.location_id }}" aria-expanded="false" aria-controls="collapse-location{{ location.location_id }}">
                        {{ location.name }}
                      </button>
                    </h3>
                    <div class="accordion-collapse collapse" id="collapse-location{{ location.location_id }}" aria-labelledby="heading-location{{ location.location_id }}" data-bs-parent="#accordion">
                      <div class="accordion-body">
                        {% if location.image %}
                        <img src="{{ location.image }}" alt="{{ location.name }}" title="{{ location.name }}" class="contact-location__image" />
                        {% endif %}
                        <div class="contact-detail">
                          <span class="contact-detail__label">{{ text_address }}</span>
                          <address>{{ location.address }}</address>
                          {% if location.geocode %}
                          <a class="contact-link" href="https://maps.google.com/maps?q={{ location.geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15" target="_blank" rel="noopener">{{ button_map }}</a>
                          {% endif %}
                        </div>
                        {% if location.telephone or location.fax %}
                        <div class="contact-detail">
                          {% if location.telephone %}
                          <span class="contact-detail__label">{{ text_telephone }}</span>
                          <span class="contact-detail__value">{{ location.telephone }}</span>
                          {% endif %}
                          {% if location.fax %}
                          <span class="contact-detail__label contact-detail__label--spaced">{{ text_fax }}</span>
                          <span class="contact-detail__value">{{ location.fax }}</span>
                          {% endif %}
                        </div>
                        {% endif %}
                        {% if location.open or location.comment %}
                        <div class="contact-detail">
                          {% if location.open %}
                          <span class="contact-detail__label">{{ text_open }}</span>
                          <div class="contact-detail__value">{{ location.open }}</div>
                          {% endif %}
                          {% if location.comment %}
                          <span class="contact-detail__label contact-detail__label--spaced">{{ text_comment }}</span>
                          <div class="contact-muted">{{ location.comment }}</div>
                          {% endif %}
                        </div>
                        {% endif %}
                      </div>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
            </div>

            <form action="{{ action }}" method="post" enctype="multipart/form-data" class="contact-form">
              <div class="contact-form__head">
                <span class="contact-eyebrow">{{ text_contact }}</span>
                <h2>{{ text_contact }}</h2>
                <p>{{ text_message_hint }}</p>
              </div>

              <div class="form-wrap required">
                <label class="control-label" for="input-name">{{ entry_name }}</label>
                <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
                {% if error_name %}
                <div class="text-danger">{{ error_name }}</div>
                {% endif %}
              </div>

              <div class="form-wrap required">
                <label class="control-label" for="input-email">{{ entry_email }}</label>
                <input type="email" name="email" value="{{ email }}" placeholder="{{ entry_email }}" id="input-email" class="form-control" />
                {% if error_email %}
                <div class="text-danger">{{ error_email }}</div>
                {% endif %}
              </div>

              <div class="form-wrap required">
                <label class="control-label" for="input-enquiry">{{ entry_enquiry }}</label>
                <textarea name="enquiry" rows="7" placeholder="{{ entry_enquiry }}" id="input-enquiry" class="form-control">{{ enquiry }}</textarea>
                {% if error_enquiry %}
                <div class="text-danger">{{ error_enquiry }}</div>
                {% endif %}
              </div>

              {% if captcha %}
              <div class="contact-captcha">{{ captcha }}</div>
              {% endif %}

              <button class="btn btn-primary contact-submit" type="submit">{{ button_submit }}</button>
            </form>
          </div>

          {{ content_bottom }}
        </div>
        {{ column_right }}
      </div>
    </div>
  </section>
</main>
{{ footer }}
