const id = "takker-scheduler-dashboard";
export const makeDashboard = (): HTMLDivElement => {
  const div_ = document.getElementById(id);
  if (div_ instanceof HTMLDivElement) return div_;
  const div = document.createElement("div");
  div.id = id;
  const shadowRoot = div.attachShadow({ mode: "open" });
  shadowRoot.innerHTML =
`<style>
  :host {
    position: fixed;
    top: 50px;
    left: 10px;
    z-index: 500;
    padding: 2px;
    border: solid 1px black;
    border-radius: 4px;
    background-color: var(--page-bg, #fefefe);
    color: var(--page-text-color, #4a4a4a);
    font: "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
    font-size: 1em;
    display: flex;
  }
  #reload {
    background: unset;
    color: unset;
    border: unset;
    cursor: pointer;
  }
</style>
<button id="reload" title="reload">🔄</button><div id="container"></div>`;

  document.body.append(div);
  return div;
};