{% if include.translate_langs %}

{% assign translate_langs = include.translate_langs %}

{% endif %}

<div id=“google_translate_element” style=“display: none;”> </div>

<span class=“ct-language”>

<ul class="list-unstyled ct-language-dropdown">
  {% for item in translate_langs %}
    <li>
      <a href="#" class="lang-select" data-lang="{{ item.lang }}">
        {% if item.img %}
        <img src="{{ item.img }}" title="{{ item.text }}">
        {% else %}
          {{ item.text }}
        {% endif %}
      </a>
    </li>
  {% endfor %}
</ul>

</span>

<script type=“text/javascript”> function googleTranslateElementInit() {

new google.translate.TranslateElement({
  pageLanguage: '',
  autoDisplay: false,
  layout: google.translate.TranslateElement.InlineLayout.VERTICAL
}, 'google_translate_element');

function restoreLang() {
  var iframe = document.getElementsByClassName('goog-te-banner-frame')[0];
  if (!iframe) return;

  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  var restore_el = innerDoc.getElementsByTagName("button");

  for (var i = 0; i < restore_el.length; i++) {
    if (restore_el[i].id.indexOf("restore") >= 0) {
      restore_el[i].click();
      var close_el = innerDoc.getElementsByClassName("goog-close-link");
      close_el[0].click();
      return;
    }
  }
}

function triggerHtmlEvent(element, eventName) {
  var event;
  if (document.createEvent) {
    event = document.createEvent('HTMLEvents');
    event.initEvent(eventName, true, true);
    element.dispatchEvent(event);
  } else {
    event = document.createEventObject();
    event.eventType = eventName;
    element.fireEvent('on' + event.eventType, event);
  }
}

var googleCombo = document.querySelector("select.goog-te-combo");
var langSelect = document.querySelector('.ct-language');
langSelect.addEventListener('click', function(event) {
  if (!event.target) {
    return;
  }

  var selected = document.querySelector('.ct-language .ct-language-selected');
  if (selected) {
    selected.classList.remove('ct-language-selected');
  }

  var target = event.target;
  while (target && target !== langSelect ) {
    if (target.matches('.lang-select')) {
      break;
    }
    target = target.parentElement;
  }

  if (target && target.matches('.lang-select')) {
    var lang = target.getAttribute('data-lang');
    if (googleCombo.value == lang) {
      restoreLang();
    } else {
      target.parentElement.classList.add('ct-language-selected');
      googleCombo.value = lang;
      triggerHtmlEvent(googleCombo, 'change');
    }
  }

  event.preventDefault();
});

} </script>

<script type=“text/javascript” src=“//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>