{% extends "base.html" %}

{% set active_page = "deployments" %}

{% block subtitle %}
 - Deployment {{ deployment.uuid }}
{% endblock %}
{% block content %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h2>{{ deployment.uuid }} details <span class="fas fa-cogs"></span></h2>
</div>

{% include 'flashed_messages.html' %}

{% for model, info in training_info.items() %}

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h3> {{ model }} </h3>
    <div class="btn-group">
        <a class="btn btn-info" target="_blank" href="{{ deployment.outputs['deepaas_endpoint'] + '/ui#/models/post_v2_models_{}_train_'.format(model) }}">
            Train model
        </a>
        <a class="btn btn-secondary" target="_blank" href="{{ deployment.outputs['deepaas_endpoint'] + '/ui#/models/post_v2_models_{}_predict_'.format(model) }}">
            Predict
        </a>
    </div>
</div>

    <table class="table table-striped table-hover">
        <thead class="thead-dark">
            <tr>
                <th>Training uuid</th>
                <th>Date</th>
                <th>Status</th>
                <th>Message</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for element in info %}
            <tr>
                <td>{{ element.uuid }}</td>
                <td>{{ element.date }}</td>
                <td><h5>
                    {% if element.status == 'done' %}
                        <span class="badge bg-success"/>
                    {% elif element.status == 'error' %}
                        <span class="badge bg-danger"/>
                    {% else  %}
                        <span class="badge bg-primary"/>
                    {% endif %}
                        {{ element.status }}
                        </span>
                </h5></td>
                <td>
                    {{ element.message }}
                </td>
                <td>
                    <div class="btn-group">
                        <a class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#arguments{{ model }}-{{ loop.index }}" href="#">
                            Training arguments
                        </a>
                        <a class="btn btn-danger" href="{{ url('training.delete', training_uuid=element.uuid, model=model, uuid=deployment.uuid) }}">
                            <span class="fas fa-trash-alt mr-2"></span> Delete
                        </a>
                    </div>
                    <!-- MODAL arguments-->
                    <div class="modal fade" id="arguments{{ model }}-{{ loop.index }}" role="dialog">
                        <div class="modal-dialog modal-lg" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title" id="details_label_{{ deployment.uuid }}"><i class="fa fa-info-circle mr-2" aria-hidden="true"></i> Deployment details</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <div class="accordion" id="accordion_{{ deployment.uuid }}">
                                        <div class="accordion-item">
                                            <h2 class="accordion-header" id="headingOne">
                                                <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                                    Arguments
                                                </button>
                                            </h2>
                                            <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordion_{{ deployment.uuid }}">
                                                <div class="accordion-body">
                                                    <ul class="list-group">
                                                {% for name, value in element.args.items() %}
                                                        <li class="list-group-item"><b>{{ name }}: </b>{{ value }}</li>
                                                {% endfor %}
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>

            {% endfor %}
        </tbody>
    </table>

{% endfor %}

{% endblock %}
