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

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

{% block rightpanel %}
<div class="container" style="max-width: 60vw" data-controller="delete-record">
    <h1 class="is-size-1 mt-0 has-text-centered">Collector</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"
            data-controller="notification"
            data-notification-target="notif">
            <button class="delete" data-action="click->notification#close"></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>Name</th>
            <th>Status</th>
            <th>Editor</th>
            <th>Places / areas of activity</th>
            <th>Last modified</th>
            <th>Actions</th>
        </tr>
        {% for record in records %}
        <tr>
            <td><a href="{{ path('app_collector_view', {'id' : record.id}) }}">{{ record.id }}</a></td>
            <td>
                <a data-delete-record-target="name" href="{{ path('app_collector_view', {'id' : record.id}) }}">
                {{ record.name }}
                </a>
            </td>
            <td>{{ record.status }}</td>
            <td>{{ record.owner }}</td>
            <td style="max-width: 350px;">{{ record.places }}</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 data-url="{{ path('app_collector_del', {'id' : record.id}) }}"
                        class="button is-small is-danger" title="Delete record"
                        data-delete-record-target="path" data-action="click->delete-record#warn">
                        <span class="icon">
                            <i class="fa fa-trash"></i>
                        </span>
                    </button>
                </div>
            </td>
        </tr>
        {% endfor %}
    </table>
    <div class="modal" data-delete-record-target="modal">
        <div class="modal-background"></div>
        <div class="modal-card">
            <header class="modal-card-head">
                <span class="icon is-large has-text-warning">
                    <i class="fa fa-warning fa-2x"></i>
                </span>
                <p class="modal-card-title has-text-danger pl-2"><strong>Delete record?</strong></p>
            <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <p class="is-size-5" data-delete-record-target="message"></p>
            </section>
            <footer class="modal-card-foot">
                <div class="buttons is-right">
                    <button class="button is-link" data-action="click->delete-record#delete">Confirm</button>
                    <button class="button is-light" id="cancel">Cancel</button>
                </div>
            </footer>
        </div>
    </div>
</div>
{% endblock %}