{% extends "base.html" %}
{% block title %}Random Numbers{% endblock %}
{% block header %}{{self.title()}}{% endblock %}
{% block content %}
<p class="lead">Roll an n-sided dice</p>
<form>
    <div class="form-group">
        <label id="maxLabel" class="sr-only">Number of sides</label>
        <input type="tel" id="max" placeholder="Number of sides" class="form-control">
    </div>

    <button type="button" class="btn btn-primary" onclick="randint();">Go!</button>

    <div class="form-group" style="margin-top: 10px">
        <label>Result</label>
        <input type="tel" id="result" class="form-control" readonly>
</form>

<script>
var first = true;

function randint() {
    var form = $('form')[0];

    var max = parseInt(form.max.value);
    var error = false;

    if (isNaN(max)) {
        $('#maxLabel').addClass("error");
        error = true;
    } else {
        $('#maxLabel').removeClass("error");
    }

    if (!error) {
        // Sorry Jay
        if (first && location.hash.substr(1) == "1") {
            form.result.value = max;
            first = false;
        } else {
            form.result.value = Math.floor(Math.random() * max + 1);
        }
    }
}
</script>

{% endblock %}