{% extends "admin.html.twig" %}

{% block adminContent %}
    <div class="d-flex">
        <div>
            <h1>{{ 'admin.webapi.title'|trans }}</h1>
            <p>{{ 'admin.webapi.subtitle'|trans }}</p>
        </div>
    </div>
    
    <div id="admin">
        <fieldset>
            <legend>{{ 'admin.webapi.clients.title'|trans }}</legend>
            
            <p>{{ 'admin.webapi.clients.subtitle'|trans }}</p>
            
            <table class="table table-hover border">
                <thead>
                    <tr class="table-primary">
                        <th>{{ 'admin.webapi.clients.description'|trans }}</th>
                        <th>{{ 'admin.webapi.clients.client_id'|trans }}</th>
                        <th>{{ 'admin.webapi.clients.client_secret'|trans }}</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody v-cloak>
                    <tr v-for="client in clients">
                        <td>
                            {% verbatim %}
                                {{ client.name }}
                            {% endverbatim %}
                        </td>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control" value="****" readonly>
                                <button class="btn btn-outline-secondary" title="{{ 'label.view'|trans }}" v-on:click.prevent="showSecret(client.identifier, $event)">
                                    <span class="fa fa-eye"></span>
                                </span>
                            </div>
                        </td>
                        <td>
                            <div class="input-group">
                                <input type="text" class="form-control" value="****" readonly>
                                <button type="button" class="btn btn-outline-secondary" title="{{ 'label.view'|trans }}" v-on:click.prevent="showSecret(client.secret, $event)">
                                    <span class="fa fa-eye"></span>
                                </span>
                            </div>
                        </td>
                        <td class="text-end">
                            <button type="button" class="btn btn-danger" title="{{ 'button.remove'|trans }}"
                                    v-on:click.prevent="removeClient(client)">
                                <span class="fa fa-trash"></span>
                            </button>
                        </td>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="text-end">
                            <button type="button" class="btn btn-secondary" v-on:click.prevent="newClient">
                                <i class="fa fa-plus"></i>
                                {{ 'button.add'|trans }}
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>
        </fieldset>

        <div ref="modalElem" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <form action="" method="post" v-on:submit.prevent="addClient">
                        <div class="modal-header">
                            <h5 class="modal-title">{{ 'admin.webapi.clients.modal'|trans }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="mb-3">
                                <label>{{ 'admin.webapi.clients.description'|trans }}</label>
                                <input type="text" class="form-control" v-model="client.description" name="description" maxlength="30" required>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                                {{ 'button.close'|trans }}
                            </button>
                            <button type="submit" class="btn btn-primary">
                                {{ 'button.add'|trans }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script>
        (function () {
            'strinct'

            var app = new Vue({
                el: '#admin',
                data: {
                    client: {},
                    clients: [],
                    modal: null,
                },
                methods: {
                    load() {
                        var self = this;
                        App.ajax({
                            url: '{{ path('admin_api_clients') }}',
                            success: function(response) {
                                self.clients = response.data;
                            }
                        });
                    },
                    newClient() {
                        this.client = {};
                        this.modal.show();
                    },
                    addClient() {
                        var self = this;
                        App.ajax({
                            url: '{{ path('admin_api_newclient') }}',
                            type: 'POST',
                            data: self.client,
                            success() {
                                self.load();
                                self.modal.hide();
                            }
                        });
                    },
                    showSecret(secret, evt) {
                        const parent = evt.currentTarget.parentNode;
                        const input = parent.querySelector('input');
                        const icon = parent.querySelector('span.fa');
                        if (parent.classList.toggle('show')) {
                            input.value = secret;
                            icon.classList.replace('fa-eye', 'fa-eye-slash');
                        } else {
                            input.value = '******';
                            icon.classList.replace('fa-eye-slash', 'fa-eye');
                        }
                    },
                    removeClient(client) {
                        var self = this;
                        if (confirm('{{ 'admin.webapi.clients.remove_alert'|trans }}')) {
                            App.ajax({
                                url: '{{ path('admin_api_clients') }}/' + client.identifier,
                                type: 'DELETE',
                                success() {
                                    self.load();
                                }
                            });
                        }
                    }
                },
                mounted() {
                    this.modal = new bootstrap.Modal(this.$refs.modalElem);
                }
            });
            app.load();
        })();
    </script>
{% endblock %}
