{% extends "base.html" %}

{% load i18n static %}

{% block extracss %}
    <meta name="turbolinks-cache-control" content="no-preview">
{% endblock %}

{% block content %}
    <div style="">
    <div class="alert alert-danger" style="width: 15%; float: left; margin: 1%;">
    <strong>Lots déjà offerts :</strong>
    <ul>
        {% for reward in old_rewards %}
            <li><strong>{{ reward.name }} :</strong> remporté par {{ reward.rewarded_by.note }} (ticket n° {{ reward.rewarded_by.number }})</li>
        {% endfor %}
    </ul>
    </div>

    <div class="alert alert-warning" style="width: 30%; float: left; margin: 1%;">
    <strong>Lot précédent :</strong><br />
        <strong>{{ previous_reward.name }} :</strong> remporté par {{ previous_reward.rewarded_by.note }}
        (ticket n° {{ previous_reward.rewarded_by.number }})<br />

    <img src="{{ previous_reward.image.url }}" alt="{{ previous_reward.name }}" style="width: 100%;" />
    </div>

    <div class="alert alert-info" style="width: 30%; float: left; margin: 1%;">
    <strong>Lot suivant :</strong><br />
    <strong>{{ current_reward.name }}</strong><br />

    <img src="{{ current_reward.image.url }}" alt="{{ previous_reward.name }}" style="width: 100%;" />
    </div>

    <div class="alert alert-success" style="width: 15%; float: left; margin: 1%;">
    <strong>Lots à venir :</strong>
    <ul>
        {% for reward in next_rewards %}
            <li><strong>{{ reward.name }}</strong></li>
        {% endfor %}
    </ul>
    </div>
    </div>
{% endblock %}

{% block extrajavascript %}
<script>
var reloadWithTurbolinks = (function () {
  var scrollPosition

  function reload () {
    scrollPosition = [window.scrollX, window.scrollY]
    Turbolinks.visit(window.location.toString(), { action: 'replace' })
  }

  document.addEventListener('turbolinks:load', function () {
    if (scrollPosition) {
      window.scrollTo.apply(window, scrollPosition)
      scrollPosition = null
    }
  })

  return reload
})()

setTimeout(function(){ reloadWithTurbolinks(); }, 2000);
</script>
{% endblock %}