<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Login Page</title>
    
    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">
    
    <meta name="msapplication-TileColor" content="#5bc0de" />
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png" />
    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/lib/bootstrap/css/bootstrap.css">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.css">
    
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="assets/css/main.css">
    
    <!-- metisMenu stylesheet -->
    <link rel="stylesheet" href="assets/lib/metismenu/metisMenu.css">
    
    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="assets/lib/animate.css/animate.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body class="login">

      <div class="form-signin">
    <div class="text-center">
        <img src="assets/img/logo.png" alt="Metis Logo">
    </div>
    <hr>
    <div class="tab-content">
        <div id="login" class="tab-pane active">
            <form action="/login" method="post" accept-charset="utf-8">
                <p class="text-muted text-center">
                   VirtualCoach
                </p>
                <input type="text" placeholder="Usuario" class="form-control top" name="username">
                <input type="password" placeholder="Contraseña" class="form-control bottom" name="password">
                <div class="checkbox">
          <label>
		    <input type="checkbox"> Recuérdame
		  </label>
		</div>
                <button class="btn btn-lg btn-primary btn-block" type="submit" name="Entrar">Entrar</button>                
           	<input type="hidden" name="_csrf" value="{{token}}"/>
            </form>
        </div>
        <div id="forgot" class="tab-pane">
            <form action="index.html">
                <p class="text-muted text-center">Introduzca su e-mail</p>
                <input type="email" placeholder="mail@domain.com" class="form-control">
                <br>
                <button class="btn btn-lg btn-danger btn-block" type="submit">Recuperar Contraseña</button>
            </form>
        </div>
         <div id="signup" name="signup" class="tab-pane" >

            <form action="/registro_nuevo" method="post" >
                <input type='text' placeholder='Nombre' name='nombre' class="form-control top">
                <input type='text' placeholder='Apellidos' name='apellido' class="form-control top">
                 <input type='text' placeholder='Usuario' name='usuario' class="form-control top">
                 <input type='email' placeholder='mail@domain.com' name='email' class="form-control middle">
                <input type='text' placeholder='Edad' name='edad' class="form-control top">
                <input type='password' placeholder="Contraseña" name='contraseña' class="form-control middle">
                <input type='password' placeholder='Repetir Contraseña' name='new_usu_rep_pass' class="form-control bottom">
				    <div class="form-group">
				      <label for="sel1">Selecciona tu entrenador:</label>

				      <select class="form-control" name='id'>
				      {{#Entrenador}}
				        <option value="{{id}}" > {{nombre}} {{apellido}}</option>
				      {{/Entrenador}}
				      </select>
                <button class="btn btn-lg btn-success btn-block" type="submit">Registrar</button>
				<input type="hidden" name="_csrf" value="{{token}}"/>
            </form>
        </div>
    </div>
    <hr>
    <div class="text-center">
        <ul class="list-inline">
            <li><a class="text-muted" href="#login" data-toggle="tab">Entrar</a></li>
            <li><a class="text-muted" href="#forgot" data-toggle="tab">Olvidé mi contraseña</a></li>
            <li><a class="text-muted" href="#signup" data-toggle="tab">Registrar</a></li>
        </ul>
    </div>
  </div>


    <!--jQuery -->
    <script src="assets/lib/jquery/jquery.js"></script>

    <!--Bootstrap -->
    <script src="assets/lib/bootstrap/js/bootstrap.js"></script>


    <script type="text/javascript">
        (function($) {
            $(document).ready(function() {
                $('.list-inline li > a').click(function() {
                    var activeForm = $(this).attr('href') + ' > form';
                    //console.log(activeForm);
                    $(activeForm).addClass('animated fadeIn');
                    //set timer to 1 seconds, after that, unload the animate animation
                    setTimeout(function() {
                        $(activeForm).removeClass('animated fadeIn');
                    }, 1000);
                });
            });
        })(jQuery);
    </script>
</body>

</html>
