{% extends 'base.html' %}

{% block stylesheets %}
    <style>
        body .container{
            padding-top: 100px;
            height: 100%;
            flex: 1 0;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="row justify-content-center" style="margin-bottom: 100px">
        <div class="col col-lg-6 align-self-center">
            <div class="alert alert-success mb-5" role="alert">
                <h4 class="alert-heading">¡Gracias por contestar!</h4>
                <hr>
                <p class="mb-0">Para acabar rellena este formulario para que sepamos más sobre ti.</p>
            </div>

            <div class="card">
                <form action="{% url 'index' %}" method="POST">
                    <div class="card-body">
                        <h1 class="card-title">
                            Datos Personales
                        </h1>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputNacimiento">Fecha de Nacimiento</label>
                            <input class="form-control" type="text" name="fechanacimiento" id="inputNacimiento" autofocus>
                        </fieldset>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputEstudios">Nivel de estudios</label>
                            <input class="form-control" type="text" name="estudios" id="inputEstudios" autofocus>
                        </fieldset>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputPais">Pais de nacimiento</label>
                            <input class="form-control" type="text" name="paisnacimiento" id="inputPais" autofocus>
                        </fieldset>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputCiudad">Ciudad de nacimiento</label>
                            <input class="form-control" type="text" name="ciudadnacimiento" id="inputCiudad" autofocus>
                        </fieldset>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputPaisActual">Pais de residencia actual</label>
                            <input class="form-control" type="text" name="paisactual" id="inputPaisActual" autofocus>
                        </fieldset>
                        <fieldset class="form-group">
                            <label class="bmd-label-floating" for="inputCiudadActual">Ciudad de residencia actual</label>
                            <input class="form-control" type="text" name="ciudadactual" id="inputCiudadActual" autofocus>
                        </fieldset>

                    </div>
                    <div class="card-footer text-center">
                        <button type="submit" id="enviar" class="btn btn-primary align-self-center">ENVIAR</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% include  'footer.html'%}
{% endblock %}

{% block footer1 %}
    {% endblock %}

{% block javascripts %}
    <script>
        $('.datepicker').datepicker({
            showOtherMonths: true,
            format: 'yyyy-mm-dd'
        });
    </script>
{% endblock %}