{% extends "base.html" %}
{% load i18n static requirements_extras %}

{% block title %}{% trans "Requirements traceability" %} — {{ view_title }}{% endblock %}

{% block contents %}
<div class="container-fluid" id="requirements-traceability"
     {% if show_export_buttons %}
     data-export-docx-url="{% url 'requirement-traceability-export' 'docx' %}"
     data-export-pdf-url="{% url 'requirement-traceability-export' 'pdf' %}"
     {% endif %}>
  <div class="page-header">
    <h1>
      {{ view_title }}
      <small>{{ view_subtitle }}</small>
    </h1>
    <div class="requirements-page-toolbar">
      <a href="{% url 'requirement-dashboard' %}" class="btn btn-link">
        <i class="fa fa-arrow-left"></i> {% trans "Dashboard" %}
      </a>
      <div class="requirements-toolbar-spacer"></div>
      {% if show_export_buttons %}
      <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fa fa-download"></i> {% trans "Export" %} <span class="caret"></span>
        </button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#" id="requirements-export-docx"><i class="fa fa-file-word-o"></i> DOCX</a></li>
          <li><a href="#" id="requirements-export-pdf"><i class="fa fa-file-pdf-o"></i> PDF</a></li>
        </ul>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- View switcher — card-style tiles. -->
  <div class="traceability-view-switcher">
    {% for key, icon, label, subtitle, url_name in available_views %}
      <a href="{% url url_name %}{% if request.GET.urlencode %}?{{ request.GET.urlencode }}{% endif %}"
         class="traceability-view-card {% if key == view_key %}is-active{% endif %}">
        <div class="traceability-view-card-icon">
          <i class="fa {{ icon }}"></i>
        </div>
        <div class="traceability-view-card-body">
          <div class="traceability-view-card-label">{{ label }}</div>
          <div class="traceability-view-card-subtitle">{{ subtitle }}</div>
        </div>
      </a>
    {% endfor %}
  </div>

  <form method="get" class="requirements-filters">
    <div class="form-group">
      <label for="product">{% trans "Product" %}</label>
      <select name="product" id="product" class="form-control">
        <option value="">{% trans "— any —" %}</option>
        {% for id, label in products %}
          <option value="{{ id }}" {% if filter_values.product == id %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="project">{% trans "Project" %}</label>
      <select name="project" id="project" class="form-control">
        <option value="">{% trans "— any —" %}</option>
        {% for id, label in projects %}
          <option value="{{ id }}" {% if filter_values.project == id %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="feature">{% trans "Feature" %}</label>
      <select name="feature" id="feature" class="form-control">
        <option value="">{% trans "— any —" %}</option>
        {% for id, label in features %}
          <option value="{{ id }}" {% if filter_values.feature == id %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="requirements-filters-actions">
      <button type="submit" class="btn btn-primary">{% trans "Apply" %}</button>
      <a href="{{ request.path }}" class="btn btn-link">{% trans "Reset" %}</a>
    </div>
  </form>

  <div id="requirements-sankey-wrap">
    <div id="requirements-sankey-status" class="text-muted"></div>
    <div id="requirements-sankey-legend" class="sankey-legend" aria-label="{% trans 'Sankey colour legend' %}"></div>
    <svg id="requirements-sankey"></svg>
  </div>
</div>

{% comment %}
  Sankey payload sits on a hidden <input value=...> for CSP-safety —
  strict script-src can block <script type="application/json"> blocks.
  The renderer reads .value (auto-unescaped) instead of .textContent.
{% endcomment %}
<input type="hidden" id="requirements-sankey-data" value="{{ payload_json }}">

{% if show_export_buttons %}
{% comment %}
  CSRF input only — JS export uses fetch() with FormData, not form.submit().
  Filter inputs are no longer needed because the project / product / feature
  filters are read from the page URL by the GET endpoint when SVG is empty.
{% endcomment %}
<form id="requirements-export-csrf" style="display:none;">{% csrf_token %}</form>
{% endif %}

<link rel="stylesheet" href="{% static 'tcms_requirements/css/requirements.css' %}?v={% plugin_version %}">
<script src="{% static 'tcms_requirements/vendor/d3.v7.min.js' %}"></script>
<script src="{% static 'tcms_requirements/vendor/d3-sankey.min.js' %}"></script>
<script src="{% static 'tcms_requirements/js/traceability.js' %}?v={% plugin_version %}"></script>
{% if show_export_buttons %}
<script src="{% static 'tcms_requirements/js/traceability_export.js' %}?v={% plugin_version %}"></script>
{% endif %}
{% endblock %}