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

{% block title %}Vocab - Functional context | ArCOA{% endblock %}

{% block rightpanel %}
<div class="container" style="max-width: 50vw" data-controller="vocabs">
    <h1 class="is-size-1 mt-0 has-text-centered">Vocabulary</h1>
    <h2 class="is-size-3 mt-4 has-text-centered">Functional context</h2>

    <div class="container mt-6">
        <!-- For AJAX calls... TODO: not working from controller? -->
        {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
        <form method="post" action="{{ path('app_vocab_func_context_add') }}">
            <label class="label">Add new term</label>
            <div class="field has-addons">
                <div class="control">
                    <input class="input" name="_term" type="text" placeholder="Add new term">
                </div>
                <div class="control">
                    <button type="submit" class="button is-link">
                        Add
                        <span class="icon ml-3">
                            <i class="fa fa-plus"></i>
                        </span>
                    </button>
                </div>
            </div>
        </form>
        {% endif %}

        <div class="notification is-success is-hidden mt-5"
            data-controller="notification"
            data-notification-target="notif"
            id="ajax-saved">
            <button class="delete" data-action="click->notification#close"></button>
            Term saved successfully
        </div>
        <div class="notification is-success is-hidden mt-5"
            data-controller="notification"
            data-notification-target="notif"
            id="ajax-deleted">
            <button class="delete" data-action="click->notification#close"></button>
            Term deleted successfully
        </div>
        <div class="notification is-danger is-light is-hidden mt-5"
            data-controller="notification"
            data-notification-target="notif"
            id="ajax-error">
            <button class="delete" data-action="click->notification#close"></button>
            The term could not be deleted because it's related to existing records
        </div>
        {% for message in app.flashes('notice') %}
            <div class="notification is-success mt-5" data-controller="notification"
                data-notification-target="notif">
                <button class="delete" data-action="click->notification#close"></button>
                {{ message }}
            </div>
        {% endfor %}
        <h3 class="mt-6 mb-5 is-size-5"><strong>Terms in vocabulary</strong></h3>
        <table class="table is-fullwidth" id="terms">
            <tr><th>Term</th>{% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}<th>Actions</th>{% endif %}</tr>
        {% for term in terms %}
            <tr data-vocabs-target="row"
                data-id="{{ term.id }}">
                <td>
                    <input class="input" type="text" value="{{ term.term }}" disabled
                    data-id="{{ term.id }}" data-vocabs-target="input" />
                </td>
                {% if is_granted('ROLE_ADMIN') or is_granted('ROLE_REVISOR') %}
                <td>
                    <div class="buttons">
                        <button class="button is-primary is-hidden"
                            data-vocabs-target="save"
                            data-action="click->vocabs#save"
                            data-url="{{ path('app_vocab_func_context_upd') }}"
                            data-id="{{ term.id }}">
                            Save
                            <span class="icon ml-2">
                                <i class="fa fa-save"></i>
                            </span>
                        </button>
                        <button class="button is-hidden"
                            data-id="{{ term.id }}"
                            data-vocabs-target="cancel"
                            data-action="click->vocabs#cancel">
                            Cancel
                            <span class="icon ml-2">
                                <i class="fa fa-times"></i>
                            </span>
                        </button>
                        <button class="button is-link"
                            data-vocabs-target="edit"
                            data-id="{{ term.id }}"
                            data-action="click->vocabs#edit">
                            Edit
                            <span class="icon ml-2">
                                <i class="fa fa-edit"></i>
                            </span>
                        </button>
                        <button class="button is-danger"
                            data-id="{{ term.id }}"
                            data-action="click->vocabs#delete"
                            data-url="{{ path('app_vocab_func_context_del') }}">
                            Delete
                            <span class="icon ml-2">
                                <i class="fa fa-trash"></i>
                            </span>
                        </button>
                    </div>
                </td>
                {% endif %}
            </tr>
        {% endfor %}
        </table>
    </div>
    <div class="modal" data-vocabs-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 term?</strong></p>
            <button class="delete" aria-label="close"></button>
            </header>
            <section class="modal-card-body">
                <p class="is-size-5">This term will be permanently deleted. Proceed?</p>
            </section>
            <footer class="modal-card-foot">
                <div class="buttons is-right">
                    <button class="button is-link" data-action="click->vocabs#delete">Confirm</button>
                    <button class="button is-light" id="cancel">Cancel</button>
                </div>
            </footer>
        </div>
    </div>
</div>
{% endblock %}