{% comment %}
  Config selector sidebar for experiment run detail tabs.
  Requires Alpine parent scope with: configList, selectedConfigs,
  selectAllConfigs(), selectNoConfigs(), toggleConfig(), isConfigSelected().
{% endcomment %}
<div class="exp-config-sidebar">
  <div class="exp-config-sidebar__header">
    Configs · <span x-text="selectedConfigs.length + '/' + configList.length"></span>
  </div>

  <div class="exp-config-sidebar__actions">
    <button type="button" @click="selectAllConfigs()">All</button>
    <button type="button" @click="selectNoConfigs()">None</button>
  </div>

  <div class="flex flex-col">
    <template x-for="cfg in configList" :key="cfg.config_run_id">
      <label class="exp-config-item"
             :class="{ 'exp-config-item--dimmed': !isConfigSelected(cfg.config_run_id) }"
             @click.prevent="toggleConfig(cfg.config_run_id)">
        <span class="exp-config-dot" :style="'background:' + cfg.color"></span>
        <span class="exp-config-name" x-text="cfg.config_name"></span>
        <template x-if="cfg.is_baseline">
          <span class="text-[10px] text-primary font-semibold">★</span>
        </template>
      </label>
    </template>
  </div>
</div>