<dialog id="online-users">
  <div class="dialog-backdrop">
    <div class="dialog-box">
      <div class="dialog-title"><h2>Online Users</h2></div>
      <div class="dialog-content"><user-list></user-list></div>
      <div class="dialog-actions">
        <button class="dialog-button primary">Close</button>
      </div>
    </div>
  </div>
</dialog>

<script>
const onlineUsersDialog = document.getElementById("online-users");
const closeButton = onlineUsersDialog.querySelector('.dialog-button.primary');

closeButton.addEventListener('click', () => {
    onlineUsersDialog.close();
});

async function showOnline() {
    const users = await app.rpc.getOnlineUsers('{{ channel.uid.value }}');
    onlineUsersDialog.querySelector('user-list').data = users;
    onlineUsersDialog.showModal();
    closeButton.focus();
}
</script>