{% extends 'base.html' %}
{% block content %}
    <form method="POST">
        <div class='row'>
            <h1>Deploy <span style="color: #337ab7;">{{application_name}}</span> to a Linode</h1>
            <p>
                This will create a brand new linode running {{application_name}} on your
                account and give you the credentials.
            </p>
        </div>
        <div class='row'>
            <div class='form-group'>
                <label for='type'>Type</label>
                <select name='type'i id='type' class='form-control'
                    onblur="blurring(this)" onfocus="focusing(this)">
                    {% for s in types %}
                        <option value="{{s.id}}">{{s.label}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class='form-group'>
                <label for='region'>Region</label>
                <select name='region' id='region' class='form-control'
                    onblur="blurring(this)" onfocus="focusing(this)">
                    {% for o in regions %}
                        <option value="{{o.id}}">{{o.id}}</option>
                    {% endfor %}
                </select>
            </div>
            <div class='form-group'>
                <label for='distribution'>Images</label>
                <select name='distribution' id='distribution' class='form-control'
                    onblur="blurring(this)" onfocus="focusing(this)">
                    {% for d in stackscript.images %}
                        <option value="{{d.id.id}}">{{d.id.id}}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class='row'>
            <input type="submit" value="Deploy Linode" class='btn btn-primary btn-lg'/>
        </div>
    </form>
    <script>
        function focusing(ele){
            ele.parentElement.style.borderColor = "#337ab7";
        }
        function blurring(ele){
            ele.parentElement.style.borderColor = "#cccccc";
        }
    </script>
{% endblock %}