{% extends 'ElVerdaderoHeader.html' %}
{% block head %}
{{name}} 
{% endblock %}

{% block css %}
<link rel='stylesheet' href ='../../../static/css/estilo.css'>
{% endblock %}
{% block body %}
<div class='row'>
    <div class ='col-3'></div>
    <div class =  'col-6'>
        <form action ='/addMatricula/{{oferId}}' method ='POST'>
            <div id='estudiantes'>
                <label class="mr-sm-2" for="inlineFormCustomSelect">Estudiantes</label>
                <select class="custom-select mr-sm-2" id = 'todosEstudiantes' name= 'estudiantes[0]'>
                  
                      <option selected>Choose...</option>
                  
                    {% for estudiante  in estudiantes %}
                        <option value ='{{estudiante.user_id}}'>{{estudiante.apellidos}}, {{estudiante.nombres}}</option>
                    {% endfor %}
                  
                </select>
            </div>
            <div id= 'estudiante'>

            </div>
            <input type = 'hidden' id = 'count' name = 'countRow' value = 1>
            <button type ='button' class ='btn btn-success' onclick ='javascript : myFunction("estudiante")'>Añade estudiante</button>
            
  <button type ='submit' class ='btn btn-primary'>Submit</button>
</div>
</div>
<br>
<br>
<div class ='row'>
    <div class ='col'>
        <h1 class = 'text-center'>Matriculados</h1>
        <table class = 'table table-hover'>
            <thead>
                <tr>
                    <th>Nombre</th>
                </tr>
            </thead>
            <tbody>
                {% for matriculado in matriculados %}

                <tr>
                    <td>{{matriculado.apellidos}}, {{matriculado.nombres}}</td>
                </tr>


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

<script>
    var index = 1
    function myFunction(string){
      var Estudiantes=document.getElementById(string);

      var node = document.createElement("div");
          
      var input = document.getElementById('count');
      var todosEstudiantes = document.getElementById('todosEstudiantes')
      
              
      var newForm = document.getElementById(string+'s')
      
      node.innerHTML = '<label class="mr-sm-2" for="inlineFormCustomSelect">Estudiantes</label>' +' <select class="custom-select mr-sm-2"  name= "estudiantes['+index+']">' + todosEstudiantes.innerHTML+' </select>';

    index +=1;
      Estudiantes.appendChild(node)

      
      input.value = parseInt(input.value) + 1;



      }


    
</script>
{% endblock %}