{% extends 'qcg/base.html' %}
{% load staticfiles bootstrap3 %}

{% block extra_css %}
    <link href="{% static 'qcg/treegrid/css/jquery.treegrid.css' %}" rel="stylesheet">
    <link href="{% static 'qcg/daterangepicker/daterangepicker-bs3.css' %}" rel="stylesheet" />

    <style>
        .treegrid-expander {
            opacity: 0.5;
        }

        .treegrid-expander:hover {
            opacity: 1;
        }
    </style>
{% endblock %}

{% block extra_js %}
    <script src="{% static 'qcg/treegrid/js/jquery.treegrid.js' %}"></script>
    <script src="{% static 'qcg/daterangepicker/moment.min.js' %}"></script>
    <script src="{% static 'qcg/daterangepicker/daterangepicker.js' %}"></script>

    <script>
        $(function() {
            $('.tree').treegrid({
                initialState: 'collapsed',
                expanderExpandedClass: 'glyphicon glyphicon-chevron-down small',
                expanderCollapsedClass: 'glyphicon glyphicon-chevron-right small',
                onChange: function() {
                    $(this).find('.glyphicon-folder-open,.glyphicon-folder-close')
                            .toggleClass('glyphicon-folder-open').toggleClass('glyphicon-folder-close');
                }
            });

            $('input[name="submission"],input[name="finish"]').daterangepicker({
                opens: 'center',
                format: 'DD.MM.YYYY',
                ranges: {
                    'Dzisiaj': [moment(), moment()],
                    'Wczoraj': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Ostatnie 7 dni': [moment().subtract(6, 'days'), moment()],
                    'Ostatnie 30 dni': [moment().subtract(29, 'days'), moment()]
                },
                locale: {
                    applyLabel: 'OK',
                    cancelLabel: 'Anuluj',
                    fromLabel: 'Od',
                    toLabel: 'Do',
                    weekLabel: 'T',
                    customRangeLabel: 'Zakres',
                    daysOfWeek: moment.weekdaysMin(),
                    monthNames: ['Sty', 'Lut', 'Mar', 'Kwi', 'Maj', 'Cze', 'Lip', 'Sie', 'Wrz', 'Paź', 'Lis', 'Gru'],
                    firstDay: 1
                }
            });

            $('#toggle-advanced').click(function() {
                if($('#advanced-filters').attr('aria-expanded') == "false")
                    $(this).text('« mniej');
                else
                    $(this).text('więcej »');
            });
        });
    </script>
{% endblock %}

