{% extends "home/base.html" %}
{% load staticfiles i18n %}

{% block index_class %}class="active"{% endblock %}
{% block header_content %}
	<div class="jumbotron">
		<div class="container">
			{% if schedule_now %}
				<h1>{% trans "now playing"|upper %}</h1>
				<a href="{% url 'programmes:detail' schedule_now.programme.slug %}">{{ schedule_now.programme.name }}</a>
				<strong>{{start_time|date:"G:i" }} - {{end_time|date:"G:i" }}</strong>
				
				<div class="progress">
				  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100" style="width: {{percentage}}%">
				    <span class="sr-only">{{percentage}}% Complete (success)</span>
				  </div>
				</div>
			{% else %}
				<h1>{% trans "Coming soon"|upper %}</h1>
			{% endif %}
		</div>
	</div>
{% endblock %}
{% block content %}
	<h1>{% trans "playlist"|upper %} {{now|date:"DATE_FORMAT"|upper }}</h1>
	
	<ul class="list-group">
		{% if schedule_now %}
			<li class="list-group-item list-group-item-info">
				<h4><span class="label label-danger">{% trans "Now"|upper %}</span>
				<a href="{% url 'programmes:detail' schedule_now.programme.slug %}">{{ schedule_now.programme.name }}</a></h4>
			</li>
		{% endif %}
			
		{% for schedule, date, episode in next_events %}
			<li class="list-group-item">
			<h4><span class="label label-success">{{date|date:"G:i" }}</span>
			{% if episode%}
				<a href="{% url 'programmes:episode_detail' schedule.programme.slug episode.season episode.number_in_season%}">{{ schedule.programme.name }}</a>
			{% else %}
				<a href="{% url 'programmes:detail' schedule.programme.slug %}">{{ schedule.programme.name }}</a>
			{% endif %}
			</li>
		{% empty %}
			<p>{% trans "Coming soon"|upper %}</p>
		{% endfor %}
	</ul>
{% endblock %}