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

{% block scripts %}
<script>
var projectId = '{{project-id}}';
var analysisId = '{{analysis-id}}';
var product = 'enterprise';
var viewContext = '';
var fileName= '{{file-name}}';
var hotspotChangeFrequenciesUrl = '{{ hotspots-csv-file-name }}';

const temporalBaseUrl = {
  launcher: '{{launcher-url}}',
  deps: '{{deps-url}}',
  stats: '{{stats-url}}',
  couplingUnit: 'Shared Tickets',
};

codescene.views.analyses.xray.init({
  projectId,
  analysisId,
  fileName,
  temporalBaseUrl,
  product,
  viewContext,
  hotspotChangeFrequenciesUrl
});
</script>
{% endblock %}

{% block main-content %}
<div class="xray-view">
  <div class="row">
    <div class="col-xs-12">
      <h1>
        X-Ray Results
        <a href="{{view-context}}/docs/guides/technical/xray.html" target="_blank" class="help-link pull-right">
          <i class="fa fa-question-circle"></i>
        </a>
      </h1>
      <ol class="breadcrumb">
        <li>
          <a href="{{view-context}}/{{project-id}}/analyses/{{analysis-id}}/code/temporal-coupling">Temporal Coupling</a>
        </li>
        <li class="active">{{file-name}}</li>
      </ol>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <div class="progress-indicator"></div>
      <div class="error"></div>
    </div>
  </div>
  <div class="row content">
    <div class="col-xs-12 tab-list-wrapper">
      <ul class="nav tabs">
        <li data-tab-id="external-temporal-coupling"><a href="#external-temporal-coupling">External Change Coupling</a></li>
        <li data-tab-id="external-temporal-coupling-details"><a href="#external-temporal-coupling-details">External Change Coupling Details</a></li>
      </ul>
    </div>
    <div class="col-xs-12">
      <div class="tab-content">
        
        <div class="tab active" data-tab-id="external-temporal-coupling">
          <div id="external-temporal-cluster-dependencies"></div>
        </div>

        <div class="tab" data-tab-id="external-temporal-coupling-details">
          <div id="external-temporal-cluster-details" class="coupling-table"></div>
        </div>
      
      </div>
    </div>
  </div>
</div>
{% endblock %}