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

{% block scripts %}
<script>
codescene.views.analyses.knowledgeDistribution.init({
  view: 'Teams',
  knowledgeDistributionUrl: '{{knowledge-enclosure-json}}',
  minimumLabelSize: {{min-size-for-label}},
  projectId: {{project-id}}
});
</script>
{% endblock %}

{% block main-content %}
<div class="knowledge-view">
  {% include "cacsremoteservice/views/analyses/knowledge-header.html" %}

  {% if teams|empty?%}

  <div class="alert alert-warning">
    <strong>You have no teams configured.</strong> Add teams in the <a
      class="alert-link"
      href="{{view-context}}/developer-configurations/{{dev-config-id}}/teams">project
      configuration</a>, and then <a
      class="alert-link"
      href="{{view-context}}/developer-configurations/{{dev-config-id}}/developers">assign
    developers</a> to those teams. Run a new analysis and you will have
    access to this analysis result.
  </div>

  {% else %}

  <div class="knowledge-view-controls">
    <div class="checkbox">
      <label>
        <input type="checkbox"
                value="Labels"
                id="show-labels-toggle" checked>
        Show Package Labels
      </label>
      <div class="help-block">Turn this off if your visualization looks cluttered.</div>
    </div>

    <p>
      <i class="fa fa-info-circle text-info"></i>
      Please have a look in the <a
      href="{{view-context}}/docs/configuration/developers-and-teams.html"
      target="_blank">guide</a> for examples and tips on team
      configurations.
    </p>

  </div>

  <div class="knowledge-view-body">
    <div class="legend-wrapper">
      <div class="legend">
        <ul>
          {% for team in teams %}
          <li><span class='color-legend-box' style='background: {{team.color}};'></span> {{team.name}}</li>
          {% endfor %}
          <li><span class="color-legend-box" style="background: black;"></span> Unassigned</li>
        </ul>
      </div>
      <div id="knowledgemap"></div>
    </div>
  </div>


  {% endif %}

</div>
{% endblock %}