{% 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;
  }

  .info-icon {
    color: #337ab7;
    margin-left: 5px;
  }
</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:"" }}" name="{{ app_form.name.name }}">
            <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{% if app_form.errors.tags %}has-error{% endif %}">
          <label for="{{ app_form.tags.name }}" class="col-sm-2 control-label" data-toggle="tooltip">
              Tags
              <span class="glyphicon glyphicon-info-sign info-icon" title="Separate multiple tags with commas"></span>
          </label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="{{ app_form.tags.name}}" value="{{ app_form.tags.value|default:"" }}" name="{{ app_form.tags.name }}">
            <span class="help-inline">{{ app_form.errors.tags }}</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").val();
    var token = form.serialize();
    var team = "&name=".concat(new_team)
    var form_data = token.concat(team);
    $.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");
      });
    });
  });

  $(function () {
    $('.info-icon').tooltip();
  });
</script>
{% endblock %}
