{% extends 'VGMWOBundle::layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-datetimepicker.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/jquery-ui.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/dataTables.jqueryui.css') }}" rel="stylesheet" media="screen">
{% endblock %}
{% block content%}
    <div class="container" style="min-height: 500px; margin-top: 1.5vmin;">
        <div class="panel-group" id="active_accordion"
             data-bind="foreach: units">
            <div class="panel panel-default">
                <div class="panel-heading container-fluid"
                     style="cursor: pointer;"
                     data-toggle="collapse"
                     data-bind="attr:{href: '#' + id}">
                    <div style="text-decoration: underline; font-size: 2vmin;"
                         data-bind="text: name">
                    </div>
                </div>
                <div class="panel-collapse collapse in"
                     data-bind="attr:{id: id}">
                    <div class="panel-body">
                        <div class="col-lg-12">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a data-bind="attr:{href: '#open' + id}" role="tab" data-toggle="tab">Open Tasks</a></li>
                                <li><a data-bind="attr:{href: '#dismissed' + id}" role="tab" data-toggle="tab">Finished Tasks</a></li>
                                <li><a data-bind="attr:{href: '#finished' + id}" role="tab" data-toggle="tab">Dismissed Tasks</a></li>
                            </ul>

                            <!-- Tab panes -->
                            <div class="tab-content">
                                {% block open_tasks %}
                                    {% include "VGMWOBundle:Planning:open_tasks.html.twig" %}
                                {% endblock open_tasks %}
                                <div class="tab-pane"
                                     data-bind="attr:{id: 'dismissed' + id}">
                                    <div class="col-lg-12">
                                        <a style="display: inline-block; margin-left: 1vmin; color: #428bca;"
                                           href="#">
                                            <span class="glyphicon glyphicon-plus"></span>
                                        </a>
                                    </div>
                                 </div>
                                <div class="tab-pane"
                                     data-bind="attr:{id: 'finished' + id}">
                                    <div class="col-lg-12">
                                        <a style="display: inline-block; margin-left: 1vmin; color: #428bca;"
                                           href="#">
                                            <span class="glyphicon glyphicon-plus"></span>
                                        </a>
                                    </div>
                                 </div>
                            </div>
                            <div class="col-lg-12">

                            </div>
                        </div>
                        {#<div class="col-lg-12" style="margin-top: 10px;">
                            <h4 style="text-decoration: underline">Sub Entities</h4>
                            <div class="panel-group"
                                 data-bind="foreach: units,
                                            attr:{id: 'sub_units' + id}">
                                <div class="panel panel-default">
                                    <div class="panel-heading container-fluid"
                                         style="cursor: pointer;"
                                         data-toggle="collapse"
                                         data-bind="attr:{href: '#' + id},
                                                    text: name">
                                    </div>
                                    <div class="panel-collapse collapse"
                                         data-bind="attr:{id: id}">
                                        <div class="panel-body">
                                            <div>
                                                My tasks
                                            </div>
                                            <div>
                                                My Sub Units
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>#}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% block task_updater %}
        {% include "VGMWOBundle:Planning:task_updater_panel.html.twig" %}
    {% endblock task_updater %}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/bootstrap-datetimepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/vgmwo/js/customized/Planning/PlanningTasks.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            viewModel.get_tasks();
            loadPageFeatures();
        });
        function getURLGETTasks(){
            var url = "{{ path('task_get_tasks') }}";
            return url;
        }
        // Activates knockout.js
        ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>
{% endblock %}