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

{% block title %}Bibliography - {{ record.citation }} | ArCOA{% endblock %}

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

    <article class="message is-info mt-3">
        <div class="message-body">
            <p>
                <strong>Last modified:</strong> {{ record.modifiedAt.format('Y-m-d') }}
                at {{ record.modifiedAt.format('H:i:s') }}
            </p>
            <p><strong>Editor:</strong> {{ record.editor }}</p>
        </div>
    </article>
    
    <div class="card p-5">
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
        <div class="columns">
                <div class="column is-half"></div>
                <div class="column has-text-right">
                    <button class="button is-link">
                        Edit
                        <span class="icon ml-2">
                            <i class="fa fa-edit"></i>
                        </span>
                    </button>
                    <button class="button is-link">
                        Copy
                        <span class="icon ml-2">
                            <i class="fa fa-copy"></i>
                        </span>
                    </button>
                    <a href="{{ path('app_bibliography_del', {'id' : record.id}) }}" class="button is-danger" id="del-record">
                        Delete
                        <span class="icon ml-2">
                            <i class="fa fa-trash"></i>
                        </span>
                    </a>
                </div>
        </div>
        {% endif %}
        <div class="tabs is-boxed is-fullwidth">
            <ul>
                <li class="is-active">Record</li>
                <li>Relations</li>
            </ul>
        </div>
        <div class="data-tabs" id="record">
            <table class="table is-fullwidth pt-4 record">
                <tr><th>Record ID</th><td>{{ record.id }}</td></tr>
                <tr><th>Status</th><td>{{ record.getStatus() }}</td></tr>
                <tr><th>Editor(s)</th><td>{{ record.editor }}</td></tr>
                <tr><th>Citation</th><td>{{ record.citation }}</td></tr>
                <tr><th>Reference</th><td>{{ record.reference }}</td></tr>
                <tr><th>Editorial notes</th><td>{{ record.notes }}</td></tr>
            </table>
        </div>
        <div class="data-tabs is-hidden" id="relations">
            Some stuff...
        </div>
    </div>
</div>

<div class="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">This record will be permanently deleted. Proceed?</p>
        </section>
        <footer class="modal-card-foot">
            <div class="buttons is-right">
                <button class="button is-link" id="confirm-del">Confirm</button>
                <button class="button is-light" id="cancel">Cancel</button>
            </div>
        </footer>
    </div>
    </div>

<script type="text/javascript" defer>
    const del = document.querySelector('#del-record');
    const delPath = del.href;

    del.addEventListener('click', event => {
        event.preventDefault();
        
        const modal = document.querySelector('.modal');
        modal.classList.add('is-active');

        modal.querySelector('.delete').addEventListener('click', () => {
            modal.classList.remove('is-active');
        });
        modal.querySelector('.modal-background').addEventListener('click', () => {
            modal.classList.remove('is-active');
        });
        modal.querySelector('#cancel').addEventListener('click', () => {
            modal.classList.remove('is-active');
        });

        // Proceed with deletion...
        modal.querySelector('#confirm-del').addEventListener('click', () => {
            location.href = delPath;
        });
    });

</script>
{% endblock %}