{% extends "layout.html" %}

{% block title %} Index {% endblock %}

{% block content %}
	<div class="container" style="min-height: 1120px">
		<div class="row">
			<div class="col-12">
				{{ super() }}
			</div>
            <div class="col-md-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Noeuds actuels</h5>
                        <h3 class="card-text text-center">{{ nodes | length }}</h3>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Modules disponibles</h5>
                        <h3 class="card-text text-center">{{ modules }}</h3>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Tâches en attente</h5>
                        <h3 class="card-text text-center">{{ tasks }}</h3>
                    </div>
                </div>
                <div class="card mt-3">
                    <div class="card-body">
                        <h5 class="card-title">Temps estimé</h5>
                        <h4 class="card-text text-center">{{ estimatedTime }}</h4>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                {% if nodeInfos | length != 0 %}
                    <div class="card">
                        <div class="card-header bg-info">
                            <h6>Etat actuel des noeuds ({{ nodeInfos | length }} fonctionnels)</h6>
                        </div>
                        <div class="card-body">
                            <div class="accordion" id="nodes">
                                {% for id, node in nodes.items() %}
                                    {% if node in nodeInfos %}
                                        <div class="card">
                                            <div class="card-header" id="heading{{ id }}">
                                                <h2 class="mb-0">
                                                    <button class="btn btn-link" type="button" data-toggle="collapse"
                                                            data-target="#collapse{{ id }}" aria-expanded="true"
                                                            aria-controls="collapse{{ id }}">
                                                        <i class="fa fa-plug"></i>
                                                        {{ node }}
                                                    </button>
                                                </h2>
                                            </div>

                                            <div id="collapse{{ id }}" class="collapse" aria-labelledby="heading{{ id }}"
                                                 data-parent="#nodes">
                                                <div class="card-body">
                                                    Nombre d'esclaves : {{ nodeInfos[node]["processPool"] }} <br>
                                                    <a class="text-right" href="http://{{ node + ":" + clientPort + "/files/all" }}">
                                                        <p class="small"><i class="fa fa-download"></i> Tout télécharger</p>
                                                    </a>
                                                    <hr>
                                                    Fichiers récupérés :
                                                    {% if nodeInfos[node]["files"] | length > 0 %}
                                                        <ul>
                                                        {% for file in nodeInfos[node]["files"] %}
                                                            <li>
                                                                <a href="http://{{ node + ":" + clientPort + "/files/" + file }}">
                                                                    {{ file }}
                                                                </a>
                                                            </li>
                                                        {% endfor %}
                                                        </ul>
                                                    {% else %}
                                                        Aucun pour le moment.
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    {% endif %}
                                {% endfor %}
                            </div>
					    </div>
                    </div>
                {% else %}
                    <div class="card">
                        <div class="card-header bg-danger text-white">
                            <span class="fa fa-exclamation-triangle"></span>
                            Aucun noeud détecté.
                        </div>
                    </div>
                {% endif %}
            </div>
            <div class="clearfix"></div>
		</div>
	</div>
{% endblock %}