{% extends "base.html" %}

{% block content %}
   <h1> Nodes </h1> {{ node_list|length }} nodes

   <table class="table table-striped table-condensed">
      <tr>
         <td><b>Node</b></td>
         <td><b>IP</b></td>
         <td><b>Port</b></td>
         <td></td>
      </tr>
      {% for node in node_list %}
      <tr>
         <td><a href="{% url "Nodes:node" node.name %}">{{ node.name }}</a></td>
         <td>{{ node.hostname }}</td>
         <td>{{ node.port }}</td>
         <td><a href="{% url "Nodes:delete_node" node.name %}"><button type="button" class="btn btn-primary btn-xs"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>Remove</button><a/></td>
      </tr>
      {% endfor %}
   </table>

   </br>
   <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#action_new">New</button></td>

   <!-- Modal -->
   <div class="modal fade" id="action_new" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h4 class="modal-title" id="myModalLabel">New node</h4>
         </div>

         <form action="{% url "Nodes:new_node" %}" enctype="multipart/form-data" method="post">
            {% csrf_token %}

            <div class="modal-body">
                  <label for="name">Name</label>
                  <input type="text" class="form-control" id="name" name="name">
                  </br>
                  <label for="hostname">Hostname</label>
                  <input type="text" class="form-control" id="hostname" name="hostname">
                  </br>
                  <label for="port">Port</label>
                  <input type="number" class="form-control" id="port" name="port">
                  </br>
                  <label for="username">Username</label>
                  <input type="text" class="form-control" id="username" name="username">
                  </br>
                  <label for="password">Password</label>
                  <input type="text" class="form-control" id="password" name="password">
            </div>

            <div class="modal-footer">
               <button type="submit" class="btn btn-primary" >New</button>
            </div>
         </form>

       </div>
     </div>
   </div>

{% endblock %}