{% 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 %}