{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
<form action="/vm/new/{{base.id}}/" method="post" id="template-wizard">{% csrf_token %}
    <div id="new-template-step-2" class="wizard">
        <div class="progress">
            <div class="bar-container">
                <div class="bar" style="width: 66%"></div>
            </div>
            <h3>{% blocktrans with step=2 all=3 %}{{step}}/{{all}}{% endblocktrans %}</h3>
        </div>
        <h2>{% blocktrans with step=2 %}Step {{step}}{% endblocktrans %}</h2>
        <p>{% trans "Change the parameters as needed." %}</p>
        <ul>
            <li>
            <label for="new-template-name">{% trans "Name" %}</label>
                <input type="text" name="name" id="new-template-name" value="{{base.name}}"
                class="error validated" title="{% trans "Please choose a different name." %}" />
                <div class="clear"></div>
            </li>
            <li class="new-tpl-size">
                <label for="new-template-size">{% trans "Size" %}</label>
                <ul class="radio">
                    {% for s in sizes %}
                    <li>
                        <label>
                            <input type="radio" name="size" value="{{s.id}}" id="new-template-size-{{s.id}}"
                            {% if s == base.instance_type %}checked="checked"{% endif %} />
                            {{s.name}}
                        </label>
                    </li>
                    {% endfor %}
                </ul>
                {% for s in sizes %}
                <p id="new-template-size-summary-{{s.id}}" class="size-summary clear"
                {% if s != base.instance_type %}style="display:none"{% endif %}>
                    <span class="cpu">{% blocktrans count n=s.CPU %}{{n}} core{% plural %}{{n}} cores{% endblocktrans %}</span>
                    <span class="memory">{{s.RAM}} MiB</span>
                    <span class="credit">{{s.credit}}</span>
                </p>
                {% endfor %}
                <div class="clear"></div>
            </li>
            <li style="border: none">
                <label for="new-template-description">{% trans "Description" %}</label>
                <textarea name="description" id="new-template-description" style="text-align: left">{{base.description}}</textarea>
                <div class="clear"></div>
            </li>
        </ul>
        <nav>
            <!-- <a href="#" class="prev">{% trans "&laquo; Cancel" %}</a> -->
            <input type="reset" class="prev" value="{% trans "Cancel" %}" />
            <input type="submit" class="next" value="{% trans "Launch master instance" %}" />
            <div class="clear"></div>
        </nav>
        <script type="text/javascript">
            $(function(){
                $('#new-template-step-2 nav .prev').click(function(){
                    $('#modal').hide();
                })
                $(".new-tpl-size input[name='size']").click(function(e){
                    var v = $(".new-tpl-size input[name='size']:checked").val();
                    $("p.size-summary").hide();
                    $("#new-template-size-summary-" + v).show();
                });
                $('#new-template-step-2 nav .next').attr("disabled", "disabled");
                $("#new-template-name").change(function(e){
                    var s = $(this).val();
                    $.ajax({
                        'type': 'GET',
                        'url': '/ajax/template_name_unique/' + s,
                        'success': function(data, b, c) {
                            if (s != $("#new-template-name").val()) {
                                return True;
                            }
                            if (data == "True") {
                                $('#new-template-name').removeClass("error");
                                $('#new-template-step-2 nav .next').removeAttr("disabled");
                            }
                            else {
                                $('#new-template-name').addClass("error");
                                $('#new-template-step-2 nav .next').attr("disabled", "disabled");
                            }
                        }
                    });
                });
            })
        </script>
    </div>
</form>
