{% 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="interests">What are your interests (you may select more than one)?</label>
                    <select class="form-control" id="interests" multiple>
                        <option value="running">Running</option>
                        <option value="imgur">Imgur</option>
                        <option value="anime">Anime</option>
                        <option value="programming">Programming</option>
                        <option value="android">Android</option>
                        <option value="apple">Apple</option>
                        <option value="math">Math</option>
                        <option value="aliens">Aliens</option>
                        <option value="reddit">Reddit</option>
                        <option value="science">Science</option>
                        <option value="scifi">Sci-fi</option>
                        <option value="3dprinting">3D printing</option>
                        <option value="videogames">Video Games</option>
                        <option value="minecraft">Minecraft</option>
                        <option value="coffee">coffee</option>
                        <option value="art">Art</option>
                        <option value="technology">Technology</option>
                        <option value="religion">Religion</option>
                        <option value="reading">Reading</option>
                        <option value="movies">Movies</option>
                        <option value="traveling">Traveling</option>
                        <option value="biking">Biking</option>
                        <option value="sports">sports</option>
                        <option value="concerts">Concerts</option>
                        <option value="dance">Dance</option>
                        <option value="cooking">Cooking</option>
                        <option value="astrology">Astrology</option>
                        <option value="cars">Cars</option>
                        <option value="chess">Chess</option>
                        <option value="painting">Painting</option>
                        <option value="netflix">Netflix</option>
                        <option value="sleeping">Sleeping</option>
                        <option value="comedy">Comedy</option>
                        <option value="horror">Horror</option>
                        <option value="cartoon">cartoon</option>
                        <option value="drama">Drama</option>
                        <option value="biology">Biology</option>
                        <option value="fantasy">Fantasy</option>
                        <option value="dungeons_dragons">Dungones and Dragons</option>
                        <option value="fantasy_roleplay">Fantasy Roleplay</option>
                        <option value="roleplay">Roleplay</option>
                        <option value="larp">LARP</option>
                        <option value="counter_strike">Counter Strike</option>
                        <option value="fallout4">Fallout 4</option>
                        <option value="bioshock">Bioshock</option>
                        <option value="borderlands">Borderlands</option>
                        <option value="hl3">Half Life 3</option>
                        <option value="hl">Half Life</option>
                        <option value="l4d">Left 4 Dead</option>
                        <option value="falloutboy">Fall out boy</option>
                        <option value="newfoundglory">New Found Glory</option>
                        <option value="panicatthedisco">Panic At the Disco</option>
                        <option value="21pilots">Twenty 21 pilots</option>
                        <option value="linkinpark">Linkin Park</option>
                        <option value="simpleplan">Simple Plan</option>
                        <option value="modding">Modding</option>
                        <option value="homebrew">Home Brew</option>
                        <option value="evildead">Evil Dead</option>
                        <option value="firstwave">First Wave</option>
                        <option value="Farscape">Farscape</option>
                        <option value="doctorwho">Doctor Who</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Or enter a custom interest:</label>
                    <input type="text" id="customInterest"> <button id="interestAdd" type="button" class="btn btn-primary">Add</button>
                </div>
                <nav>
                    <ul class="pager">
                        <li><a href="./main/info/2">Next</a></li>
                    </ul>
                </nav>
            </form>
        </div>
    </div>
</div>


<script type="text/javascript">
    $(function () {
        $("#interests").select2();
        $("#interests").on("change", function () {
            $.post("./main/sessionset/interests/", {"interests": $(this).val()});
        });

        function addInterest() {
            var value = $("#customInterest").val();
            if (value) {
                $("#interests").append($("<option/>", {
                    value: value.toLowerCase(),
                    text: value.toLowerCase(),
                    selected: "selected"
                }));
                var original = $("#interests").val();
                var newval = $.merge([value], original);
                $("#interests").val(newval).change();
                $("#customInterest").val("");
            }
        }

        $("#customInterest").keyup(function (e) {
            if (e.which == $.ui.keyCode.ENTER) {
                addInterest();
            }
        });

        $("#interestAdd").click(function () {
            addInterest();
        });
    });
</script>

{% endblock %}