{% 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 class="row-fluid">
          <table class="table table-striped table-hover">
          {% for tap in page %}
            {% with tap.current_keg as keg %}
            {% with keg.type as beverage %}
            <tr>

            <td>
              <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>
            </td>

            <td>
              <h2>
                {{ beverage.name }} <small>by {{ beverage.producer }}</small>
              </h2>
              {% if beverage.description %}
                <p>
                  <em>{{ beverage.description }}</em>
                </p>
              {% endif %}
            </td>

            {% endwith %}
            {% endwith %}
          </tr> <!-- /row -->
        {% endfor %} <!-- /tap in row -->
        </table>
    
      </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">
  $(document).ready(function(){
      $('.tap-carousel').slick({
          autoplay: true,
          autoplaySpeed: 10000,
          arrows: false,
          dots: true,
          infinite: true,
          pauseOnHover: false,
      });
  });
</script>
{% endblock %}