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

{% block nav_title %}<i class="fas fa-poll"></i>&nbsp;&nbsp;<span class="text-danger">Platform</span> - Basic outcomes{% endblock %}

{% block body %}
<div class="card bg-light">
    <div class="card-header">
        <i class="fas fa-poll"></i>&nbsp;Basic outcomes
    </div>
    <div class="card-body">
        {% if basicOutcomes|length > 0 %}
            <table id="basicOutcomes" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
                <thead>
                <tr>
                    <th>Identifier</th>
                    <th>Score</th>
                    <th>Language</th>
                    <th>Registration</th>
                    <th>Tool</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                {% for basicOutcomeIdentifier, basicOutcome in basicOutcomes %}
                    <tr>
                        <td>
                            <code>{{ basicOutcomeIdentifier|truncate }}</code>
                        </td>
                        <td>
                            <span class="badge badge-pill badge-info">
                                {{ basicOutcome.score }}
                            </span>
                        </td>
                        <td>
                            {{ basicOutcome.language }}
                        </td>
                        <td>
                            {{ basicOutcome.registration }}
                        </td>
                        <td>
                            {{ basicOutcome.tool }}
                        </td>
                        <td style="width:1px;white-space:nowrap;">
                            <a class="btn btn-danger text-white" href="{{ path('platform_basic_outcome_delete', {'basicOutcomeIdentifier': basicOutcomeIdentifier}) }}" onclick="return confirm('Are you sure?')">
                                <i class="fas fa-trash-alt"></i>&nbsp;Delete
                            </a>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        {% else %}
            <div class="alert alert-dark alert-no-margin-bottom" role="alert">
                <i class="fas fa-ban"></i>&nbsp;No basic outcomes available
            </div>
        {% endif %}
    </div>
    <div class="card-footer text-muted">
        <small><code><i class="fas fa-exclamation-triangle"></i>&nbsp;Non persistent cache storage</code></small>
    </div>
</div>
{% endblock body %}

{% block scripts %}
    <script>
        {% if basicOutcomes|length > 0 %}
        $(document).ready(function() {
            $('#basicOutcomes').DataTable(
                {
                    responsive: {
                        details: {
                            display: $.fn.dataTable.Responsive.display.modal( {
                                header: function ( row ) {
                                    var data = row.data();
                                    return 'Basic outcome details';
                                }
                            } ),
                            renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                                tableClass: 'table'
                            } )
                        }
                    },
                    language: {
                        paginate: {
                            previous: "<",
                            next: ">"
                        }
                    }
                }
            );
        } );
        {% endif %}
    </script>
{% endblock %}