{% extends "base.html" %}
{% block content %}
<div class="container container-table">
<div class="row vertical-center-row">
<div class="text-center col-md-6 col-md-offset-3">
<div>I just need a pieces of information from you so I can match you with your other half.</div>
<br>
<form role="form">
<div class="form-group">
<label for="gender">What is your gender?</label>
<select class="form-control" id="gender">
<option value=""></option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="transgender">Transgender</option>
<option value="other">Other</option>
<option value="agender">Agender</option>
<option value="transexual">Transexual</option>
<option value="pangender">Pangender</option>
<option value="genderfluid">Genderfluid</option>
<option value="transfeminine">Transfeminine</option>
<option value="transmasculine">Transmasculine</option>
<option value="trigenderpyrofox">Tri-gender pyrofox (from the forest planet)</option>
</select>
</div>
<div class="form-group">
<label>Or enter a custom gender:</label>
<input type="text" id="customGender"> <button id="genderAdd" type="button" class="btn btn-primary">Set</button>
</div>
<nav>
<ul class="pager">
<li><a href="./main/info/1">Prev</a></li>
<li><a href="./main/info/3">Next</a></li>
</ul>
</nav>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#gender").select2();
$("#gender").on("change", function () {
$.post("./main/sessionset/gender/", {"gender": $(this).val()});
});
function addGender() {
var value = $("#customGender").val();
if (value) {
$("#gender").append($("<option/>", {
value: value.toLowerCase(),
text: value.toLowerCase(),
selected: "selected"
}));
$("#gender").val(value).change();
$("#customGender").val("");
}
}
$("#customGender").keyup(function (e) {
if (e.which == $.ui.keyCode.ENTER) {
addGender();
}
});
$("#genderAdd").click(function () {
addGender();
});
});
</script>
{% endblock %}