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

{% block title %}Collection | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 60vw">
    <h1 class="is-size-1 mt-0 has-text-centered">Collection</h1>
    <h2 class="is-size-3 mt-3 has-text-centered">Choose action</h2>

    {% for message in app.flashes('notice') %}
        <div class=" mt-4 notification is-success">
            <button class="delete"></button>
            {{ message }}
        </div>
    {% endfor %}
    <div class="card p-5 mt-6 pt-6 pb-6">
        <div class="columns">
            <div class="column is-half has-text-centered">
                <button class="button is-medium">
                    Search
                    <span class="icon ml-2">
                        <i class="fa fa-search"></i>
                    </span>
                </button>
            </div>
            {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') or is_granted('ROLE_EDITOR') %}
            <div class="column has-text-centered">
                <a href="" class="button is-link is-medium">
                    Add new
                    <span class="icon ml-2">
                        <i class="fa fa-plus"></i>
                    </span>
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <h3 class="has-text-centered is-size-4 mt-6">Records</h3>
    <p class="pt-4 pb-4"><strong>{{ count }} result(s) found</strong></p>
    <table class="table is-hoverable is-fullwidth mt-5 has-text-centered results">
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Status</th>
            <th>Editor</th>
            <th>Chronology</th>
            <th>Last modified</th>
            <th>Actions</th>
        </tr>
        {% for record in records %}
        <tr>
            <td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.id }}</a></td>
            <td><a href="{{ path('app_collection', {'id' : record.id}) }}">{{ record.title }}</a></td>
            <td>{{ record.status }}</td>
            <td>{{ record.owner }}</td>
            <td style="max-width: 350px;">{{ record.chronology }}</td>
            <td>
                {{ record.modifiedAt.format('Y-m-d') }}<br>
                {{ record.editor }} at {{ record.modifiedAt.format('H:i:s') }}
            </td>
            <td style="min-width: 120px;">
                <div class="buttons">
                    <button class="button is-small is-link" title="Edit record">
                        <span class="icon">
                            <i class="fa fa-edit"></i>
                        </span>
                    </button>
                    <button class="button is-small is-danger" title="Delete record">
                        <span class="icon">
                            <i class="fa fa-trash"></i>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        {% endfor %}
    </table>
</div>
<script type="text/javascript" defer>
    const delBtns = document.querySelectorAll('.delete');
    for (let btn of delBtns) {
        btn.addEventListener('click', function () {
            this.parentElement.classList.add('is-hidden');
        })
    }
</script>
{% endblock %}
