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

{% block title %}Site - {{ record.name }} | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 60vw" data-controller="delete-record map">

    <p class="pb-3">
        <a class="button is-link is-outlined"
            href="{{ path('app_site') }}">
            Back to index
            <span class="icon ml-2">
                <i class="fa fa-arrow-left"></i>
            </span>
        </a>
    </p>

    <h1 class="is-size-1 mt-0 has-text-centered">Site</h1>
    <h2 class="is-size-3 mt-3 has-text-centered">{{ record.name }}</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 %}

    <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 app.user and not is_granted('ROLE_READER') %}
        <div class="columns">
                <div class="column is-half"></div>
                <div class="column has-text-right">
                    {% if is_granted('ROLE_REVISOR') or 
                          is_granted('ROLE_ADMIN') or
                          record.editableStatus %}
                    <button class="button is-link">
                        Edit
                        <span class="icon ml-2">
                            <i class="fa fa-edit"></i>
                        </span>
                    </button>
                    {% endif %}
                    <a href="{{ path('app_site_copy', {'id' : record.id}) }}"
                        class="button is-link">
                        Copy
                        <span class="icon ml-2">
                            <i class="fa fa-copy"></i>
                        </span>
                    </a>
                    {% if is_granted('ROLE_REVISOR') or is_granted('ROLE_ADMIN') %}
                    <button data-url="{{ path('app_site_del', {'id' : record.id}) }}"
                        class="button is-danger"
                        data-delete-record-target="path" data-action="click->delete-record#warn">
                        Delete
                        <span class="icon ml-2">
                            <i class="fa fa-trash"></i>
                        </span>
                    </button>
                    {% endif %}
                </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>Modern name</th>
                    <td data-delete-record-target="name" data-map-target="name">
                        {{ record.name }}
                    </td>
                </tr>
                <tr><th>Ancient name</th><td>{{ record.ancientName }}</td></tr>
                <tr><th>Coordinates</th>
                    <td>
                        <span data-map-target="coords">{{ record.lat }}, {{ record.lng }}</span>
                        <button class="button is-link is-small ml-3" data-action="click->map#open">
                            <span class="icon is-small p-2">
                                <i class="fa fa-map"></i>
                            </span>
                        </button>
                    </td>
                </tr>
                <tr><th>Country</th><td>{{ record.country }}</td></tr>
                <tr><th>Description</th><td>{{ record.description }}</td></tr>
                <tr><th>Short description</th><td>{{ record.shortDescription }}</td></tr>
                <tr><th>External identifier(s)</th><td>{{ record.externalIdentifier }}</td></tr>
                <tr><th>External link(s)</th><td>{{ record.link }}</td></tr>
                <tr><th>Subject headings</th><td>{{ record.subjectHeadings }}</td></tr>
                <tr><th>ArCOA URI</th><td>arcoa.cnr.it/site/{{ record.id }}</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 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 class="modal" data-map-target="modal">
        <div class="modal-background" data-action="click->map#close"></div>
        <div class="modal-card" style="min-width: 900px;">
            <header class="modal-card-head">
                <span class="icon is-large has-text-link">
                    <i class="fa fa-map fa-2x"></i>
                </span>
                <p class="modal-card-title pl-2 pt-1 pb-1"><strong>Interactive map</strong></p>
            <button class="delete" aria-label="close" data-action="click->map#close"></button>
            </header>
            <section class="modal-card-body p-0">
                <div data-map-target="map" id="map" style="min-height: 400px; max-width: 900px"></div>
            </section>
            <footer class="modal-card-foot">
                <div class="buttons is-right">
                    <button class="button is-light" data-action="click->map#close">Close</button>
                </div>
            </footer>
        </div>
    </div>
</div>

{% endblock %}