{#
Usage:

<b:widget id='Translate1' locked='false' title='Translate' type='Translate' version='2' visible='true'>
  <b:widget-settings>
    <b:widget-setting name='displayMode'>VERTICAL|HORIZONTAL|SIMPLE</b:widget-setting>
  </b:widget-settings>
</b:widget>
#}

<bp:template>
  <b:includable id='main'>
    <h3 class='title'>
      <b:eval expr='data:title ? data:title : "Translate"'/>
    </h3>
    <b:include name='content'/>
  </b:includable>
  <b:includable id='content'>
    <div class='widget-content'>
      <div class='wg-translate'>
        <div id='google_translate_element'/>
      </div>

      {% asset %}
        <script>
        function googleTranslateElementInit() {
          new google.translate.TranslateElement({
            pageLanguage: '<b:eval expr='data:blog.locale.language ?: "auto"'/>',
            autoDisplay: 'true',
            layout: google.translate.TranslateElement.InlineLayout.<data:layout/>
          }, 'google_translate_element');
        }
        </script>
      {% endasset %}
      <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/>
    </div>
  </b:includable>
</bp:template>