/**
 * admin-ui/js/components/ds-action-bar.js
 * A simple web component to structure page-level actions.
 */
class DsActionBar extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: var(--space-4);
          padding: var(--space-4) 0;
          border-bottom: 1px solid var(--border);
          margin-bottom: var(--space-6);
        }
        .secondary, .primary {
          display: flex;
          align-items: center;
          gap: var(--space-2);
        }
      </style>
      <div class="secondary">
        <slot></slot>
      </div>
      <div class="primary">
        <slot name="primary"></slot>
      </div>
    `;
  }
}

customElements.define('ds-action-bar', DsActionBar);