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

{% block javascript %}
    <script language="javascript" type="text/javascript" src="{% static "js/bootstrap-datepicker.js" %}"></script>
{% endblock javascript %}

{% block css %}
    <link href="{% static "css/datepicker.css" %}" rel="stylesheet">
{% endblock css %}

{% block content %}
    <div id="show-header">
        <h1>{% blocktrans with service_name=service.name %}Full history of: {{ service_name }}{% endblocktrans %}</h1>

        <div id="show-user-menu">
            <a href="/show/{{ service.id }}" class="btn"><i class="icon-chevron-left"></i> {% trans "Service details" %}</a>
            <a href="/admin/services/service/{{ service.id }}" class="btn"><i class="icon-pencil"></i> {% trans "Edit service" %}</a>
        </div>

        <div class="clear"></div>
    </div>

    <div class="row-fluid">
        <div class="span12 well">
            <form class="form-inline" method="get" action="/history/{{ service.id }}">
                <div class="control-group{% if form.start_date.errors %} error{% endif %}" style="float: left; margin-right: 10px;">
                    <div class="input-append">
                        <label>{{ form.start_date.label }}</label>
                        <div class="date" id="start_date" data-date="{{ form.start_date.value }}" data-date-format="yyyy-mm-dd">
                            <input type="text" name="{{ form.start_date.name }}" value="{{ form.start_date.value }}">
                            <span class="add-on"><i class="icon-th"></i></span>
                            {% for e in form.start_date.errors %}
                                <div class="help-block">{{ e }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="control-group{% if form.start_time.errors %} error{% endif %}" style="float: left; margin-right: 10px;">
                    <div class="input-append">
                        <label>{{ form.start_time.label }}</label>
                        <div>
                            <input type="text" name="{{ form.start_time.name }}" value="{{ form.start_time.value }}">
                            {% for e in form.start_time.errors %}
                                <div class="help-block">{{ e }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="control-group{% if form.stop_date.errors %} error{% endif %}" style="float: left; margin-right: 10px;">
                    <div class="input-append">
                        <label>{{ form.stop_date.label }}</label>
                        <div class="date" id="stop_date" data-date="{{ form.stop_date.value }}" data-date-format="yyyy-mm-dd">
                            <input type="text" name="{{ form.stop_date.name }}" value="{{ form.stop_date.value }}">
                            <span class="add-on"><i class="icon-th"></i></span>
                            {% for e in form.stop_date.errors %}
                                <div class="help-block">{{ e }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="control-group{% if form.stop_time.errors %} error{% endif %}" style="float: left; margin-right: 10px;">
                    <div class="input-append">
                        <label>{{ form.stop_time.label }}</label>
                        <div>
                            <input type="text" name="{{ form.stop_time.name }}" value="{{ form.stop_time.value }}">
                            {% for e in form.stop_time.errors %}
                                <div class="help-block">{{ e }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <div class="control-group">
                    <button style="margin-top: 23px;" type="submit" class="btn btn-primary"><i class="icon-refresh icon-white"></i> {% trans "Refresh" %}</button>
                </div>
            </form>
        </div>
    </div>

    {% if history %}
        {% include "boards/history_table.html" %}
    {% endif %}

    <script language="javascript" type="text/javascript">
        $(document).ready(function() {
            $('#start_date').datepicker({format: 'yyyy-mm-dd'});
            $('#stop_date').datepicker({format: 'yyyy-mm-dd'});
        });
    </script>
{% endblock %}