{% 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">
		<div class="col-md-12">
			<form action="" method="post" class="form-horizontal">
				{% csrf_token %}
			  <div class="form-group{% if app_form.errors.name %}has-error{% endif %}">
				<label for="{{ app_form.name.name }}" class="col-sm-2 control-label">Name</label>
				<div class="col-sm-10">
				  <input type="text" class="form-control" id="{{ app_form.name.name }}" value="{{ app_form.name.value|default:"" }}">
				  <span class="help-inline">{{ app_form.errors.name }}</span>
				</div>
			  </div>
			  <div class="form-group{% if app_form.errors.platform %}has-error{% endif %}">
				<label for="{{ app_form.platform.name }}" class="col-sm-2 control-label">Platform</label>
				<div class="col-sm-10">
                  {{ app_form.platform }}
				  <span class="help-inline">{{ app_form.errors.platform }}</span>
				</div>
			  </div>
			  <div class="form-group{% if app_form.errors.teamOwner %}has-error{% endif %}">
				<label for="{{ app_form.teamOwner.name }}" class="col-sm-2 control-label">Team</label>
				<div class="col-sm-10">
                  {{ app_form.teamOwner }}
				  <span class="help-inline">{{ app_form.errors.teamOwner }}</span>
                  <a class="btn btn-default add-team" data-toggle="modal" data-target="#add-team-modal" title="new team" href="#add-team">+</a>
				</div>
			  </div>
			  <div class="form-group{% if app_form.errors.plan %}has-error{% endif %}">
				<label for="{{ app_form.plan.name }}" class="col-sm-2 control-label">Plan</label>
				<div class="col-sm-10">
                  {{ app_form.plan }}
				  <span class="help-inline">{{ app_form.errors.plan }}</span>
				</div>
			  </div>
			  <div class="form-group{% if app_form.errors.pool %}has-error{% endif %}">
				<label for="{{ app_form.pool.name }}" class="col-sm-2 control-label">Pool</label>
				<div class="col-sm-10">
                  {{ app_form.pool }}
				  <span class="help-inline">{{ app_form.errors.pool }}</span>
				</div>
			  </div>
			  <div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
				  <button type="submit" class="btn btn-default">Create app</button>
				</div>
			  </div>
			</form>
		</div>
	</div>
</div>
<div id="add-team-modal" class="add-team-modal fade modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Create a team</h4>
      </div>
      <form id="add-team-form" action="{% url 'team-add' %}" method="post">
      <div class="modal-body">
            {% csrf_token %}
		    <div class="form-group">
			  <label for="name" class="control-label">Name</label>
			  <input type="text" class="form-control" id="name" />
		    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button class="btn btn-primary add-team" type="submit">Create</button>
      </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% 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 %}
