{{ header }}

<main id="information-contact" class="franklin-information-page franklin-contact-page">
  <div class="container">

    <nav class="franklin-breadcrumb information-breadcrumb" aria-label="breadcrumb">
      <ol class="breadcrumb mb-0">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item {% if loop.last %}active{% endif %}">
            {% if loop.last %}
              {{ breadcrumb.text }}
            {% else %}
              <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
            {% endif %}
          </li>
        {% endfor %}
      </ol>
    </nav>

    {{ content_top }}

    <section class="contact-hero">
      <div class="contact-hero-content">
        <span class="contact-eyebrow">
          <i class="bi bi-chat-heart"></i>
          Contact Franklin
        </span>

        <h1>{{ heading_title }}</h1>

        <p>
          Reach our team for product information, order assistance, store enquiries and general customer support.
        </p>
      </div>

      <div class="contact-hero-icon" aria-hidden="true">
        <i class="bi bi-headset"></i>
      </div>
    </section>

    <section class="contact-location-section">

      <div class="contact-section-heading">
        <span><i class="bi bi-geo-alt"></i></span>
        <div>
          <h2>{{ text_location }}</h2>
          <p>Visit, call or connect with our main Franklin location.</p>
        </div>
      </div>

      <div class="contact-main-location">

        {% if image %}
          <div class="contact-location-image">
            <img src="{{ image }}" alt="{{ store }}" title="{{ store }}"/>
          </div>
        {% endif %}

        <div class="contact-location-details">

          <article class="contact-detail-card contact-store-card">
            <span class="contact-detail-icon"><i class="bi bi-building"></i></span>
            <div>
              <small>Store</small>
              <h3>{{ store }}</h3>
              <address>{{ address }}</address>

              {% if geocode %}
                <a href="https://maps.google.com/maps?q={{ geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15"
                   target="_blank"
                   rel="noopener"
                   class="btn contact-map-button">
                  <i class="bi bi-geo-alt-fill"></i>
                  {{ button_map }}
                </a>
              {% endif %}
            </div>
          </article>

          {% if telephone %}
            <article class="contact-detail-card">
              <span class="contact-detail-icon"><i class="bi bi-telephone"></i></span>
              <div>
                <small>{{ text_telephone }}</small>
                <strong>{{ telephone }}</strong>
              </div>
            </article>
          {% endif %}

          {% if open %}
            <article class="contact-detail-card">
              <span class="contact-detail-icon"><i class="bi bi-clock"></i></span>
              <div>
                <small>{{ text_open }}</small>
                <strong>{{ open }}</strong>
              </div>
            </article>
          {% endif %}

          {% if comment %}
            <article class="contact-detail-card">
              <span class="contact-detail-icon"><i class="bi bi-info-circle"></i></span>
              <div>
                <small>{{ text_comment }}</small>
                <strong>{{ comment }}</strong>
              </div>
            </article>
          {% endif %}

        </div>
      </div>
    </section>

    {% if locations %}
      <section class="contact-branches-section">

        <div class="contact-section-heading">
          <span><i class="bi bi-buildings"></i></span>
          <div>
            <h2>{{ text_store }}</h2>
            <p>Explore additional Franklin store and service locations.</p>
          </div>
        </div>

        <div id="accordion" class="accordion contact-location-accordion">
          {% for location in locations %}
            <div class="accordion-item">
              <h2 class="accordion-header">
                <button type="button"
                        class="accordion-button collapsed"
                        data-bs-toggle="collapse"
                        data-bs-target="#collapse-location-{{ location.location_id }}"
                        aria-expanded="false"
                        aria-controls="collapse-location-{{ location.location_id }}">
                  <span class="contact-accordion-icon"><i class="bi bi-geo-alt"></i></span>
                  {{ location.name }}
                </button>
              </h2>

              <div id="collapse-location-{{ location.location_id }}"
                   class="accordion-collapse collapse"
                   data-bs-parent="#accordion">
                <div class="accordion-body">
                  <div class="contact-branch-grid">

                    {% if location.image %}
                      <div class="contact-branch-image">
                        <img src="{{ location.image }}" alt="{{ location.name }}" title="{{ location.name }}"/>
                      </div>
                    {% endif %}

                    <div class="contact-branch-detail">
                      <small>Location</small>
                      <h3>{{ location.name }}</h3>
                      <address>{{ location.address }}</address>

                      {% if location.geocode %}
                        <a href="https://maps.google.com/maps?q={{ location.geocode|url_encode }}&hl={{ geocode_hl }}&t=m&z=15"
                           target="_blank"
                           rel="noopener"
                           class="btn contact-map-button">
                          <i class="bi bi-geo-alt-fill"></i>
                          {{ button_map }}
                        </a>
                      {% endif %}
                    </div>

                    <div class="contact-branch-detail">
                      <small>{{ text_telephone }}</small>
                      <strong>{{ location.telephone }}</strong>
                    </div>

                    <div class="contact-branch-detail">
                      {% if location.open %}
                        <small>{{ text_open }}</small>
                        <strong>{{ location.open }}</strong>
                      {% endif %}

                      {% if location.comment %}
                        <p>{{ location.comment }}</p>
                      {% endif %}
                    </div>

                  </div>
                </div>
              </div>
            </div>
          {% endfor %}
        </div>
      </section>
    {% endif %}

    <section class="contact-form-section">

      <aside class="contact-form-info">
        <span class="contact-form-info-icon"><i class="bi bi-envelope-paper"></i></span>
        <h2>Send an Enquiry</h2>
        <p>Complete the form with your contact details and enquiry. Our team will review your message.</p>

        <div class="contact-form-tips">
          <div><i class="bi bi-check-circle"></i><span>Enter a valid email address.</span></div>
          <div><i class="bi bi-check-circle"></i><span>Describe your enquiry clearly.</span></div>
          <div><i class="bi bi-check-circle"></i><span>Include order details where relevant.</span></div>
        </div>
      </aside>

      <div class="contact-form-card">
        <div class="contact-form-heading">
          <span><i class="bi bi-chat-left-text"></i></span>
          <div>
            <h2>{{ text_contact }}</h2>
            <p>Fields marked with an asterisk are required.</p>
          </div>
        </div>

        <form id="form-contact" action="{{ send }}" method="post" data-oc-toggle="ajax">
          <div class="contact-form-grid">

            <div class="contact-form-group required">
              <label for="input-name">{{ entry_name }}</label>
              <div class="contact-input-wrap">
                <i class="bi bi-person"></i>
                <input type="text" name="name" value="{{ name }}" id="input-name" class="form-control" autocomplete="name"/>
              </div>
              <div id="error-name" class="invalid-feedback"></div>
            </div>

            <div class="contact-form-group required">
              <label for="input-email">{{ entry_email }}</label>
              <div class="contact-input-wrap">
                <i class="bi bi-envelope"></i>
                <input type="email" name="email" value="{{ email }}" id="input-email" class="form-control" autocomplete="email"/>
              </div>
              <div id="error-email" class="invalid-feedback"></div>
            </div>

            <div class="contact-form-group contact-form-full required">
              <label for="input-enquiry">{{ entry_enquiry }}</label>
              <textarea name="enquiry" rows="8" id="input-enquiry" class="form-control"></textarea>
              <div id="error-enquiry" class="invalid-feedback"></div>
            </div>

          </div>

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

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

    </section>

    {{ content_bottom }}

  </div>
</main>

{{ footer }}