{% extends "index.html" %}

{% block content %}

<div class="card">
    <div class="card-header">
        <h5 class="card-title">Breakdown of the client processing time during rounds (in seconds) </h5>
    </div>
    <div class="card-body">
        {% if not clients_plot %}
        <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 data currently available for client profile and training time distribution!</strong>
            </div>
        </div>
        {% else %}
        <div id="client">
            <script>
                var graphs = {{ clients_plot | safe }};
                Plotly.plot('client', graphs, {});
            </script>
        </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="card-title">Client training time distribution (histogram density) </h5>
    </div>
    <div class="card-body">
        {% if not client_histogram_plot %}
        <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 data currently available for client training time distribution!</strong>
            </div>
        </div>
        {% else %}
        <div id="client_histogram">
            <script>
                var graphs = {{ client_histogram_plot | safe }};
                Plotly.plot('client_histogram', graphs, {});
            </script>
        </div>
        {% endif %}
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h5 class="card-title">Breakdown of the combiner processing time during rounds (in seconds)</h5>
    </div>
    <div class="card-body">
        {% if not combiners_plot %}
        <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 data currently available for combiners!</strong>
            </div>
        </div>
        {% else %}
        <div id="combiner">
            <script>
                var graphs = {{ combiners_plot | safe }};
                Plotly.plot('combiner', graphs, {});
            </script>
        </div>
        {% endif %}
    </div>
</div>


{% endblock %}