{% extends 'Backoffice/base.html.twig' %}

{% block activeLiMap %}class="active"{% endblock %}
{% block activeMap %}class="active"{% endblock %}
{% block body %}
    <link rel="stylesheet" href="{{ asset("assets/Backoffice/js/datatables/datatables.css") }}" type="text/css"/>
    <section class="vbox">
        <section class="scrollable padder">
            <ul class="breadcrumb no-border no-radius b-b b-light pull-in">
                <li><a href=""><i class="fa fa-home"></i> Tableau de board</a></li>
                <li class="active">Map maritimes</li>
            </ul>
            <div class="m-b-md">
                <h3 class="m-b-none">Map maritimes</h3>
            </div>

            <section class="panel panel-default">
                <header class="panel-heading">
                    Liste des ports
                    <i class="fa fa-info-sign text-muted" data-toggle="tooltip" data-placement="bottom" data-title="ajax to load the data."></i>
                </header>
                <div class="table-responsive">
                    <table class="table table-striped m-b-none" data-ride="datatables" id="listActualites">
                        <thead>
                        <tr>
                            <th width="15%">Code</th>
                            <th width="15%">Nom</th>
                            <th width="30%">Description(Fr)</th>
                            <th width="30%">Description(Ar)</th>
                            <th width="10%"></th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for a in ports %}
                            <tr>
                                <td>{{ a.codeVille }}</td>
                                <td>{{ a.nom }}</td>
                                <td>{{ a.textFr|raw }}</td>
                                <td>{{ a.textAr|raw }}</td>
                                <td>
                                    <a href="/updatePortMap/{{ a.id }}" class="btn btn-sm btn-info">Modifier</a>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <br/><br/><br/>
                </div>
            </section>
        </section>
    </section>

{% endblock %}
{% block js %}
    <script src="{{ asset("assets/Backoffice/js/datatables/jquery.dataTables.min.js") }}"></script>
    <script type="text/javascript">

        $("#listActualites").DataTable( {
            "oLanguage": {
                "sUrl": "/assets/Backoffice/js/datatables/french-datatable.json"
            },
            "sDom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
            "sPaginationType": "full_numbers"
        } );


    </script>
{% endblock %}