{% assign hero_img = '' %}
{% capture hero_img %}{% picture direct-url_1160 pages/locale_hero.png %}{% endcapture %}
{% assign why_img = '' %}
{% capture why_img %}{% picture direct-url_728 pages/why_choose.png %}{% endcapture %}
{% assign competitors_img = '' %}
{% capture competitors_img %}{% picture direct-url_854 pages/separate_competitors.png %}{% endcapture %}
{% assign footer_img = '' %}
{% capture footer_img %}{% picture direct-url_1160 pages/ultimate-scheduleing-app.png %}{% endcapture %}


<div class="locale-hero locale-container">
    <div class="locale-left">
        <div class="locale-hero-text">
            {% if page.v_category == "states" %}
            {% assign state_map = '' %}
            {% capture state_map %}{% picture direct-url_242 states/{{ page.i_state_logo }} %}{% endcapture %}
            <div class="locale-hero-state"><img src="{{ state_map }}" alt="{{ page.t_state_name }} logo and seal"/></div>
            {% else %}
            {% assign city_map = '' %}
            {% capture city_map %}{% picture direct-url_200 states/{{ page.i_state_logo }} %}{% endcapture %}
            <img class="mb-3" src="{{ city_map }}" alt="{{ page.t_state_name }} logo and seal"/>
            {% endif %}
            <p>{{ page.t_headline }}</p>
        </div>
    </div>
    <div class="locale-right"><img class="locale-hero-image" src="{{ hero_img }}" alt="Altametrics best restaurant software in {{ page.t_state_name }}"></div>
