{% extends "base.html" %}

{% block sidebar %}
{% include "sidebar.html" with active="apps" %}
{% endblock %}

{% block header %}
<h1>New app</h1>
{% endblock %}

{% block extra_css %}
<style>
    select {
        float: left;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
	<div class="row-fluid">
		<div class="span12">
			<form action="" method="post">
				{% csrf_token %}
				<fieldset>
					<div class="clearfix control-group{% if app_form.errors.name %} error{% endif %}">
						<label for="{{ app_form.name.name }}">Name</label>
						<input type="text" class="input-xlarge" name="{{ app_form.name.name }}" id="{{ app_form.name.name }}" value="{{ app_form.name.value|default:"" }}">
						<span class="help-inline">{{ app_form.errors.name }}</span>
					</div>
					<div class="clearfix control-group{% if app_form.errors.platform %} error{% endif %}">
						<label for="{{ app_form.platform.name }}">Platform</label>
                        {{ app_form.platform }}
						<span class="help-inline">{{ app_form.errors.platform }}</span>
					</div>
					<div class="clearfix control-group{% if app_form.errors.teamOwner %} error{% endif %}">
						<label for="{{ app_form.teamOwner.name }}">Team</label>
                        {{ app_form.teamOwner }}
						<span class="help-inline">{{ app_form.errors.teamOwner }}</span>
                        <a class="btn add-team" data-toggle="modal" data-target="#add-team-modal" title="new team" href="#add-team">+</a>
					</div>
					<div class="clearfix control-group{% if app_form.errors.plan %} error{% endif %}">
						<label for="{{ app_form.plan.name }}">Plan</label>
                        {{ app_form.plan }}
						<span class="help-inline">{{ app_form.errors.plan }}</span>
					</div>
					<div class="clearfix control-group{% if app_form.errors.pool %} error{% endif %}">
						<label for="{{ app_form.pool.name }}">Pool</label>
                        {{ app_form.pool }}
						<span class="help-inline">{{ app_form.errors.pool }}</span>
					</div>
					<button class="btn primary" type="submit">Create app</button>
				</fieldset>
			</form>
		</div>
	</div>
</div>
<div id="add-team-modal" class="add-team-modal fade modal">
    <div class="container-fluid">
        <h3>Create a team</h3>
        <form id="add-team-form" action="{% url 'team-add' %}" method="post">
            {% csrf_token %}
            <fieldset>
                <div class="clearfix control-group">
                    <label>name</label>
                    <input type="text" name="name">
                    <span class="help-inline"></span>
                </div>
                <button class="btn primary add-team" type="submit">Create</button>
            </fieldset>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    $("button.add-team").on("click", function(e) {
        e.preventDefault();
        var form = $("#add-team-form");
        var new_team = form.find("input[name='name']").val();
        var form_data = form.serialize();
        $.post(form.attr("action"), form_data, function(data){
            $.get("/teams/", function(data) {
                var teams = $(data).find(".teams li a");
                $("#id_teamOwner").empty();
                teams.each(function(index, item) {
                    var team = $(item).text();
                    var opt = $("<option/>");
                    opt.attr({"value": team}).text(team);
                    if (team === new_team) {
                        opt.attr({"selected": true})
                    }
                    $("#id_teamOwner").append(opt);
                });
                $("#add-team-modal").modal("hide");
            });
        });
    });
</script>
{% endblock %}
