{% extends "base.html" %}

{% load i18n static %}

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

{% block contenttitle %}
    <h1>
        <img style="width: 200px;" src="https://perso.crans.org/ynerant/Saperlistpopette.jpeg" />
            Tombola Saper[list]popette <span style="color: red;">♦</span>️♠️<span style="color: red;">♥</span>️♣
    </h1>
{% endblock %}

{% block content %}
    <div style="width: 100%;">
    <div class="alert alert-danger" style="width: 17%; float: left; margin: 0.5%;">
    <h3>Lots déjà offerts :</h3>
    <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: 31%; float: left; margin: 0.5%;">
    <h3>Lot précédent :</h3><br />
        {% if previous_reward %}
            <strong>&bullet; {{ previous_reward.name }} :</strong> remporté par {{ previous_reward.rewarded_by.note }}
            (ticket n° {{ previous_reward.rewarded_by.number }})<br />
        {% else %}
            <h5>&bullet; <img src="https://cdn.pixabay.com/photo/2012/04/16/13/51/triangle-36068_960_720.png" style="height: 24px;" /> Aucun lot n'a encore été remporté.</h5>
        {% endif %}

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

    <div class="alert alert-info" style="width: 31%; float: left; margin: 0.5%;">
    <h3>Lot suivant :</h3><br />
        {% if current_reward %}
            <h5>&bullet; {{ current_reward.name }}</h5><br />
            <img src="{{ current_reward.image.url }}" alt="{{ previous_reward.name }}" style="width: 100%;" />
        {% else %}
            <h5>&bullet; <img src="https://cdn.pixabay.com/photo/2012/04/16/13/51/triangle-36068_960_720.png" style="height: 24px;" /> Tous les lots ont déjà été distribués !</h5>
        {% endif %}
    </div>

    <div class="alert alert-success" style="width: 17%; float: left; margin: 0.5%;">
    <h3>Lots à venir :</h3>
    <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 %}