{% extends "index.html" %}

{% block content %}

<div class="card">
    <div class="card-header">
        <h5 class="card-title">Model validations</h5>
        <h6 class="card-subtitle text-muted">Box plot showing the model validation distribution across all clients.</h6>
    </div>

    {% if not box_plot %}
    <div class="card-body">
        <div class="alert alert-danger alert-outline alert-dismissible" role="alert">
            <div class="alert-icon">
                <i class="far fa-fw fa-bell"></i>
            </div>
            <div class="alert-message">
                <strong>No model validation data currently available!</strong>
            </div>
        </div>
    </div>
    {% else %}

    <div class="form-group row">
        <label for="metric_type" class="col-sm-1 col-form-label" style="margin-left: 40px;">Metric</label>
        <div class="col-sm-6">
            <select class="form-control" id="metric_type">
                {% if metrics %}
                {% for metric in metrics %}
                <option value={{ metric }}>{{ metric }}</option>
                {% endfor %}
                {% endif %}
            </select>
        </div>
    </div>

    <div class="card-body">
        <div id="box">
            <script>
                var graphs = {{ box_plot | safe }};
                Plotly.plot('box', graphs, {});
            </script>
        </div>
    </div>
    {% endif %}
</div>

<div class="card-header">
    <h5 class="card-title">Model trail</h5>
    <h6 class="card-subtitle text-muted">{{ message }}</h6>
</div>
<div class="card">
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th style="width:70%;">Model ID</th>
                    <th style="width:30%">Committed at</th>
                </tr>
            </thead>
            <tbody>
                {% for key in model_info.keys() %}
                <tr>
                    <td>{{ key }}</td>
                    <td>{{ model_info[key] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}