@* Show all API tokens Modal *@
<div class="modal fade" id="apiTokensModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":true}'>
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">
                    <span data-bs-tooltip="API tokens are necessary for the use of JATOS' API">Your personal access tokens (API tokens)</span>
                </h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <table class="table table-hover align-middle" id="apiTokensTable">
                    <thead>
                    <tr>
                        <th>Active<span class="ordering-icon"></span></th>
                        <th>ID<span class="ordering-icon"></span></th>
                        <th>Name<span class="ordering-icon"></span></th>
                        <th>Creation date<span class="ordering-icon"></span></th>
                        <th>Expiration<span class="ordering-icon"></span></th>
                        <th></th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@* Create API token Modal *@
<div class="modal fade" id="apiTokenCreatorModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <form class="form-admin" id="apiTokenCreatorForm">
                <div class="modal-header align-items-start">
                    <h5 class="modal-title text-truncate flex-grow-1">New personal access token</h5>
                    <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row mb-3">
                        <label for="apiTokenCreatorFormName" class="col-sm-3 col-form-label input-required" data-bs-tooltip="Use the name to distinguish the tokens from one another">
                            Name<span class="info-icon"></span>
                        </label>
                        <div class="col-sm-9">
                            <input class="form-control" id="apiTokenCreatorFormName" type="text" name="name" placeholder="Name" autocomplete="off" required>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <label for="apiTokenCreatorFormExpiration" class="col-sm-3 col-form-label" data-bs-tooltip="Select token expiration time">
                            Expiration
                        </label>
                        <div class="col-sm-9">
                            <select class="form-select" id="apiTokenCreatorFormExpiration">
                                <option value="7">7 days</option>
                                <option value="30" selected>30 days</option>
                                <option value="60">60 days</option>
                                <option value="90">90 days</option>
                                <option value="0">Never</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-admin" id="apiTokenCreatorFormConfirmed">Generate</button>
                </div>
            </form>
        </div>
    </div>
</div>

@* API token display Modal *@
<div class="modal fade" id="apiTokenDisplayModal" tabindex="-1" data-bs-config='{"backdrop":"static", "focus":true, "keyboard":false}'>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header align-items-start">
                <h5 class="modal-title text-truncate flex-grow-1">New personal access token</h5>
                <button class="btn btn-close2 btn-xs btn-nav" type="button" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body"></div>
        </div>
    </div>
</div>

