<div class="card">
    <div class="card-body">
        <h5 class="card-title">Experiment: {{ experiment_name }}</h5>

        <!-- Column Visibility Controls -->
        <div class="mb-3">
            <div class="d-flex align-items-center gap-2">
                <span class="text-muted small">Metrics Columns:</span>
                <div class="btn-group btn-group-sm" role="group" id="column-toggles">
                    {% for metric in metrics_columns %}
                    <input type="checkbox"
                           class="btn-check column-toggle"
                           id="col-{{ metric }}"
                           data-column="{{ metric }}"
                           checked>
                    <label class="btn btn-outline-secondary" for="col-{{ metric }}">
                        {{ metric }}
                    </label>
                    {% endfor %}
                </div>
                <button class="btn btn-sm btn-outline-secondary" id="toggle-all-columns">
                    Toggle All
                </button>
            </div>
        </div>

        <!-- Metrics Table -->
        <div class="table-responsive mb-4">
            <table class="table">
                <thead>
                    <tr>
                        <th>Run ID</th>
                        {% for metric in metrics_columns %}
                            <th class="metric-column metric-col-{{ metric }}" data-metric="{{ metric }}">{{ metric }}</th>
                        {% endfor %}
                        <th>Message Logs</th>
                        <th>Prompts</th>
                        <th>Timestamp</th>
                    </tr>
                </thead>
                <tbody>
                    {% for run in runs %}
                    <tr>
                        <td>{{ run.id }}</td>
                        {% for metric in metrics_columns %}
                            <td class="metric-column metric-col-{{ metric }}" data-metric="{{ metric }}">{{ run.metrics[metric].value if metric in run.metrics else '-' }}</td>
                        {% endfor %}
                        <td>
                            {% for log_id in run.message_log_ids %}
                                <a href="#"
                                   class="badge bg-primary me-1"
                                   hx-get="/logs/{{ log_id }}"
                                   hx-target="#modal-content"
                                   hx-trigger="click">
                                    {{ log_id }}
                                </a>
                            {% endfor %}
                        </td>
                        <td>
                            {% for prompt in run.prompts %}
                                <a href="#"
                                   class="badge bg-secondary me-1"
                                   hx-get="/prompts/{{ prompt.hash }}"
                                   hx-target="#modal-content"
                                   hx-trigger="click"
                                   title="{{ prompt.function_name }}">
                                    {{ prompt.function_name }} ({{ prompt.hash[:6] }})
                                </a>
                            {% endfor %}
                        </td>
                        <td>{{ run.timestamp }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal" id="prompt-modal" style="display: none;">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="modal-content"></div>
    </div>
</div>
