{% extends "layout.html.twig" %}

{% block title %}Job group - Self service{% endblock %}

{% block body %}
    <div class="container-fluid no-padding">
        {# NAVS #}
        <div class="row b-margin">
            <div class="col-sm-12">
                <ul class="nav nav-pills nav-justified">
                    <li class="active"><a href="{{ path('self_advertiser_jobgroup_list', {'id': advertiser.id}) }}">My job groups</a></li>
                    <li><a href="{{ path('self_advertiser_jobgroup_jobs', {'id': advertiser.id}) }}">My jobs</a></li>
                </ul>
            </div>
        </div>

        <div class="row b-margin">
            <div class="col-sm-6">
                <h3><strong>Create a job group</strong> <a href="{{ path('self_advertiser_jobgroup_new', {'id': advertiser.id}) }}" class="btn btn-primary" title="New job group"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></h3>
            </div>
        </div>

        <div class="row b-margin">
            <div class="col-sm-12">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover table-striped">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Description</th>
                            <th>Jobs</th>
                            <th>Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for jobgroup in jobgroups %}
                            <tr>
                                <td><a href="{{ path('self_advertiser_jobgroup_edit', {'advertiser': advertiser.id, 'jobgroup': jobgroup.id}) }}">{{ jobgroup.name }}</a></td>
                                <td>{{ jobgroup.description }}</td>
                                <td>{{ jobgroup.jobs }} ({{ jobgroup.percentJobs|number_format(0) }}&percnt;)</td>
                                <td>
                                    <a class="btn btn-primary btn-xs" data-group="{{ jobgroup.id }}" name="btn-histo" title="Show Histo">
                                        <span class="glyphicon glyphicon-time" aria-hidden="true"></span>
                                    </a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="jobgroup-modal" tabindex="-1" role="dialog" aria-labelledby="jobgroupmodal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <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>
                    <h3 class="modal-title" id="jobgroupmodal">Job Group history</h3>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block specificJS %}
    <script>
        $(document).ready(function () {

            $('[name=btn-histo]').click(function(e){
                var idJg = this.dataset.group;
                e.preventDefault();
                $('.loader-container').fadeIn(150);
                $.ajax({
                    method: "POST",
                    url: "{{ path('logui_details') }}",
                    data: { type: 'jobgroup', id: idJg }
                }).done(function(data) {
                    $('#jobgroup-modal .modal-body').html(data);
                    $('#jobgroup-modal').modal('show');
                }).always(function () {
                    $('.loader-container').fadeOut(150);
                });
            });
        });
    </script>
{% endblock %}