{% extends "cacsremoteservice/views/layouts/master.html" %}

{% block scripts %}
<script type="text/javascript">
var settingsId = '{{item.id}}';
codescene.views.developerConfiguration.teams.init(settingsId);
</script>
{% endblock %}

{% block secondary-nav %}
{% include "cacsremoteservice/views/developer-configuration/developer-configuration-header.html" with item=item tabs=tabs %}
{% endblock %}

{% block main %}
<div class="developer-configuration-teams-view" id="page-body">
  <div class="text-content">
    <h2>Development Teams</h2>
    <p class="lead text-muted">
      By specifying all the development teams working on <em>{{item.name}}</em>,
      you make it possible to analyze your project
      from a team perspective. That is, you get knowledge maps on team levels
      and we're also able to spot expensive change patterns that ripple over
      team boundaries.
    </p>
  </div>


  {% if teams|not-empty %}
  <div class="text-content">
    <hr />
      <h3>Edit Teams</h3>
      <form action="" method="post" name="teams_form">
        <table class="table table-striped" id="all-teams-table">
          <thead>
            <tr>
              <th>Name</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for team in teams %}
            <tr data-team-id="{{team.id}}">
              <td>
                <input class="form-control" type="text" value="{{team.name}}" name="name_{{team.id}}" required/>
              </td>
              <td class="team-actions">
                <button data-team-id="{{team.id}}"
                        data-team-name="{{team.name}}"
                        class="default-button danger delete-team-button">
                  Delete
                </button>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
        <button class="default-button" type="submit">Save Teams</button>
      </form>
  </div>
  {% endif %}
  <div class="text-content">
      <hr />
      <h3>Add a New Team</h3>
      <form action="{{view-context}}/developer-configurations/{{item.id}}/teams/add"
            method="post"
            name="add_teams_form">
	<table class="table table-striped new-team-table">
	  <tbody>
            <tr>
              <td>
                <input data-automation-id="input-field-team-name" class="form-control" type="text" value="" name="teamname" required>
              </td>
              <td class="team-actions">
                <button data-automation-id="add-new-team" class="default-button" type="submit">New Team</button>
              </td>
            </tr>
          </tbody>
        </table>
      </form>
  </div>

  <div class="text-content">
      <hr />
      <h3>Import/Export Developers and Teams</h3>
      <form action="{{view-context}}/developer-configurations/{{item.id}}/teams/import" method="post" name="teams_import_form" enctype="multipart/form-data">
        <div class="form-group">
          <input class="form-control" type="file" accept=".csv" name="importteamsfile" required/>
          <span class="help-block">
              Import or export a definition of Developers and Teams using a CSV format with two columns: author, team
          </span>
        </div>
        <button class="default-button" type="submit">Import Teams</button>
        <a class="default-button" id="export-teams" href="{{view-context}}/developer-configurations/{{item.id}}/export/teams.csv">
          Export Teams
        </a>
      </form>
  </div>
  
</div>
{% endblock %}