class ForexSelector extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        select, input {
          background: rgba(30, 41, 59, 0.8);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: white;
          padding: 0.5rem;
          border-radius: 0.375rem;
          width: 100%;
        }
        label {
          display: block;
          margin-bottom: 0.5rem;
          font-size: 0.875rem;
          color: #94a3b8;
        }
        .form-group {
          margin-bottom: 1rem;
        }
      </style>
      <div class="form-group">
        <label for="forex-pair">Forex Pair</label>
        <input id="forex-pair" type="text" placeholder="EURUSD" list="common-pairs">
        <datalist id="common-pairs">
          <option>EURUSD</option>
          <option>GBPUSD</option>
          <option>USDJPY</option>
          <option>AUDUSD</option>
          <option>USDCAD</option>
          <option>XAUUSD</option>
          <option>NAS100</option>
        </datalist>
      </div>
    `;
  }
}

customElements.define('forex-selector', ForexSelector);