<div class="modal-window modal-video" data-video="vid1">
  <div class="modal-inner">
    <div class="close-modal close-video-modal">
      <svg class="icon-close">
        <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-close"></use>
      </svg>
    </div>
    <div class="modal-content">

      <div class="video-container" id="video-container">
        <div class="playback-animation" id="playback-animation">
          <svg class="playback-icons">
            <use class="hidden" href="#play-icon"></use>
            <use href="#pause"></use>
          </svg>
        </div>

        <video controls class="video" id="video" preload="metadata" poster="">
          <source src="" type="video/mp4">
          </source>
        </video>

        <div class="video-controls hidden" id="video-controls">
          <div class="bottom-controls">
            <div class="left-controls">
              <button data-title="Play (p)" id="play">
                <div class="playback-icons">
                  <svg class="icon-play">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-play"></use>
                  </svg>
                  <svg class="icon-pause hidden">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-pause"></use>
                  </svg>
                </div>
              </button>
            </div>

            <div class="center-controls">
              <div class="video-progress">
                <progress id="progress-bar" value="0" min="0"></progress>
                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
                <time class="time-elapsed h6" id="time-elapsed">00:00</time>
                <time class="time-duration h6" id="duration">00:00</time>
              </div>
            </div>

            <div class="right-controls">
              <div class="volume-controls">
                <button data-title="Mute (m)" class="volume-button" id="volume-button">
                  <div class="volume-icons">
                    <svg class="icon-sound-off hidden">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-off"></use>
                    </svg>
                    <svg class="icon-sound-low hidden">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-low"></use>
                    </svg>
                    <svg class="icon-sound-on">
                      <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-sound-on"></use>
                    </svg>
                  </div>
                </button>
                <div class="volume-slider">
                  <div class="volume-value"></div>
                  <input class="volume" id="volume" value="1" data-mute="0.5" type="range" max="1" min="0" step="0.01">
                </div>
              </div>
              <button data-title="Full screen (f)" class="fullscreen-button" id="fullscreen-button">
                <div class="fullscreen-icons">
                  <svg class="icon-fullscreen">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-fullscreen"></use>
                  </svg>
                  <svg class="icon-exit-fullscreen hidden">
                    <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-exit-fullscreen"></use>
                  </svg>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<footer class="site-footer">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-10 offset-md-1">
          <nav class="site-footer__nav">
            <ul class="site-footer__list">
              {% for item in menu.footer.get_items %}
                <li class="site-footer__item">
                  <a href="{{ item.link }}" class="site-footer__link">{{ item.title }}</a>
                </li>
              {% endfor %}

              <li class="site-footer__item">
                <a href="https://www.linde-engineering.com/en/linde-plantserv/index.html" target="_blank" class="site-footer__link">LINDE PLANTSERV®</a>
              </li>
            </ul>
          </nav>
          <!-- <div class="subscribe">
            <div class="subscribe__text">Subscribe to our newsletter and get notified about new courses</div>
            <form action="#">
              <input type="text" name="subscribe" id="subscribe">
              <button class="btn btn--hollow"><span>Submit</span></button>
            </form>
          </div> -->
          <div class="site-footer__copy">{{ footer_text }} </div>
        </div>
      </div>
    </div>
  </footer>

  <!-- Form modal -->
  <div class="modal-window modal-form">
    <div class="modal-inner">
      <div class="close-modal">
        <svg class="icon-close">
          <use xlink:href="{{ site.theme.link }}/frontend/icons/icons.svg#icon-close"></use>
        </svg>
      </div>
        <div class="modal-content">
          <h2>Send Inquiry</h2>
          <p class="modal-window__text">Please kindly note, that this contact form is only for virtual reality training inquiries.
          In case you are interested in other offerings by Linde Engineering please visit our global website: <a href="https://www.linde-engineering.com" target="_blank">www.linde-engineering.com</a>.
          General information about our leading global industrial gases and engineering company,
          Linde plc, you can find here: <a href="https://www.linde.com" target="_blank">www.linde.com</a>.</p>
            {% include "templates/partials/contact-form.twig" %}  
        </div>


    </div>
  </div>

  <!-- Cookies -->
  <div class="cookie" style="display: none">
    <div class="container">
      <div class="row">
        <div class="col-12 col-xl-9">
          <h2>Cookie Preferences</h2>
          <p>By clicking “Accept All Cookies”, you agree to the storing of cookies and similar technologies on your device to enhance site navigation, analyze site usage, offer certain functionalities and assist in our marketing efforts. Strictly necessary cookies are always active. You can read more about our policy in the <br /><a href="{{ data_protection_page_link }}">Privacy Policy.</a>.
          </p>
        </div>
        <div class="col-12 col-xl-3 btn-col">
          <div class="inline-buttons">
            <button class="btn btn--hollow small text-dark acceptNecessaryCookies">Reject</button>
            <button class="btn btn--gradient-small acceptAllCookies">Accept All Cookies</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ function('wp_footer') }}
</body>
</html>