{% extends 'qcg/base.html' %}

{% load staticfiles %}

{% block extra_css %}
    <link href="{% static 'qcg/treegrid/css/jquery.treegrid.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>
        $(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');
                }
            });


        });
    </script>
{% endblock %}

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

    <form class="row form-inline">
        <div class="col-md-9 col-md-offset-1">
            <div class="form-group">
                <label class="sr-only" for="search">Szukaj w opisie lub uwagach</label>
                <input type="text" class="form-control" id="search" placeholder="Szukaj w opisie lub uwagach">
            </div>
            <div class="form-group">
                <label class="sr-only" for="status">Status</label>
                <select class="form-control" id="status">
                  <option>Wybierz stan</option>
                  <option>PENDING</option>
                  <option>RUNNING</option>
                  <option>FAILED</option>
                  <option>FINISHED</option>
                </select>
            </div>
            <div class="form-group">
                <label class="sr-only" for="cluster">Klaster</label>
                <select class="form-control" id="cluster">
                  <option>Wybierz klaster</option>
                  <option>Inula</option>
                  <option>Galera</option>
                  <option>Hydra</option>
                  <option>Zeus</option>
                </select>
            </div>
        </div>
        <div class="col-md-1">
            <button type="submit" class="btn btn-default">Filtruj</button>
        </div>
    </form>

    <hr />

    <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>
            <tr class="treegrid-1">
                <td>
                    <a href="{% url 'job' %}">
                        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                    </a>
                </td>
                <td>urban</td>
                <td>04.07.13 17:03</td>
                <td></td>
                <td></td>
                <td>PENDING</td>
                <td>hydra</td>
                <td></td>
            </tr>
            <tr class="treegrid-2">
                <td>
                    <a href="{% url 'job' %}">
                        <span class="glyphicon glyphicon-folder-close" aria-hidden="true"></span>
                    </a>
                </td>
                <td>urban</td>
                <td>04.07.13 17:03</td>
                <td></td>
                <td></td>
                <td>RUNNING</td>
                <td>inula</td>
                <td></td>
            </tr>
            <tr class="treegrid-3 treegrid-parent-2">
                <td>
                    <a href="{% url 'job' %}">
                        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                    </a>
                </td>
                <td>urban</td>
                <td>04.07.13 17:03</td>
                <td></td>
                <td></td>
                <td>FINISHED</td>
                <td>inula</td>
                <td></td>
            </tr>
            <tr class="treegrid-4">
                <td>
                    <a href="{% url 'job' %}">
                        <span class="glyphicon glyphicon-file" aria-hidden="true"></span>
                    </a>
                </td>
                <td>urban</td>
                <td>04.07.13 17:03</td>
                <td></td>
                <td></td>
                <td>CANCELED</td>
                <td>inula</td>
                <td></td>
            </tr>
        </tbody>
    </table>

    <nav class="text-center">
        <ul class="pagination">
            <li>
                <a href="#" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li>
                <a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

{% endblock container %}