</div>
<div class="locale-form locale-container">
    <div class="locale-left">
        <div class="sales-schedule" id="sales-schedule">

            <div id="appointmentsDiv"> </div>

            <script async type="text/javascript">
                if (typeof MauticSDKLoaded == 'undefined') {
                    var MauticSDKLoaded = true;
                    var head = document.getElementsByTagName('head')[0];
                    var script = document.createElement('script');
                    script.type = 'text/javascript';
                    script.src = '{{site.mautic_live_url }}/media/js/mautic-form.js';
                    script.onload = function () {
                        MauticSDK.onLoad();
                    };
                    head.appendChild(script);
                    var MauticDomain = '{{site.mautic_live_url}}';
                    var MauticLang = {
                        'submittingMessage': "Please wait..."
                    } 
                }

                (function (w, d, s, o, f, js, fjs) {
                    w['appointmentWidget'] = o; w[o] = w[o] || function () { (w[o].q = w[o].q || []).push(arguments) };
                    js = d.createElement(s), fjs = d.getElementsByTagName(s)[0];
                    js.id = o; js.src = f; js.async = 1; fjs.parentNode.insertBefore(js, fjs);
                }(window, document, 'script', 'appointmentWidgetJs', 'https://appointments.altametrics.com/api/script.js?service={{ site.appointment.service_id }}&lang={{page.language}}&website={{site.appointment.websitename}}&cta_headline={{ page.cta_inline.cta_headline }}&cta_sub_headline={{ page.cta_inline.cta_sub_headline }}&cta_background_image={{ page.cta_inline.cta_background_image }}&show_video=0'));
            </script>
        </div>
    </div>
    <div class="locale-right">
        <div class="locale-form-customers">
            <h1>{{ page.t_customer_number }}</h1>
            <p>{{ page.t_customer_altametrics }}</p>
            <div class="locale-form-logos">
                {% for item in page.logo_items %}
                {% picture width_150 pages/{{ item.i_logo }} %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<div class="locale-separates locale-container">
    <div class="locale-left">
        <div class="locale-separates-container">
            <h1 class="is-locale-blue">{{ page.t_what_separates }}</h1>
            <div class="accordion1" id="accordion">
            {% for item in page.competitive_items %}
            <div class="card pepole-ask-tab mb-2">
                <div class="card-header p-3 collapsed" id="heading-{{ forloop.index }}" data-toggle="collapse"
                  data-target="#collapse-{{ forloop.index }}" aria-expanded="false"
                  aria-controls="collapse-{{ forloop.index }}">
                  <h5 class="mb-0 h5 font-weight-normal w-100">
                    <span class="ques-text accordion-toggle"><svg width="50" height="50" viewBox="0 0 50 50" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="24.5" fill="#47CFFF" stroke="#1EB1E6" />
                        <path d="M12 26.8L19.1429 34L37 16" stroke="white" stroke-width="8" stroke-linecap="round"
                            stroke-linejoin="round" />
                    </svg> {{ item.t_title }} </span><i
                      class="arrow down pepole-arrow-right"></i>
                  </h5>
                </div>
                <div id="collapse-{{ forloop.index }}" class="collapse {% if forloop.index == 1 %} show {% else %} {% endif %}" aria-labelledby="heading-{{ forloop.index }}"
                  data-parent="#accordion">
                  <div class="card-body" id="answer-{{ forloop.index }}">
                    {{ item.t_description }}
                  </div>
                </div>
              </div>
            {% endfor %}
            </div>
        </div>
    </div>
    <div class="locale-right">
        <img class="locale-why-image" src="{{ why_img }}" alt="Why Altametrics is the best restaurant software in {{ page.t_state_name }}"/>
    </div>
</div>
<div class="locale-why locale-container">
    <div class="locale-left">
        <img class="locale-hero-image" src="{{ competitors_img }}" alt="Why Altametrics is the best restaurant software in {{ page.t_state_name }}">
    </div>
    <div class="locale-right">
        <div class="locale-why-container">
            <h1 class="is-locale-blue">{{ page.t_why_choose }}</h1>
            <h2>{{ page.t_altametrics_offers }}</h2>
            <div class="why-offer-container">
                {% for item in page.offer_items %}
                <div class="why-offer-item">
                    {% picture width_276 pages/{{ item.p_icon }} %}
                    <p>{{ item.t_title }}</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>
<div class="enterprise-info-headline">{{ page.t_intro_altametrics }}</div>
<div class="locale-intro locale-container">
    <div class="locale-intro-container">
        <div class="locale-intro-video">
            <video id="salesVideo" controls poster="{{ site.url }}/assets/gif/jebediah.gif">
                <source src="{{ site.url }}/assets/videos/jebediahvideo.mp4">
            </video>
            <div id="salesPlay" class="sales-play">▶</div>
        </div>
    </div>
</div>
<div class="enterprise-info-headline">{{ page.t_customer_references }}</div>
<div class="enterprise-info">
    {% for references in page.customer_references %}
    <div class="enterprise-info-item" data-toggle="modal" data-target="#reference_{{ forloop.index }}">
        <div class="enterprise-info-item-top"><img
                src="{% picture direct-url_1064 sales/{{ references.i_reference_logo }}.png %}"
                alt="{{ references.t_reference_name }}" /></div>
        <div class="enterprise-info-item-bottom">
            <div class="enterprise-info-title">{{ page.t_case_study }}: {{ references.t_reference_name }}</div>
            <div class="enterprise-info-description">{{ references.t_reference_study }}</div>
            <a href="javascript:void(0)" class="enterprise-info-button">{{ page.t_view_cta }}</a>
        </div>
    </div>
    <div class="modal fade custom-modal" id="reference_{{ forloop.index }}" role="dialog"
        aria-labelledby="reference_{{ forloop.index }}Label">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-body">
                    <iframe id="video"
                        src="https://www.youtube.com/embed/{{ references.p_reference_video_url }}&autoplay=1"
                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/{{ references.p_reference_video_url }}?autoplay=1><img src=https://img.youtube.com/vi/{{ references.p_reference_video_url }}/hqdefault.jpg alt='{{ references.t_reference_name }}'><span>&#x25BA;</span></a>"
                        frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                        allowfullscreen title="{{ references.t_reference_name }}" loading="lazy"></iframe>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
<div class="locale-footer">
    <div class="locale-left"><img class="locale-hero-image" src="{{ footer_img }}"/></div>
    <div class="locale-right">
        <h1>{{ page.t_footer_headline }}</h1>
    </div>
</div>