{% extends "base.html" %}

{% block content %}
<div class="container float-start">
    {% if not exp1 %}
    <div>
        <form action="/experiments/compare" method="get">
            <div class="mb-3">
                <label for="exp1" class="form-label">Experiment 1</label>
                <input class="form-control" list="explist" id="exp1" name="exp1" placeholder="Type to search."/>
            </div>
            <div class="mb-3">
                <label for="exp2" class="form-label">Experiment 2</label>
                <input class="form-control" list="explist" id="exp2" name="exp2" placeholder="Type to search."/>
            </div>
            <datalist id="explist">
                {% for i in ids %}
                    <option value={{ i }}>{{ i }}</option>
                {% endfor %}
            </datalist>
            <div class="mb-3">
                <button type="submit" class="btn btn-primary">Compare</button>
            </div>
        </form>
    </div>
    {% else %}
    <div>
        <table class="table table-bordered caption-top">
            <caption>Experiment Comparison</caption>
            <tbody>
            <tr>
                <th>ID</th>
                <td><a href={{ "/experiments/"~exp1["short_id"]}}>{{ exp1["short_id"] }}</a></td>
                <td><a href={{ "/experiments/"~exp2["short_id"]}}>{{ exp2["short_id"] }}</a></td>
            </tr>
            <tr>
                <th>Command</th>
                <td>{{ exp1["command"] }}</td>
                <td>{{ exp2["command"] }}</td>
            </tr>
            <tr>
                <th>Created</th>
                <td>{{ exp1["created"] }}</td>
                <td>{{ exp2["created"] }}</td>
            </tr>
            <tr>
                <th>Parameters</th>
            </tr>
            {% for i in common_params %}
                <tr>
                    <td>{{ i }}</td>
                    <td>{{ exp1["params"].get(i, "") }}</td>
                    <td>{{ exp2["params"].get(i, "") }}</td>
                </tr>
            {% endfor %}
            <tr>
                <th>Metrics</th>
            </tr>
            {% for i in common_metrics %}
                <tr>
                    <td>{{ i }}</td>
                    <td>{{ exp1["best_metrics"].get(i, "") }}</td>
                    <td>{{ exp2["best_metrics"].get(i, "") }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% endif %}
</div>
{% endblock %}