{% extends "base.html" %}

{% set active_page = "deployments" %}

{% block subtitle %}
 - Deployment list
{% 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>My deployments <span class="fas fa-cogs"></span></h2>
</div>

{% include 'flashed_messages.html' %}

<table class="table table-striped table-hover" id="tableUserDeployments">
    <thead>
        <tr>
            <th>Deployment uuid</th>
            <th>Status</th>
            <th>Container name</th>
            <th>GPUs</th>
            <th>Creation time</th>
            <th>Deployed At</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
    {% for deployment in deployments %}
        <tr>
            <th scope="row"><a href="{{ url('deployments.history', uuid=deployment.uuid) }}">{{deployment.uuid}}</a></th>
            <td>
                {% if "COMPLETE" in deployment.status %}
                <span class="badge bg-success">{{ deployment.status }}</span>
                {% elif "FAIL" in deployment.status %}
                <span class="badge bg-danger">{{ deployment.status }}</span>
                {% elif "CREATE_IN_PROGRESS" in deployment.status %}
                <span class="badge bg-warning">{{ deployment.status }}</span>
                {% else %}
                <span class="badge bg-danger">{{ deployment.status }}</span>
                {% endif %}
            </td>
            <td>
              {% if deployment.outputs['deployment_description'] %}
                <a href="#" class="text-decoration-none" data-toggle="tooltip" title="{{ deployment.outputs['deployment_description'] }}">
                  <i class="fas fa-info-circle"></i> &nbsp;
                </a>
              {% endif %}
              {{deployment.outputs['Docker_image']}}
            </td>
            <td>{{deployment.outputs['Docker_num_gpus']}}</td>
            <td>{{deployment.creationTime}}</td>
            <td>{{deployment.cloudProviderName}}</td>
            <td>
                <div class="btn-group" role="group">
                    <!-- ACCESS -->
                    <div class="btn-group" role="group">
                        <button id="dropdownAccess" class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" {% if not deployment.outputs %}disabled{% endif %}>
                            Access
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownAccess">
                            <li>
                                <a class="dropdown-item" target="_blank" href='{{ deployment.outputs['deepaas_endpoint'] }}/ui'>DEEPaaS</a>
                            </li>
                            <li>
                                <a class="dropdown-item" target="_blank" href='{{ deployment.outputs['jupyter_endpoint'] }}'>JupyterLab</a>
                            </li>
                            <li>
                                <a class="dropdown-item" target="_blank" href='{{ deployment.outputs['monitor_endpoint'] }}'>Monitor</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href='{{ url('deployments.history', uuid=deployment.uuid) }}'>History</a>
                            </li>
                        </ul>
                    </div>
                    <!-- INFO -->
                    <div class="btn-group" role="group">
                        <button id="dropdownInfo" class="btn btn-info dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Info
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownInfo">
                            <li>
                                <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#details{{deployment.uuid}}"><span class="fas fa-bars mr-2 grey-text"></span>Details</a>
                            </li>
                            <li>
                                <a class="dropdown-item" href="{{ url('deployments.template', uuid=deployment.uuid) }}"><span class="fas fa-search mr-2 grey-text"></span>Show template</a>
                            </li>
                        </ul>
                    </div>
                    <!-- DELETE -->
                    <button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete_confirm_{{ deployment.uuid }}" data-bs-keyboard="false">
                        <span class="fas fa-trash-alt mr-2"></span> Delete
                    </button>
            </td>
        </tr>
    {% endfor %}
  </tbody>
</table>
<script>
    $('#tableUserDeployments').dataTable( {
        "responsive": true,
        "order": [],
        "columnDefs": [ {
            "targets"  : 'no-sort',
            "orderable": false,
         }],
        "order": [[ 2, "desc" ]]
    });
</script>

{% for deployment in deployments %}
<!-- Modal DELETE -->
<div class="modal fade" id="delete_confirm_{{deployment.uuid}}" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="delete_confirm_label_{{deployment.uuid}}">Confirm deployment deletion</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                Do you really want to delete the deployment {{deployment.uuid}}?
            </div>
            <div class="modal-footer">
                <a class="btn btn-primary text-white" role="button" data-bs-dismiss="modal">
                    <span class="fas fa-ban mr-2"></span> Cancel</button>
                </a>
                <a class="btn btn-danger deleteBtn" role="button" href="{{ url("deployments.delete", uuid=deployment.uuid) }}">
                    <span class="fas fa-trash-alt mr-2"></span> Delete deployment
                </a>
            </div>
        </div>
    </div>
</div>

<!-- MODAL DETAILS -->
<div class="modal fade" id="details{{ deployment.uuid }}" 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">
                                Overview
                            </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">
                                    <li class="list-group-item"><b>UUID: </b>{{ deployment.uuid }}</li>
                                    <li class="list-group-item"><b>STATUS: </b>{{ deployment.status }}</li>
                                    {% if deployment.statusReason %}
                                    <li class="list-group-item"><b>ERROR MSG</b> {{ deployment.statusReason }}</li>
                                    {% endif %}
                                    <li class="list-group-item"><b>CREATED AT: </b>{{ deployment.creationTime }}</li>
                                    <li class="list-group-item"><b>UPDATED AT: </b>{{ deployment.updateTime }}</li>
                                    <li class="list-group-item"><b>DEPLOYED AT: </b>{{ deployment.cloudProviderName }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapse show" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                                Outputs
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordion_{{ deployment.uuid }}">
                            <div class="accordion-body">
                                <ul class="list-group">
                                    {% for k,v in deployment.outputs.items() %}
                                    <li class="list-group-item"><strong>{{k}}</strong>: {{v}}</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>
{% endfor %}

{% endblock %}
