<dialog id="help-dialog">
  <div class="dialog-backdrop">
    <div class="dialog-box">
      <div class="dialog-title"><h2>Help</h2></div>
      <div class="dialog-content">
        <help-command-list></help-command-list>
      </div>
      <div class="dialog-actions">
        <button class="dialog-button primary">Close</button>
      </div>
    </div>
  </div>
</dialog>

<script>
  class HelpCommandListComponent extends HTMLElement {
    helpCommands = [
      {
        command: "/help",
        description: "Show this help message"
      },
      {
        command: "/online",
        description: "Show online users"
      },
      {
        command: "/clear",
        description: "Clear the board"
      },
      {
        command: "/img-gen",
        description: "Generate an image"
      },
      {
        command: "/live",
        description: "Toggle live typing mode"
      },
      {
        command: "/create",
        description: "Create a new channel"
      },
      {
        command: "/invite",
        description: "Invite a user to this channel"
      },
      {
        command: "/leave",
        description: "Leave this channel"
      },
      {
        command: "/settings",
        description: "Channel settings (moderators)"
      },
      {
        command: "/container",
        description: "Manage channel container"
      }
    ];

    constructor() {
      super();
    }

    connectedCallback() {
      this.innerHTML = this.helpCommands
            .map(cmd => `<div><h2>${cmd.command}</h2><div>${cmd.description}</div></div>`)
        .join('');
    }
  }

  customElements.define('help-command-list', HelpCommandListComponent);

  const helpDialog = document.getElementById("help-dialog");
  const helpCloseButton = helpDialog.querySelector('.dialog-button.primary');
    function showHelp() {
        helpDialog.showModal();

        helpCloseButton.focus();
    }
    helpCloseButton.addEventListener('click', () => {
      helpDialog.close();
    });

</script>