<script @{helper.CSPNonce.attr} type="module">
    import * as Helpers from "@routes.Assets.versioned("lib/jatos-gui/javascripts/helpers.js")";
    import * as Alerts from "@routes.Assets.versioned("lib/jatos-gui/javascripts/alerts.js")";
    import * as FormValidation from "@routes.Assets.versioned("lib/jatos-gui/javascripts/formValidation.js")"
    import * as CopyToClipboard from "@routes.Assets.versioned("lib/jatos-gui/javascripts/copyToClipboard.js")";
    import * as ConfirmationModal from "@routes.Assets.versioned("lib/jatos-gui/javascripts/confirmationModal.js")";

    const alerts = new Alerts.Named("api-tokens");
    $("#apiTokensModal, #apiTokenCreatorModal").on('hide.bs.modal', alerts.hideAll);

    let apiTokensTable;

    $("#apiTokensModal").on('show.bs.modal', function() {
        Helpers.generateModalSubtitles("#apiTokensModal", {"Username": window.signedinUser.username});
        generateApiTokensTable();
    });

    function generateApiTokensTable() {
        if (apiTokensTable) {
            apiTokensTable.clear().draw();
            apiTokensTable.ajax.reload();
            return
        }
        apiTokensTable = $('#apiTokensTable').DataTable({
            "ajax": {
                "url" : window.routes.ApiTokens.allTokenDataByUser,
                "error": (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Cannot read token data")
            },
            "dom": `<'row'<'col-sm-12'B>>
                    <'row'<'col-sm-12'tr>>
                    <'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 mt-2'p>>`,
            "pageLength": 10,
            "order": [[ 3, "desc" ]],
            "autoWidth": false,
            "lengthChange": false,
            "stateSave": false,
            "buttons": [
                {
                    "text": '<i class="bi-plus-lg fw-bold pe-1"></i>New Token',
                    "className": "btn btn-admin mb-3",
                    "attr": {
                        "id": "apiTokenCreatorButton"
                    }
                }
            ],
            "columns": [
                {
                    "className": "token-active",
                    "data": null,
                    "width": "1%",
                    "render": function (data, type, full, meta) {
                        if (type === 'sort') return data.active.toString();
                        return `
                            <label class="switch no-info-icon" data-bs-tooltip="Use this switch to de-/activate this token.">
                                <input type="checkbox" ${data.active ? "checked" : ""}>
                                <span class="slider slider-admin round"></span>
                            </label>`;
                    }
                },
                {
                    "data": "id",
                    "width": "1%"
                },
                {
                    "data": "name",
                },
                {
                    "data": "creationDate",
                    "render": (t) => new Date(t).toLocaleString('en-GB')
                },
                {
                    "data": null,
                    "render": function (data, type, full, meta) {
                        if (data.expirationDate <= 0) return "never";
                        const expirationDate = new Date(data.expirationDate).toLocaleString('en-GB');
                        return data.isExpired ? `${expirationDate} <b>(expired)</b>` : expirationDate;
                    }
                },
                {
                    "data": null,
                    "className": "delete-button-column",
                    "width": "1%",
                    "orderable": false,
                    "render": function (data, type, full, meta) {
                        return '<button type="button" class="btn btn-admin deleteButton text-nowrap">Delete<i class="bi-x-lg ps-1"></i></button>';
                    }
                },
            ],
            language: {
                "lengthMenu": "Show: _MENU_",
                "paginate": {
                    "first": `<i class="bi-chevron-double-left"></i>`,
                    "previous": `<i class="bi-chevron-left"></i>`,
                    "next": `<i class="bi-chevron-right"></i>`,
                    "last": `<i class="bi-chevron-double-right"></i>`
                },
                "emptyTable": "No tokens yet"
            },
            "rowCallback": disableRow,
            "drawCallback": function(settings) {
                Helpers.activateTooltips('#apiTokensModal');
            }
        });
    }

    $('#apiTokensModal').on('click', "#apiTokenCreatorButton", function() {
        FormValidation.clear("#apiTokenCreatorForm");
        Helpers.generateModalSubtitles("#apiTokenCreatorModal", {"Username": window.signedinUser.username});
        $('#apiTokenCreatorFormName').val("");
        $('#apiTokenCreatorModal').modal('show');
    });

    $('#apiTokenCreatorModal').on('shown.bs.modal', () => $('#apiTokenCreatorFormName').focus());

    const disableRow = (row, data) => $(row).toggleClass("disabled", !data.active || data.isExpired);

    $('#apiTokenCreatorFormConfirmed').click(function(e) {
        const name = $('#apiTokenCreatorFormName').val().trim();
        const expires = $('#apiTokenCreatorFormExpiration').val() * 60 * 60 * 24; // in seconds
        $.ajax({
            url : window.routes.ApiTokens.generate(name, expires),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function(apiToken) {
                $('#apiTokenCreatorModal')
                    .modal('hide')
                    .one('hidden.bs.modal', () => showApiTokenDisplayModal(name, apiToken));
                $('#apiTokensTable').DataTable().ajax.reload();
            },
            error : function(err) {
                const errMsg = err.responseText ? err.responseText : "A new token couldn't be generated";
                FormValidation.show("#apiTokenCreatorForm", {name: [errMsg]});
            }
        });
    });

    function showApiTokenDisplayModal(name, apiToken) {
        Helpers.generateModalSubtitles("#apiTokenDisplayModal", {"Username": window.signedinUser.username, "Token name": name});
        const html = `
                <p>
                    Please copy your personal access token now.<br>
                    <b>For your security it won\'t be shown again.</b>
                    <div class="card card-body">
                        <span class="user-select-all">${apiToken}</span>
                        <span class="btn-clipboard btn-clipboard-top-right no-info-icon" data-bs-tooltip="Copy to clipboard"></span>
                    </div>
                </p>
                <p>Test with <code>curl</code>:</p>
                <div class="card card-body">
                    <pre class="mb-0 me-2"><code class="user-select-all">curl -i -H "Authorization: Bearer ${apiToken}" ${window.common.realHostUrl}${window.routes.Api.testToken}</code></pre>
                    <span class="btn-clipboard btn-clipboard-top-right no-info-icon" data-bs-tooltip="Copy to clipboard"></span>
                </div>`;
        $('#apiTokenDisplayModal .modal-body').html(html);
        Helpers.activateTooltips('#apiTokenDisplayModal');
        $('#apiTokenDisplayModal').modal('show');
    }

    $('#apiTokenDisplayModal').on('click', '.btn-clipboard', CopyToClipboard.onClick);

    $('#apiTokensModal').on('click', '.token-active input', function(e) {
        e.preventDefault();
        const checkbox = this;
        const tr = $(checkbox).closest('tr');
        const data = apiTokensTable.row(tr).data();
        const active = $(checkbox).is(':checked');
        $.ajax({
            url : window.routes.ApiTokens.toggleActive(data.id, active),
            type : "POST",
            headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
            success: function() {
                data.active = active;
                $(checkbox).prop('checked', data.active);
                disableRow(tr, data);
            },
            error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Token activity couldn't be toggled")
        });
    });

    $('#apiTokensModal').on('click', '.deleteButton', function() {
        const button = this;
        const tr = $(this).closest('tr');
        const data = apiTokensTable.row(tr).data();
        const title = "Confirm deletion of a token";
        const body = `<p>You are about to delete the token "${data.name}" (ID ${data.id}).</p>
            <p><b class="text-danger">This cannot be undone.</b> Do you want to proceed?</p>`;
        ConfirmationModal.show({
            title: title,
            text: body,
            btnText: 'Delete',
            action: function() {
                $.ajax({
                    url : window.routes.ApiTokens.remove(data.id),
                    type : "DELETE",
                    headers: { 'Csrf-Token': '@helper.CSRF.getToken.value' },
                    success: () => apiTokensTable.ajax.reload(null, false),
                    error: (err) => err.responseText ? alerts.error(err.responseText) : alerts.error("Token couldn't be deleted")
                });
            }
        });
    });

</script>