{% extends request.EXPERIMENTS.layout.value|yesno:"2022/base.html,base/base.html" %}

{% block breadcrumbs %}
  <span>Eksperymenty</span>
{% endblock %}

{% block main %}
{% block body %}
  <img src="https://upload.wikimedia.org/wikipedia/commons/c/c8/MH1Asimulator.JPG" style="width:100%">

  {% for exp in request.EXPERIMENTS.values %}
    {% if exp.switchable or request.user.is_staff %}
    <div class="experiment nice-controls" data-slug="{{ exp.slug }}">
      <span>
        {{ exp.name }}
      </span>
      <button
          {% if exp.value %}
          disabled class="active"
          {% endif %}
          data-value="on">włączony</button>
      <button
          {% if not exp.value %}
          disabled class="active"
          {% endif %}
          data-value="off">wyłączony</button>
    </div>
    {% endif %}
  {% endfor %}
{% endblock %}

{% block extrabody %}
  <style>
   .experiment {
       margin: 1em 0;
       font-size: 1.5em;
   }
   .experiment button {
       margin: 0 1em;
       padding: .5em;
       font-size: 1em;

   }
  </style>
  <script>
   $(".experiment button").click(function() {
       document.cookie = 'EXPERIMENT_' + $(this).parent().data('slug') + '=' + $(this).data('value') + '; path=/; max-age=31536000';
       window.location.reload(true);
   });
  </script>
{% endblock %}
{% endblock %}