{% extends 'base.html.twig' %}
{% block scripts_head %}
    {{ parent() }}
    {{ encore_entry_script_tags('mapping') }}
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    {{ encore_entry_link_tags('mapping') }}
{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">{{ mapping.title }}</h3>
                </div>
                <div class="card-body">
                    {% block top_left_buttons %}
                        {% include 'flashes.html.twig' with {'flashes': app.flashes} only %}
                        {% if mapping.new_record_route is defined %}
                            {% block new_button %}
                                <a href="{{ url(mapping.new_record_route, mapping.new_record_route_params|default({})) }}" role="button" class="btn btn-primary"><i class="fa fa-plus-circle"></i> New</a>
                            {% endblock %}
                        {% endif %}
                    {% endblock %}
                    <script type="text/javascript">
                        var mapping = mapping || {};
                        var tables = tables || {};
                        mapping['{{ mapping.id }}'] = {{ mapping|json_encode|raw }};
                    </script>
                    <table id="{{ mapping.id }}" class="dataTable table table-striped" style="width:100%">
                        <thead>
                        <tr>
                            {% for field in mapping.columns %}
                                <th class="{%- if field.filterable %}combo{% endif %} {% if field.class is defined %}{{ field.class|raw }}{% endif %}"
                                    style="{% if field.width is defined %}width:{{ field.width|raw }}{% endif %}">
                                    {{ field.label }}
                                </th>
                            {% endfor %}
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
{% endblock %}