{{ define "modal/settings" }}
  <div class="settings-overlay" id="settings-overlay">
    <div class="settings-panel" role="dialog" aria-modal="true"
         aria-labelledby="settings-title">
      <div class="settings-panel__header">
        <h2 class="settings-panel__title" id="settings-title">Settings</h2>
        <button
          type="button"
          class="footer__toolbar-btn"
          id="settings-close"
          aria-label="Close settings"
        >
          <svg class="icon"><use href="/static/icons.svg#close"></use></svg>
        </button>
      </div>

      <div class="settings-tabs" role="tablist">
        <button
          type="button"
          class="settings-tab active"
          role="tab"
          data-tab="model-voice"
          aria-selected="true"
          aria-controls="panel-model-voice"
        >Model &amp; Voice</button>
        <button
          type="button"
          class="settings-tab"
          role="tab"
          data-tab="system-message"
          aria-selected="false"
          aria-controls="panel-system-message"
        >System Message</button>
      </div>

      <div class="settings-tab-panels">
        <div
          class="settings-tab-panel active"
          role="tabpanel"
          data-tab-panel="model-voice"
          id="panel-model-voice"
          aria-labelledby="tab-model-voice"
        >
          <label class="settings-label" for="model">Model</label>
          <select id="model" class="settings-select" aria-label="Model">
            <option value="" disabled selected>Loading...</option>
          </select>

          <label class="settings-label" for="voice">Voice</label>
          <select id="voice" class="settings-select" aria-label="Voice">
            <option value="" disabled selected>Loading...</option>
          </select>
        </div>

        <div
          class="settings-tab-panel"
          role="tabpanel"
          data-tab-panel="system-message"
          id="panel-system-message"
          aria-labelledby="tab-system-message"
          hidden
        >
          <label class="settings-label" for="system-message-input">
            System Message
          </label>
          <textarea
            id="system-message-input"
            class="settings-textarea"
            rows="8"
            placeholder="Enter system message..."
          ></textarea>
          <div class="settings-save-row">
            <button
              type="button"
              class="settings-save-btn"
              id="save-system-message"
            >Save</button>
          </div>
        </div>
      </div>
    </div>
  </div>
{{ end }}