document.querySelector('[data-token-toggle]')?.addEventListener('click', (event) => {
    const input = document.querySelector('#newApiKeyValue');
    const showing = input.type === 'text';
    input.type = showing ? 'password' : 'text';
    event.currentTarget.textContent = showing ? event.currentTarget.dataset.show : event.currentTarget.dataset.hide;
});

document.querySelector('[data-token-copy]')?.addEventListener('click', async (event) => {
    const value = document.querySelector('#newApiKeyValue')?.value;
    if (!value) return;
    await navigator.clipboard.writeText(value);
    event.currentTarget.textContent = event.currentTarget.dataset.copied;
});

document.querySelectorAll('[data-status-switch]').forEach((button) => button.closest('form').addEventListener('submit', () => {
    button.disabled = true;
}));

document.querySelectorAll('[data-action-key]').forEach((button) => button.addEventListener('click', () => {
    const form = document.querySelector('[data-action-form]');
    const message = document.querySelector('[data-action-message]');
    const submit = document.querySelector('[data-action-submit]');
    form.action = button.dataset.url;
    document.querySelector('[data-action-method]').innerHTML = button.dataset.kind === 'delete' ? '<input type="hidden" name="_method" value="DELETE">' : '';
    message.textContent = (button.dataset.kind === 'delete' ? message.dataset.deleteTemplate : message.dataset.revokeTemplate).replace(':name', button.dataset.name);
    submit.textContent = button.textContent.trim();
    document.querySelector('[data-action-title]').textContent = button.textContent.trim();
}));