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

{% block title %}{{ project.name }}{% endblock %}

{% block contents %}
<div class="container-fluid" id="requirements-project-detail"
     data-project-id="{{ project.pk }}"
     data-export-docx-url="{% url 'requirement-project-export' project.pk 'docx' %}"
     data-export-pdf-url="{% url 'requirement-project-export' project.pk 'pdf' %}">
  <div class="page-header">
    <h1>
      {{ project.name }}
      <small>{{ project.product.name }}{% if project.code %} · <code>{{ project.code }}</code>{% endif %}</small>
      <span class="label requirements-project-pill requirements-project-pill-{{ project.status }}">
        {{ project.get_status_display }}
      </span>
    </h1>
    <div class="requirements-page-toolbar">
      <a href="{% url 'requirement-project-list' %}" class="btn btn-link" title="{% trans 'Back to projects list' %}">
        <i class="fa fa-arrow-left"></i> {% trans "All projects" %}
      </a>

      <div class="btn-group">
        <a href="{% url 'requirement-project-edit' project.pk %}" class="btn btn-primary">
          <i class="fa fa-edit"></i> {% trans "Edit" %}
        </a>
        <a href="{% url 'requirement-project-delete' project.pk %}" class="btn btn-default" title="{% trans 'Delete this project' %}">
          <i class="fa fa-trash"></i>
        </a>
      </div>

      <div class="requirements-toolbar-spacer"></div>

      <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-eye"></i> {% trans "Related" %} <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="{% url 'requirement-list' %}?project={{ project.pk }}">
            <i class="fa fa-list"></i> {% trans "Filter requirements" %}
          </a></li>
          <li><a href="{% url 'requirement-project-baseline-list' project.pk %}">
            <i class="fa fa-camera"></i> {% trans "Baselines" %}
          </a></li>
        </ul>
      </div>

      <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 class="dropdown-header">{% trans "With Sankey diagram" %}</li>
          <li><a href="#" id="project-export-docx-with-sankey">
            <i class="fa fa-file-word-o"></i> DOCX
          </a></li>
          <li><a href="#" id="project-export-pdf-with-sankey">
            <i class="fa fa-file-pdf-o"></i> PDF
          </a></li>
          <li role="separator" class="divider"></li>
          <li class="dropdown-header">{% trans "Table only (no diagram)" %}</li>
          <li><a href="{% url 'requirement-project-export' project.pk 'docx' %}">
            <i class="fa fa-file-word-o"></i> DOCX
          </a></li>
          <li><a href="{% url 'requirement-project-export' project.pk 'pdf' %}">
            <i class="fa fa-file-pdf-o"></i> PDF
          </a></li>
          <li role="separator" class="divider"></li>
          <li><a href="{% url 'requirement-project-evidence-pack' project.pk %}">
            <i class="fa fa-archive"></i> {% trans "Evidence pack (.zip)" %}
          </a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="row requirements-row-equal">
    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>{% trans "Programme metadata" %}</strong></div>
        <div class="panel-body">
          <dl class="dl-horizontal">
            <dt>{% trans "Owner" %}</dt>
            <dd>{% if project.owner %}{{ project.owner.get_full_name|default:project.owner.username }}{% else %}<em class="text-muted">—</em>{% endif %}</dd>
            <dt>{% trans "Stakeholders" %}</dt>
            <dd>
              {% for u in project.stakeholders.all %}
                <span class="label label-info requirements-pill">{{ u.get_full_name|default:u.username }}</span>
              {% empty %}
                <em class="text-muted">—</em>
              {% endfor %}
            </dd>
            <dt>{% trans "Start" %}</dt>
            <dd>{{ project.start_date|date:"Y-m-d (\WW)"|default:"—" }}</dd>
            <dt>{% trans "Target end" %}</dt>
            <dd>{{ project.target_end_date|date:"Y-m-d (\WW)"|default:"—" }}</dd>
            <dt>{% trans "Actual end" %}</dt>
            <dd>{{ project.actual_end_date|date:"Y-m-d (\WW)"|default:"—" }}</dd>
            <dt>{% trans "JIRA" %}</dt>
            <dd>{% if project.jira_project_key %}<code>{{ project.jira_project_key }}</code>{% else %}—{% endif %}</dd>
          </dl>
          {% if project.description %}
          <hr>
          <div>{{ project.description|linebreaksbr }}</div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="panel panel-default">
        <div class="panel-heading"><strong>{% trans "Coverage snapshot" %}</strong></div>
        <div class="panel-body requirements-project-coverage">
          <div class="row">
            <div class="col-xs-6">
              <h2 class="text-center">{{ snapshot.coverage.percent }}<small>%</small></h2>
              <p class="text-center text-muted">{{ snapshot.coverage.linked }} / {{ snapshot.coverage.total }} {% trans "linked" %}</p>
            </div>
            <div class="col-xs-6">
              <ul class="list-unstyled">
                <li><strong>{{ snapshot.total }}</strong> {% trans "requirements" %}</li>
                <li><span class="label label-warning requirements-pill">{{ snapshot.orphan_requirements }}</span> {% trans "orphan" %}</li>
                <li><span class="label label-danger requirements-pill">{{ snapshot.suspect_link_count }}</span> {% trans "suspect links" %}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="panel panel-default">
        <div class="panel-heading"><strong>{% trans "Test plans in scope" %}</strong></div>
        <div class="panel-body">
          {% if project.test_plans.all %}
          <ul class="list-unstyled">
            {% for plan in project.test_plans.all %}
              <li>
                <i class="fa fa-files-o"></i>
                <a href="/plan/{{ plan.pk }}/">TP-{{ plan.pk }}</a>
                {{ plan.name }}
              </li>
            {% endfor %}
          </ul>
          {% else %}
          <em class="text-muted">{% trans "No test plans linked. Use the admin to add some." %}</em>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <strong>{% trans "Traceability (project-scoped)" %}</strong>
    </div>
    <div class="panel-body">
      <div id="project-sankey-wrap">
        <div id="project-sankey-status" class="text-muted"></div>
        <div id="project-sankey-legend" class="sankey-legend" aria-label="{% trans 'Sankey colour legend' %}"></div>
        <svg id="project-sankey"></svg>
      </div>
      {% comment %}
        Payload sits on a hidden <input value=...> so it's CSP-safe —
        strict script-src can block <script type="application/json"> data
        blocks in some configurations. The renderer reads .value (auto-
        unescaped JSON string) instead of .textContent.
      {% endcomment %}
      <input type="hidden" id="project-sankey-payload" value="{{ sankey_payload_json }}">
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <strong>{% trans "Requirements" %}</strong>
      <small class="text-muted">{{ requirements|length }} {% trans "in scope" %}</small>
    </div>
    {% if requirements %}
    <table class="table table-condensed table-striped requirements-table">
      <thead>
        <tr>
          <th>{% trans "Identifier" %}</th>
          <th>{% trans "Title" %}</th>
          <th>{% trans "Level" %}</th>
          <th>{% trans "Feature" %}</th>
          <th>{% trans "Status" %}</th>
          <th>{% trans "Cases" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for r in requirements %}
        <tr>
          <td><a href="{% url 'requirement-get' r.pk %}">{{ r.identifier }}</a></td>
          <td>{{ r.title }}</td>
          <td>{{ r.level.name|default:"—" }}</td>
          <td>{{ r.feature.name|default:"—" }}</td>
          <td>{% status_badge r.status %}</td>
          <td>{{ r.case_links.all|length }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="panel-body">
      <em class="text-muted">{% trans "No requirements assigned to this project yet." %}</em>
    </div>
    {% endif %}
  </div>

  {% comment %}
    JS-driven export uses fetch() with the page's CSRF token and posts
    the live-captured SVG. Keep a bare CSRF input on the page so
    wireSankeyExport can find it via querySelector.
  {% endcomment %}
  <form id="project-export-csrf" style="display:none;">{% csrf_token %}</form>
</div>

{% load requirements_extras %}
<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>
<script src="{% static 'tcms_requirements/js/traceability_export.js' %}?v={% plugin_version %}"></script>
<script src="{% static 'tcms_requirements/js/project_detail.js' %}?v={% plugin_version %}"></script>
{% endblock %}