{% extends 'VGMWOBundle::layout.html.twig' %}
{% block stylesheets %}
    {{ parent() }}
    <link href="{{ asset('bundles/vgmwo/css/bootstrap.min.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/bootstrap-theme.min.css') }}" rel="stylesheet" media="screen">
    <link href="{{ asset('bundles/vgmwo/css/vgm_styles.css') }}" rel="stylesheet" media="screen">
    <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">
    <style>
        .jumbotron {display:none;}
    </style>
{% endblock %}
{% block content%}
    <div class="container" style="min-height: 500px; margin-top: 1.5vmin;">
        <div style="margin-bottom: 10px;">
            <a href="#" data-bind="click: add_area">
                Add Area
                <span class="glyphicon glyphicon-plus"></span>
            </a>
        </div>
        <div class="panel-group" id="active_accordion"
             data-bind="foreach: areas">
            <div class="panel panel-default">
                <div class="panel-heading container-fluid"
                     style="cursor: pointer;">
                    <!-- ko if: editable() -->
                        <div style="text-decoration: underline; font-size: 2vmin;"
                             class="col-lg-3">
                            <input class="form-control for-desktop" data-bind="value: name">
                        </div>
                    <!-- /ko -->
                    <!-- ko if: !editable() -->
                        <div style="text-decoration: underline; font-size: 2vmin;"
                             data-bind="text: name">
                        </div>
                    <!-- /ko -->
                    <a data-toggle="collapse" data-parent="#accordion"
                       data-bind="attr:{href: '#area_' + id}, click: collapse"
                       class="pull-right">
                        <span data-bind="attr:{class: !collapsed() ? 'glyphicon glyphicon-chevron-down'
                                                : 'glyphicon glyphicon-chevron-up'}"></span>
                    </a>
                </div>
                <div data-bind="attr:{id: 'area_' + id},
                    attr:{class: !collapsed() ? 'panel-collapse collapse' : 'panel-collapse collapse in'}">
                    <div class="panel-body">
                        <div class="col-lg-12">
                            <a href="#" data-bind="click: add_work" class="pull-right">
                                Add work
                                <span class="glyphicon glyphicon-plus"></span>
                            </a>
                        </div>
                        <div class="table-responsive col-lg-12"
                             style="padding-left: 0px; padding-right: 0px;">
                            <table class="table table-striped table-hover display"
                                   cellspacing="0"
                                   id="workorders-list">
                                <thead>
                                    <tr>
                                        <!-- Code column -->
                                        <th class="col-xs-1">Code</th>
                                        <!-- Work column -->
                                        <th class="col-md-10">Work</th>
                                        <!-- Activation column -->
                                        <th class="col-md-1">Status</th>
                                    </tr>
                                </thead>
                                <tbody data-bind="foreach: works">
                                    <tr class="locked">
                                        <td>
                                            <div data-bind="text: code"></div>
                                        </td>
                                        <td>
                                            <div data-bind="text: name"></div>
                                        </td>
                                        <td>
                                            action
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% 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/Areas/Areas.js') }}"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            viewModel.get_areas();
            loadPageFeatures();
        });
        function getURLGETAreas(){
            var url = "{{ path('work_areas_get_areas') }}";
            return url;
        }
        // Activates knockout.js
        ko.applyBindings(viewModel, document.getElementById("content-body"));
    </script>
{% endblock %}