{% extends 'base_AdminLTE.html' %}

{% block title %}Docklet | Container{% endblock %}

{% block panel_title %}ContainerInfo{% endblock %}

{% block panel_list %}
<ol class="breadcrumb">
  <li>
      <a href="/index/"><i class="fa fa-dashboard"></i>Home</a>
  </li>
      <li class="active">
      <strong>ContainerInfo</strong>
  </li>
</ol>
{% endblock %}

{% block content %}
	  <div class="row">
	     <div class="col-md-12">
         <div class="box box-info">
              <div class="box-header with-border">
                <h3 class="box-title">Cluster Name: {{ clustername }}</h3>

                <div class="box-tools pull-right">
                  <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                  </button>
                  <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                </div>
              </div>
                     <div class="box-body">
			<p>
			<a href="/cluster/scaleout/{{ clustername }}"><button type="button" class="btn btn-primary btn-sm"><i class="fa fa-plus"></i>Add Container</button></a>
			</p>
                         <table class="table table-bordered">
                             <thead>
                             <tr>
				 <th>Node ID</th>
				 <th>Node Name</th>
                                 <th>IP Address</th>
                                 <th>Status</th>
				 <th>Last Save</th>
				 <th>Image</th>
				 <th>Detail</th>
				 <th>Flush</th>
				 <th>Save</th>
                             </tr>
                             </thead>
                             <tbody>
                             {% for container in containers %}
                             <tr>
                                 <td>{{ loop.index }}</td>
                                 <td>{{ container['containername'] }}</td>
                                 <td>{{ container['ip'] }}</td>

                                 {% if  status  == 'stopped' %}
                                 <td><div class="label label-danger">Stopped</div></td>
                                 {% else %}
                                 <td><div class="label label-primary">Running</div></td>
                                 {% endif %}

				 <td>{{ container['lastsave'] }}</td>
				 <td>{{ container['image'] }}</td>
                                 <td><a class="btn btn-info" href='/monitor/Node/{{ container['containername'] }}/detail/'>Detail</a></td>
				 <td><a class="btn btn-warning" href="/cluster/flush/{{ clustername }}/{{ container['containername'] }}/">Flush</a></td>
				 <td><button type="button" class="btn btn-success btn-sm btn-block" data-toggle="modal" data-target="#DelModal_{{ container['containername'] }}"> save</button></td>
				<div class="modal inmodal" id="DelModal_{{ container['containername'] }}" tabindex="-1" role="dialog" aria-hidden="true">
                                   <div class="modal-dialog">
                                   <div class="modal-content animated fadeIn">
                                           <div class="modal-header">
                                               <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                               <i class="fa fa-trash modal-icon"></i>
                                               <h4 class="modal-title">Save Image</h4>
                                               <small class="font-bold">Save Your Environment As a Image</small>
                                           </div>
                                           <div class="modal-body">
                                                <div class="form-group">
                                                  <form action="/cluster/save/{{ clustername }}/{{ container['containername'] }}/" method="GET" id="saveImage">
                                                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                                  <label>Image Name</label>
						  <input type="text" placeholder="Enter image name" class="form-control" name="ImageName" id="ImageName"/>
                                           	  <div class="modal-footer">
                                               		<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                                               		<button type="submit" class="btn btn-success">Save</button>
                                                  </div>
                                                  </form>
                                                </div>
                                           </div>
                                       </div>
                                   </div>
                               </div>
                               </div>

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

{% endblock %}