{% extends '::base_admin.html.twig' %}


    {% block body -%}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-lg-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>Editable Table in- combination with jEditable</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li>
                                    <a href="#">Config option 1</a>
                                </li>
                                <li>
                                    <a href="#">Config option 2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="">
                                                            <a href="{{ path('news-services_new') }}" class="btn btn-primary ">
                                    Create a new entry
                                </a>
                                                    </div>
                        <table class="table table-striped table-bordered table-hover " id="editable" >
                        <thead>
                        <tr>                                                                    <th>Id</th>
                                                                                                                                                                                                                                
                            <th class=" no-link last"><span class="nobr">Actions</span></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for entity in entities %}
                        <tr class="gradeA">                                    <td class=" ">
                                        {{ entity.id }}
                                    </td>
                                                            <td>                            <a href="{{ path('news-services_edit', { 'id': entity.id }) }}" class="btn btn-success"><i class="fa fa-pencil"></i> edit</a>
                                                
                            </td>
                        </tr>
                        {% endfor %}
                        </tbody>
                        <tfoot>
                        <tr>                                                                    <th>Id</th>
                                                                                                                                                                                                                                
                            <th class=" no-link last"><span class="nobr">Actions</span></th>
                        </tr>
                        </tfoot>
                    </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}
    {% block last_javascript %}
    <script src='{{ asset('includes/js/plugins/dataTables/jquery.dataTables.js') }}'></script>
    <script src='{{ asset('includes/js/plugins/dataTables/dataTables.bootstrap.js') }}'></script>
    <script src='{{ asset('includes/js/plugins/dataTables/dataTables.responsive.js') }}'></script>
    <script src='{{ asset('includes/js/plugins/dataTables/dataTables.tableTools.min.js') }}'></script>
    <script src='{{ asset('includes/js/inspinia.js') }}'></script>
    <script src='{{ asset('includes/js/plugins/pace/pace.min.js') }}'></script>
    <script>
        $(document).ready(function() {
            $('.dataTables-example').dataTable({
                responsive: true,
                'dom': 'T<'clear'>lfrtip',
                'tableTools': {
                    'sSwfPath': 'js/plugins/dataTables/swf/copy_csv_xls_pdf.swf'
                }
            });

            /* Init DataTables */
            var oTable = $('#editable').dataTable();

            /* Apply the jEditable handlers to the table */
            oTable.$('td').editable( '../example_ajax.php', {
                'callback': function( sValue, y ) {
                    var aPos = oTable.fnGetPosition( this );
                    oTable.fnUpdate( sValue, aPos[0], aPos[1] );
                },
                'submitdata': function ( value, settings ) {
                    return {
                        'row_id': this.parentNode.getAttribute('id'),
                        'column': oTable.fnGetPosition( this )[2]
                    };
                },

                'width': '90%',
                'height': '100%'
            } );


        });

        function fnClickAddRow() {
            $('#editable').dataTable().fnAddData( [
                'Custom row',
                'New row',
                'New row',
                'New row',
                'New row' ] );

        }
    </script>
{% endblock %}