{% extends "cacsremoteservice/views/layouts/analysis-view.html" %}

{% block scripts %}

<script type="text/javascript">
{% if contains-brooks-team-trends %}

function decodeHtmlEntities(text) {
  const element = document.createElement('div');
  element.innerHTML = text;
  return element.textContent;
}

{% for team in teams %}
codescene.views.analyses.brooksLaw.initTeamView({
  teamTrendRootUrl: '{{brooks-team-root}}',
  teamName: encodeURIComponent(decodeHtmlEntities('{{team}}')),
  uiElement: '.brooks-team-{{forloop.counter}}'
});
{% endfor %}
{% endif %}
</script>
{% endblock %}

{% block analysis-presentation %}
<h1>Delivery Effectiveness by Team</h1>
{% endblock %}

{% block main-content %}
<div class="brooks-law-view standard">
  {% with tabs=brooks-law-tabs %}
  {% include "cacsremoteservice/views/analyses/tabs.html" %}
  {% endwith %}
  <div class="row">
    <div class="col-xs-12">
      <h1>Delivery Effectiveness by Team
      </h1>
      <p class="lead text-muted">
        The following trends breaks down the <a href="{{view-context}}/docs/guides/social/brooks-law.html"
                                                target="_blank">Brooks's Law</a> view by development team.
        <a href="{{view-context}}/docs/guides/social/brooks-law.html#delivery-effectiveness-by-team" target="_blank" class="help-link pull-right">
          <i class="fa fa-question-circle"></i>
        </a>
      </p>
      {% if version-supports-brooks-team-trends %}
        {% if contains-brooks-team-trends %}
          <div class="brooks-law-by-team-graphs">
            {% for team in teams %}
            <div class="brooks-law-graph brooks-team-{{forloop.counter}}">
              <h2>{{team}}</h2>
            </div>
            {% endfor %}
          </div>
        {% else %}
        <div class="alert alert-warning">
          We could not find any teams. Check your project config to ensure you have defined your development
          teams and assigned each author to a team.
        </div>
        {% endif %}
      {% else %}
      <div class="alert alert-warning">
        This is a new type of analysis. Re-run your analysis project to fetch the data.
      </div>
      {% endif %}
    </div>
  </div>

</div>

{% endblock %}