{% extends "page-twocol.html" %}
{% load icanhaz %}
{% load kegweblib %}

{% block kb-extrajs %}
{% icanhaz "systemevent" %}
{% icanhaz "systemevent_drink_poured" %}
{% icanhaz "systemevent_list" %}
{% icanhaz "systemevent_keg_started" %}
{% icanhaz "systemevent_keg_ended" %}
  <script type="text/javascript">
    var kbapp = angular.module('KegwebApp', ['ngSanitize', 'ngResource', 'kbNgFilters']);

    kbapp.filter('temperature', function() {
      return function (input) {
        if ('c' == '{{ kbsite.settings.temperature_display_units }}') {
          return input.toFixed(1) + "&deg; C";
        }
        return (input * 1.8000 + 32).toFixed(1) + "&deg; F";
      }
    });

    kbapp.controller('TapListController', function($scope) {
      $scope.taps = {{ initial_taps|safe }};
    });

    function TapListController($scope) {
      $scope.taps = {{initial_taps|safe}};
    }

    $(document).ready(function() {

      // Bootstrap recent drinking sessions.
      window.app.drinkingSessions.add({{initial_sessions|safe}});

      // Bootstrap recent system events.
      window.app.systemEvents.add({{initial_events|safe}});

      // Start polling refresh loop.
      window.app.refresh();

    });
  </script>
{% endblock %}
{% block bodyattrs %}ng-app="KegwebApp"{% endblock %}

{% block col-1 %}

{% if have_taps %}
{% verbatim %}
<div ng-controller="TapListController" class="ng-cloak">

  <div ng-repeat="tap in taps">
    <div class="kb-tapbox clickable" id="keg-snapshot-{{ tap.id }}"
        data-href="{{tap.current_keg.url}}">
      <div class="row-fluid">
        <div class="span3">
            <img ng-show="tap.current_keg.type.image.url"
                class="tap-snapshot-image" ng-src="{{ tap.current_keg.type.image.url }}">
            <img ng-hide="tap.current_keg.type.image.url"
                class="tap-snapshot-image" {% endverbatim %}ng-src="{{ STATIC_URL }}images/kegbot-unknown-square.png"{% verbatim %}>
        </div>

        <div class="span9">
          <h2>
            {{ tap.current_keg.type.name }}
            <small>{{ tap.name }}</small>
          </h2>

          <ul class="badge-list">
            <li>
            <h2 ng-bind-html="tap.current_keg.size_volume_ml -
              tap.current_keg.volume_ml_remain | volume"></h2>
              <small>Poured</small>
            </li>
            <li>
              <h2 ng-bind-html="tap.current_keg.volume_ml_remain | volume"></h2>
              <small>Remaining</small>
            </li>

            <li ng-show="tap.last_temperature.temperature_c">
              <h2 ng-bind-html="tap.last_temperature.temperature_c|temperature"></h2>
              <small>Temperature</small>
            </li>
          </ul>

        </div>
      </div> <!-- /row-fluid -->

    </div>
  </div> <!-- /ng-repeat -->
</div>
{% endverbatim %}
{% else %}

<div class="alert alert-info">
  <h2>No Kegs on Tap</h2>
  <p>
    It might be time for a beer run.
    {% if user.is_staff %}
    (Want to <a href="{% url "kegadmin-taps" %}">tap a keg</a>?)
    {% endif %}
  </p>
</div>

{% endif %}

{% if sessions %}

{% if current_session %}
  <p class="lead">
    Now Drinking
    <small>(<a href="{{ current_session.get_absolute_url}}">details</a>)</small>
  </p>
  {% with current_session.events.short_timeline as events %}
  {% include 'kegweb/includes/timeline.html' %}
  {% endwith %}
{% elif last_session %}
  <p class="lead">
    Last Session
    <small>(ended <a href="{{ last_session.get_absolute_url}}">{% timeago last_session.end_time %}</a>)</small>
  </p>
  {% with last_session.events.short_timeline as events %}
  {% include 'kegweb/includes/timeline.html' %}
  {% endwith %}
{% endif %}
<div class="well">
  See <a href="{% url "kb-sessions" %}">all sessions</a>.
</div>
{% endif %}

{% endblock col-1 %}

{% block col-2 %}
{% if have_events %}
<div class="kb-contentbox">
  <h2>Recent Activity</h2>
  <div id="kb-system-events">
  </div>
</div>
{% else %}
<div class="alert">
  <h2>No Activity</h2>
  <p>
    Everything feels so fresh.
  </p>
</div>
{% endif %}
{% endblock col-2 %}
