{% assign altametrics_logo = '' %}
{% capture altametrics_logo %}{% picture direct-url_681 pages/Altametrics.png %}{% endcapture %}

{% assign adam_worth = '' %}
{% capture adam_worth %}{% picture direct-url_1064 sales/adam_worth.png %}{% endcapture %}

{% assign icon_video1 = '' %}
{% capture icon_video1 %}{% picture direct-url_540 sales/icon_video1.png %}{% endcapture %}

{% assign icon_roi = '' %}
{% capture icon_roi %}{% picture direct-url_540 sales/icon_roi.png %}{% endcapture %}

{% assign icon_demo = '' %}
{% capture icon_demo %}{% picture direct-url_540 sales/icon_demo.png %}{% endcapture %}

{% assign icon_why = '' %}
{% capture icon_why %}{% picture direct-url_540 sales/icon_why.png %}{% endcapture %}

{% assign companies_logo = '' %}
{% if page.i_customer_logo %}
{% capture companies_logo %}{% picture companies_logo companies/{{ page.i_customer_logo }} %}{% endcapture %}
{% endif %}

{% assign gif_path = '' %}
{% capture gif_path %}{{ page.p_customer_video | replace: ".mp4", ".gif" }}{% endcapture %}
<div class="enterprise-sales-page has-bg">
  <div class="enterprise-container">
    <div class="enterprise-left">
      <div class="logo-container">
        <div class="logo-item"><img src="{{ companies_logo }}" alt="{{page.v_customer_display_name}} logo"></div>
        <div class="logo-item">+</div>
        <div class="logo-item"><img src="{{ altametrics_logo }}" alt="Altametrics Logo"></div>
      </div>
      <h1>How {{ page.v_customer_display_name }} can increase profits by optimizing employee scheduling and reducing food costs.</h1>
      <p><br /></p>
      <p>Hi {{ page.v_customer_display_name  }},</p>
      <p><br /></p>
      <p>
        Thank you for reviewing this proposal for {{ page.v_customer_display_name}}. To get the most out of your
        implementation
        with Altametrics, I recommend the following steps:
      </p>
      <p><br /></p>
        {{ page.t_hero_text | replace '"', ''}}
    </div>
    <div class="enterprise-right">
      <div class="sales-video">
        <video id = "salesVideo" controls poster="{{ site.url }}/assets/gif/{{ gif_path }}">
          <source src="{{ site.url }}/assets/videos/{{ page.p_customer_video }}">
        </video>
        <div id ="salesPlay" class="sales-play">▶</div>
      </div>
      <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>

</div>
<div class="enterprise-info-headline has-bg">{{ page.t_marketing_headline }} {{ page.v_customer_display_name }}</div>
<div class="enterprise-info">
  <div class="enterprise-info-item" data-title="{{ page.p_marketing_asset1_name }}" data-video = "" data-videourl="/assets/videos/jebediahvideo.mp4" data-modal data-size="xl" >
    <div class="enterprise-info-item-top"><img src="{{icon_video1}}" alt="Explainer Video Icon"></div>
    <div class="enterprise-info-item-bottom">
      <div class="enterprise-info-title">{{ page.p_marketing_asset1_name }}</div>
      <div class="enterprise-info-description">{{ page.p_marketing_asset1_text }}</div>
      <a href="javascript:void(0)" class="enterprise-info-button">{{ page.t_view_cta }}</a>
    </div>
  </div>
  <div id="quickViewModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="quickViewModalTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title font-weight-normal text-dark" id="quickViewModalTitle">...</h5>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <svg class="icon-close" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 18 18">
          <path d="M15 4l-5 5 5 5v1h-1l-5-5-5 5H3v-1l5-5-5-5V3h1l5 5 5-5h1v1z"></path>
        </svg>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    </div>
    </div>
    </div>
  <div class="enterprise-info-item">
    <div class="enterprise-info-item-top"><img src="{{icon_roi}}" alt="Return on Investment Icon"></div>
    <div class="enterprise-info-item-bottom">
      <div class="enterprise-info-title">{{ page.p_marketing_asset2_subheadline }}</div>
      <div class="enterprise-info-description">{{ page.p_marketing_asset2_text }} {{ page.v_customer_display_name }}.</div>
      <a href="javascript:void(0)" class="enterprise-info-button">{{ page.t_view_cta }}</a>
    </div>
  </div>
  <div class="enterprise-info-item">
    <div class="enterprise-info-item-top"><img src="{{icon_demo}}" alt="Key Demo Icon"></div>
    <div class="enterprise-info-item-bottom">
      <div class="enterprise-info-title">{{ page.p_marketing_asset3_subheadline | replace '"', '' }} {{ page.v_customer_display_name }}</div>
      <div class="enterprise-info-description">{{ page.p_marketing_asset3_text }}</div>
      <a href="javascript:void(0)" class="enterprise-info-button">{{ page.t_view_cta }}</a>
    </div>
  </div>
  <div class="enterprise-info-item">
    <a href="{{ siteurl }}/companies/why-altametrics/{{ page.i18n_link }}.html">
    <div class="enterprise-info-item-top"><img src="{{icon_why}}" alt="Why Altametrics Icon"></div>
    <div class="enterprise-info-item-bottom">
      <div class="enterprise-info-title">{{ page.p_marketing_asset4_subheadline }}</div>
      <div class="enterprise-info-description">{{ page.p_marketing_asset4_text }}</div>
      <a href="{{ siteurl }}/companies/why-altametrics/{{ page.i18n_link }}.html" class="enterprise-info-button">{{ page.t_view_cta }}</a>
    </div></a>
  </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="enterprise-info-headline mb-5">{{ page.t_salesrep_headline }}</div>
<div class="enterprise-about mb-3">
  <div class="enterprise-about-body">
    <div class="enterprise-about-container">
      <div class="breakout-media">
        <div class="outer-wrapper">
          <div class="rounded-left">
            <div class="rounded-right" style="background-image: url({{ adam_worth }})"></div>
          </div>
        </div>
      </div>
      <div class="avatar-wrapper">
        <h2>{{ page.v_salesrep_name }}</h2>
        <div>{{ page.t_salesrep_text }}</div>
        <a href="#sales-schedule" class="avatar-cta">get started</a>
      </div>
    </div>
  </div>
</div>