{% block container %}
    <h1 class="page-header">
        {% block title %}Lista zadań{% endblock %}
    </h1>

    <form action=".">
        <div class="row">
            <div class="col-lg-10 col-lg-offset-1">
                <div class="pull-right">
                    <a id="toggle-advanced" href="#advanced-filters" data-toggle="collapse">
                        {% if advanced %}
                            &laquo;&nbsp;mniej
                        {% else %}
                            więcej&nbsp;&raquo;
                        {% endif %}
                    </a>
                    &nbsp;
                    <a href="." class="btn btn-default{% if not filters.data %} disabled{% endif %}">Wyczyść</a>
                    <button type="submit" class="btn btn-default">Filtruj</button>
                </div>
                <div class="btn-toolbar">
                    <div class="btn-group" data-toggle="buttons">
                        {% for choice in filters.status %}
                            <label class="btn btn-default{% if choice.is_checked %} active{% endif %}">
                                <input type="checkbox" name="{{ choice.name }}" value="{{ choice.choice_value }}"
                                       {% if choice.is_checked %}checked{% endif %}> {{ choice.choice_label }}
                            </label>
                        {% endfor %}
                    </div>
                    <div class="btn-group" data-toggle="buttons">
                        {% for choice in filters.host %}
                            <label class="btn btn-default{% if choice.is_checked %} active{% endif %}">
                                <input type="checkbox" name="{{ choice.name }}" value="{{ choice.choice_value }}"
                                       {% if choice.is_checked %}checked{% endif %}> {{ choice.choice_label }}
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
{#        <div id="advanced-filters" class="form-horizontal collapse in" aria-expanded="true" style="margin-top: 10px">#}
{#            <div class="row">#}
{#                {% bootstrap_field filters.keywords layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
{#            </div>#}
{#            <div class="row">#}
{#                {% bootstrap_field filters.status_exact layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
{#            </div>#}
{#            <div class="row">#}
{#                {% bootstrap_field filters.submission layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
{#            </div>#}
{#            <div class="row">#}
{#                {% bootstrap_field filters.finish layout='horizontal' horizontal_label_class='col-md-5' horizontal_field_class='col-md-4' bound_css_class=' ' %}#}
{#            </div>#}
{#        </div>#}
        <div id="advanced-filters" class="form-horizontal collapse{% if advanced %} in" aria-expanded="true"{% else %}" aria-expanded="false"{% endif %} style="margin-top: 10px">
            <div class="row">
                <div class="col-ld-1"></div>
                {% bootstrap_field filters.keywords layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
                {% bootstrap_field filters.status_exact layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
            </div>
            <div class="row">
                <div class="col-ld-1"></div>
                {% bootstrap_field filters.submission layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
                {% bootstrap_field filters.finish layout='horizontal' form_group_class='form-group row col-lg-5 col-md-6' horizontal_label_class='col-md-4' horizontal_field_class='col-md-8' bound_css_class=' ' %}
            </div>
        </div>
    </form>

    <hr />


    <nav class="text-center" style="margin-bottom: 15px">
        <form action="{{ request.path }}" method="get" class="form-inline" role="form" style="display: inline-block">
            <div class="input-group input-group-sm">
                <span class="input-group-btn">
                    {% if page.has_previous %}
                        <a href="{{ request.path }}?page={{ page.previous_page_number }}" class="btn btn-default">
                    {% else %}
                        <a href="#" class="btn btn-default disabled">
                    {% endif %}
                        <span class="glyphicon glyphicon-chevron-left"></span>
                    </a>
                </span>
                <label class="sr-only" for="page">Strona</label>
                <input type="text" class="form-control text-center" id="page" name="page" value="{{ page.number }}" style="width: 50px">
                <span class="input-group-btn">
                    {% if page.has_next %}
                        <a href="{{ request.path }}?page={{ page.next_page_number }}" class="btn btn-default">
                    {% else %}
                        <a href="#" class="btn btn-default disabled">
                    {% endif %}
                        <span class="glyphicon glyphicon-chevron-right"></span>
                    </a>
                </span>
            </div>
        </form>
        &nbsp;z&nbsp;
        <a href="{{ request.path }}?page={{ num_pages }}">{{ num_pages }}</a>
    </nav>

    <table class="table table-hover tree">
        <thead>
            <tr>
                <th style="width: 80px"></th>
                <th>Opis</th>
                <th>Wysłane</th>
                <th>Start</th>
                <th>Koniec</th>
                <th>Status</th>
                <th>Host</th>
{#                <th>Uwagi</th>#}
            </tr>
        </thead>
        <tbody>
            {% regroup page by job as jobs %}

            {% for job in jobs %}
                {% ifequal job.list|length 1 %}
                    {% with job.list.0 as task %}
                        <tr class="treegrid-{{ forloop.counter }}">
                            <td>
                                <a href="{{ task.get_absolute_url }}">
                                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
{#                                    {{ task }}#}
                                </a>
                            </td>
                            <td>{{ task.note }}</td>
                            <td>{{ task.submission_time|timesince }} temu</td>
                            <td>{{ task.start_time|date:"CUSTOM_DATETIME_FORMAT" }}</td>
                            <td>{{ task.finish_time|date:"CUSTOM_DATETIME_FORMAT" }}</td>
                            <td>{{ task.get_status_display }}</td>
                            <td>{{ task.short_host_names|join:', ' }}</td>
                        </tr>
                    {% endwith %}
                {% else %}
                    <tr class="treegrid-{{ forloop.counter }}">
                        <td>
                            <a href="{{ job.grouper.get_absolute_url }}">
                                <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
{#                                {{ job.grouper }}#}
                            </a>
                        </td>
                        <td>{{ job.grouper.note }}</td>
                        <td>{{ job.grouper.submission_time|timesince  }} temu</td>
                        <td>-</td>
                        <td>{{ job.grouper.finish_time|date:"CUSTOM_DATETIME_FORMAT" }}</td>
                        <td>{{ job.grouper.get_status_display }}</td>
                        <td>-</td>
                    </tr>

                    {% for task in job.list %}
                        <tr class="treegrid-{{ forloop.parentloop.counter }}-{{ forloop.counter }} treegrid-parent-{{ forloop.parentloop.counter }}">
                            <td>
                                <a href="{{ task.get_absolute_url }}">
                                    <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
{#                                    {{ task }}#}
                                </a>
                            </td>
                            <td>{{ task.note }}</td>
                            <td>{{ task.submission_time|timesince  }} temu</td>
                            <td>{{ task.start_time|date:"CUSTOM_DATETIME_FORMAT" }}</td>
                            <td>{{ task.finish_time|date:"CUSTOM_DATETIME_FORMAT" }}</td>
                            <td>{{ task.get_status_display }}</td>
                            <td>{{ task.short_host_names|join:', ' }}</td>
                        </tr>
                    {% endfor %}
                {% endifequal %}
            {% endfor %}
        </tbody>
    </table>

    {% if not page %}
        <div class="alert alert-info">Brak elementów</div>
    {% endif %}

    <nav class="text-center">
        <ul class="pagination">
            {% if page.has_previous %}
                <li>
                    <a href="{{ request.path }}?page={{ page.previous_page_number }}" aria-label="Previous">
                    <span aria-hidden="true"><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;poprzednia</span>
                </a>
            {% endif %}
            </li>

            <li{% ifequal page.number 1 %} class="active"{% endifequal %}>
                <a href="{{ request.path }}?page=1">1</a>
            </li>

            {% if pages_range.0 > 2 %}
                <li class="disabled"><span aria-hidden="true"><strong>&hellip;</strong></span></li>
            {% endif %}

            {% for num in pages_range %}
                <li{% ifequal page.number num %} class="active"{% endifequal %}>
                    <a href="{{ request.path }}?page={{ num }}">{{ num }}</a>
                </li>
            {% endfor %}

            <li class="disabled"><span aria-hidden="true"><strong>z</strong></span></li>
            <li><a href="{{ request.path }}?page={{ num_pages }}">{{ num_pages }}</a></li>

            {% if page.has_next %}
                <li>
                    <a href="{{ request.path }}?page={{ page.next_page_number }}" aria-label="Next">
                    <span aria-hidden="true">następna&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></span>
                </a>
            {% endif %}
            </li>
        </ul>
    </nav>

{% endblock container %}