{% extends 'ElVerdaderoHeader.html' %}
{% block head %} 
{% endblock %}
{% block css %}
<link rel='stylesheet' href ='../../static/css/estilo.css'>
{% endblock %}

{% block body %}
<h1 class = 'text-center text-white bg-dark'>A&ntilde;ade un prisionero</h1>
<div class ='row'>
    <div class = 'col-3'>
    </div>
    <div class = 'col-6'>
        <form action ='/estudiante' method = 'POST'>
            Apellidos: <input type="text" name = 'apellidos' class="form-control" placeholder="Paterno Materno">
            Nombre: <input type="text" name = 'nombre' class="form-control" placeholder="ElDurako PR">
            Email: <input type= 'text' name = 'email' class = 'form-control' placeholder= 'tupapacito@hotbody.com'>
            <div class="form-check">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="Usuario" value = 'Maestro' id ='maestro' onclick ='javascript: myFunction("maestro", "estudiante")'>Maestro
              </label>
            </div>
            <div class="form-check">
              <label class="form-check-label">
                <input type="radio" class="form-check-input" name="Usuario" value = 'Estudiante'  id ='estudiante' onclick ='javascript: myFunction("estudiante", "maestro")'>Estudiante
              </label>
              <div id ='estudiante1' style ='display:none'>
            Grado: <input type = 'text' name= 'grado' class = 'form-control' placeholder ='6'>
            Educacion Especial: <input type = 'text' name = 'educ' class = 'form-control' placeholder ='Si/No'>
            </div>
            <div id ='maestro1' style ='display:none'>
            Especialidad:  <input type = 'text' name= 'especialidad' class = 'form-control' placeholder ='6'>
            </div>
<br>
<br>
            <div class='text-right'>
          <button type='submit' class = 'btn btn-primary'>Saoco</button> </form>
          </div>
        </div>
        <script>
          function myFunction(string, string2){

            var usuario = document.getElementById(string);
            var text = document.getElementById(string+'1');
            
            var usuarioNot = document.getElementById(string2);
            var textNot = document.getElementById(string2+'1');

            if(usuario.checked){
              text.style.display ='block';
              textNot.style.display ='none';
            }
            else{
              text.style.display ='none';
            }



            
          }
        </script>
          
{% endblock %}