{% extends "skel.html" %}
{% load kegweblib %}

{% block title %}{{ kbsite.title }} (Fullscreen Mode){% endblock %}

{% block kb-extracss %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}lib/slick/slick.css" media="screen" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap-cyborg.css" media="screen" />

<style>

body {
	background-color: #000;
	background-image: url('{{ STATIC_URL }}images/chalkboard-bg.jpg') center center no-repeat;
  background-size: cover;
  color: #eee;
}

.establishment-logo {
	position:fixed;
	bottom:0;
	left:0;
	margin-left:15px;
	height:7%;
	min-height:7%;
	max-height:7%;
	width:100%;
	color:#ffffff;
	font-size:48px;
}

.kegbot-logo {
	position:fixed;
	bottom:0;
	right:0;
	height:7%;
	min-height:7%;
	max-height:7%;
	width:100%;
	margin-right:15px;
	margin-bottom:15px;
}

img.taplist-foot-logos {
	height:100%;
	min-height:100%;
	max-height:100%;
}


</style>
{% endblock %}

{% block body %}

<div class="main">
<div class="wrapper">

  <div class="container">

    <div class="row-fluid">
    <div class="span12">
    	<center>
    		<img src="{{ STATIC_URL }}images/whats-on-tap.png">
      </center>
    </div>
    </div>

    <div class="tap-carousel">
      {% for page in pages %}
        <div>

          {% for tap in page %}
            {% with tap.current_keg as keg %}
            {% with keg.type as beverage %}

            <div class="row-fluid">
    
            <div class="span2">
              <img src="{{ keg.get_illustration }}" style="padding-bottom: 20px;">
            </div>

            <div class="span2">
              <center>
              {% if keg.type.picture %}
                <img class="tap-snapshot-image" src="{{ keg.type.picture.resized.url }}">
              {% else %}
                <img class="tap-snapshot-image" src="{{ STATIC_URL }}images/kegbot-unknown-square.png">
              {% endif %}
                <span class="label label-info">{% volume keg.remaining_volume_ml %} remaining</span>
              </center>
            </div>

            <div class="span8">
              <h2>
                {{ beverage.name }} <small>by {{ beverage.producer }}</small>
              </h2>
              {% if beverage.description %}
                <p>
                  <em>{{ beverage.description }}</em>
                </p>
              {% endif %}
            </div>
            </div>

            {% endwith %}
            {% endwith %}
        {% endfor %} <!-- /tap in row -->
    
      </div> <!-- /page -->

    {% endfor %}

    </div> <!-- /tap-carousel -->
  </div> <!-- /container-fluid -->

</div> <!-- /wrapper -->
</div> <!-- /main -->

{% endblock %}

{% block kb-extrajs %}
<script type="text/javascript" src="{{ STATIC_URL }}lib/slick/slick.min.js"></script>

<script type="text/javascript">

  // Activate carousel.
  $(document).ready(function(){
      $('.tap-carousel').slick({
          autoplay: true,
          autoplaySpeed: 10000,
          arrows: false,
          dots: true,
          infinite: true,
          pauseOnHover: false,
      });
  });

  // Auto-reload when something happens.
  var lastEvent = null;
  var queryInterval = 10000;

  function fetchEvents() {
    $.getJSON('/api/v1/events/', function(events) {
      if (events && events.objects && events.objects.length > 0) {
        var latest = events.objects[0];
        if (lastEvent == null || lastEvent.id != latest.id) {
          console.log('Events updated, latest=' + latest.id);
          var prevLast = lastEvent;
          lastEvent = latest;
          if (prevLast != null) {
            location.reload(true);
          }
        }
      } else {
        console.log('No events.');
      }
    });
    setTimeout(fetchEvents, queryInterval);
  }

  $(document).ready(function(){
    fetchEvents();
  });

</script>
{% endblock %}
