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

{% block extra_js %}
    <script>
        $(function() {
            $('.delete-template').on('click', function() {
                var $this = $(this),
                    $modal = $('#delete-modal');

                $modal.attr('action', $this.data('url'));
                $modal.find('em').text($this.data('name'));
            });
        });
    </script>
{% endblock %}

{% block container %}
    <h1 class="page-header">{% block title %}Szablony zadania{% endblock %}</h1>

    {% if templates %}
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="text-right" style="width: 40px">#</th>
                    <th>Nazwa</th>
                    <th style="width: 200px">Data utworzenia</th>
                    <th style="width: 200px">Data modyfikacji</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for template in templates %}
                    <tr>
                        <td class="text-right">{{ forloop.counter }}</td>
                        <td><a href="{{ template.get_absolute_url }}">{{ template.name }}</a></td>
                        <td>{{ template.created }}</td>
                        <td>{{ template.updated }}</td>
                        <td class="text-right">
                            <button class="btn btn-xs btn-danger delete-template" title="Usuń"
                                    data-url="{% url 'template_delete' template.id %}"
                                    data-name="{{ template.name }}"
                                    data-toggle="modal" data-target="#delete-modal">
                                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div id="no-items" class="alert alert-info">
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
            Brak zapisanych szablonów zadań
        </div>
    {% endif %}

    <form id="delete-modal" action="" method="post" class="modal fade" tabindex="-1"
          role="dialog" aria-labelledby="delete-modal-label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="delete-modal-label">Usuwanie szablonu</h4>
                </div>
                <div class="modal-body">
                    {% csrf_token %}
                    <p>Czy na pewno usunąć szablon <em></em>?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Anuluj</button>
                    <button type="submit" class="btn btn-danger">Usuń</button>
                </div>
            </div>
        </div>
    </form>

{% endblock %}