{% extends "base.html.j2" %}

{% block page_content %}
<div class="container">
  <div class="row">
    <div class="col s12">
      <h1 id="title">{{ title }}</h1>
    </div>
    <div class="col s12">
      <div class="switch">
        <label>
          DE
          <input type="checkbox" id="terms-of-use-page-switch">
          <span class="lever"></span>
          EN
        </label>
      </div>
      <br>
    </div>
    <div class="terms-of-use-page-content hide">
      {% include "main/terms_of_use_en.html.j2" %}
    </div>
    <div class="terms-of-use-page-content">
      {% include "main/terms_of_use_de.html.j2" %}
    </div>
  </div>
</div>
{% endblock page_content %}

{% block scripts %}
{{ super() }}
<script>
  let languagePageSwitch = document.querySelector('#terms-of-use-page-switch');
  let termsOfUsePageContent = document.querySelectorAll('.terms-of-use-page-content');
  languagePageSwitch.addEventListener('change', function() {
    termsOfUsePageContent.forEach(content => {
      content.classList.toggle('hide');
    });
  });
</script>
{% endblock scripts %}