{% macro build_sse(is_debug) %}
{% if is_debug %}
  <debug-sse></debug-sse>

  <script data-name="debug-sse">
    class DebugSSE extends HTMLElement {
      constructor() {
        super();
        this.retryCount = 0;
        this.maxRetries = 3;
        this.tryIntervalMs = 800;

        const shadow = this.attachShadow({ mode: 'open' });

        shadow.innerHTML = `
      <style>
        #debug-sse-box {
          position: fixed;
          display: none;
          align-items: center;
          justify-content: center;
          top: 5px;
          left: 50%;
          transform: translateX(-50%);
          height: 75px;
          background-color: rgba(104, 184, 93, 0.8);
          border: 1px solid #dee2e6;
          box-shadow: 0 4px 6px rgba(104, 184, 93, 0.5);
          border-radius: 4px;
          color: #343a40;
          font-size: 16px;
          font-family: Arial, sans-serif;
          text-align: center;
          margin: auto;
          z-index: 9999;
        }

        #debug-sse-box.show {
          display: flex;
        }

        .outter-box {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding: 0.75rem;
        }

        .progress-icon {
          color: rgb(255 255 255);
          animation: spin 1s linear infinite;
          width: 1.25rem;
          height: 1.25rem;
          margin-right: .75rem;
          margin-left: -.25rem;
        }

        @keyframes spin {
          100% { transform: rotate(1turn); }
        }
      </style>

      <div id="debug-sse-box">
        <div class="outter-box">
          <svg class="progress-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
            <circle style="opacity: 0.25;" cx="12" cy="12" r="10"
              stroke="currentColor" stroke-width="4"></circle>
            <path style="opacity: 0.75;" fill="currentColor"
              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 
                 5.291A7.962 7.962 0 014 12H0c0 3.042 
                 1.135 5.824 3 7.938l3-2.647z">
            </path>
          </svg>
          <span class="msg" style="font-size: 1.25rem;">server reloading...</span>
        </div>
      </div>
    `;

        this.dom_debug_box = shadow.querySelector('#debug-sse-box');
        this.dom_msg = shadow.querySelector('.msg');
        this.dom_progress_icon = shadow.querySelector('.progress-icon');
      }

      connectedCallback() {
        this.connect();
      }

      toggleMessageBox(show) {
        this.dom_debug_box.classList.toggle('show', show);
      }

      connect() {
        const eventSource = new EventSource("/instaui/debug-sse");

        eventSource.onopen = () => {
          this.toggleMessageBox(false)
          console.log('debug-sse connection opened');

          if (this.retryCount > 0) {
            window.location.reload(true);
          }
        };

        eventSource.onerror = () => {
          this.toggleMessageBox(true)
          console.error("Connection to server failed.");
          eventSource.close();
          this.retryCount++;

          if (this.retryCount >= this.maxRetries) {
            console.log("Max retries reached. Giving up.");
            this.dom_msg.textContent = "Server reload failed.";
            this.dom_progress_icon.style.display = "none";
            return;
          }
          setTimeout(() => this.connect(), this.tryIntervalMs);
        };
      }
    }

    customElements.define('debug-sse', DebugSSE);
  </script>
{% endif %}
{% endmacro %}