{% extends "base.html" %}
{% block content %}
<h1>{{ product.name }}</h1>
<p><a href="/data-products">Back to data products</a></p>
<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Overview</h5>
        <dl class="row mb-0">
          <dt class="col-sm-4">Identifier</dt><dd class="col-sm-8"><code>{{ product.id }}</code></dd>
          <dt class="col-sm-4">Version</dt><dd class="col-sm-8">{{ product.version or '—' }}</dd>
          <dt class="col-sm-4">Status</dt><dd class="col-sm-8">{{ product.status or 'unknown' }}</dd>
          {% if product.description and product.description.usage %}
          <dt class="col-sm-4">Usage</dt><dd class="col-sm-8">{{ product.description.usage }}</dd>
          {% endif %}
          {% if product.tags %}
          <dt class="col-sm-4">Tags</dt>
          <dd class="col-sm-8">
            {% for tag in product.tags %}
              <span class="badge bg-light text-dark border me-1">{{ tag }}</span>
            {% endfor %}
          </dd>
          {% endif %}
        </dl>
      </div>
      {% if product.custom_properties %}
      <div class="card-footer">
        <details>
          <summary class="small text-muted">View custom properties</summary>
          <pre class="small bg-light p-2 mt-2 rounded">{{ product.custom_properties | tojson(indent=2) }}</pre>
        </details>
      </div>
      {% endif %}
    </div>
  </div>
  <div class="col-md-8">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Recent runs</h5>
        {% if product.records %}
        <div class="table-responsive">
          <table class="table table-sm align-middle mb-0">
            <thead>
              <tr>
                <th scope="col">Dataset</th>
                <th scope="col">Version</th>
                <th scope="col">Role</th>
                <th scope="col">Status</th>
                <th scope="col">Run type</th>
                <th scope="col">Contract</th>
              </tr>
            </thead>
            <tbody>
            {% for record in product.records | reverse %}
              <tr>
                <td>
                  <a href="/datasets/{{ record.dataset_name }}/{{ record.dataset_version }}">{{ record.dataset_name }}</a>
                </td>
                <td>{{ record.dataset_version }}</td>
                <td>
                  {% if record.data_product_role %}
                    <span class="badge bg-secondary text-uppercase">{{ record.data_product_role }}</span>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td>{{ record.status }}{% if record.reason %}<div class="small text-muted">{{ record.reason }}</div>{% endif %}</td>
                <td>{{ record.run_type }}</td>
                <td>
                  {% if record.contract_id %}
                    <a href="/contracts/{{ record.contract_id }}">{{ record.contract_id }}</a>
                    {% if record.contract_version %}
                      <span class="text-muted">/</span>
                      <a href="/contracts/{{ record.contract_id }}/{{ record.contract_version }}">{{ record.contract_version }}</a>
                    {% endif %}
                  {% else %}
                    <span class="text-muted">None</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
            </tbody>
          </table>
        </div>
        {% else %}
        <p class="text-muted mb-0">No recorded runs yet.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
<div class="row g-3">
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Input ports</h5>
        {% if product.inputs %}
        <table class="table table-sm align-middle">
          <thead><tr><th scope="col">Port</th><th scope="col">Contract</th><th scope="col">Source</th></tr></thead>
          <tbody>
          {% for port in product.inputs %}
            <tr>
              <td>{{ port.name }}</td>
              <td>
                {% if port.contract_id %}
                  <a href="/contracts/{{ port.contract_id }}">{{ port.contract_id }}</a>
                  {% if port.version %}
                    <span class="text-muted">/</span>
                    <a href="/contracts/{{ port.contract_id }}/{{ port.version }}">{{ port.version }}</a>
                  {% endif %}
                {% else %}
                  <span class="text-muted">None</span>
                {% endif %}
              </td>
              <td>
                {% if port.source_data_product %}
                  <a href="/data-products/{{ port.source_data_product }}">{{ port.source_data_product }}</a>
                  {% if port.source_output_port %}
                    <span class="text-muted">/</span>
                    <code>{{ port.source_output_port }}</code>
                  {% endif %}
                {% else %}
                  <span class="text-muted">n/a</span>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-muted mb-0">No input ports defined.</p>
        {% endif %}
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Output ports</h5>
        {% if product.outputs %}
        <table class="table table-sm align-middle">
          <thead><tr><th scope="col">Port</th><th scope="col">Contract</th><th scope="col">Dataset</th></tr></thead>
          <tbody>
          {% for port in product.outputs %}
            <tr>
              <td>{{ port.name }}</td>
              <td>
                {% if port.contract_id %}
                  <a href="/contracts/{{ port.contract_id }}">{{ port.contract_id }}</a>
                  {% if port.version %}
                    <span class="text-muted">/</span>
                    <a href="/contracts/{{ port.contract_id }}/{{ port.version }}">{{ port.version }}</a>
                  {% endif %}
                {% else %}
                  <span class="text-muted">None</span>
                {% endif %}
              </td>
              <td>
                {% if port.dataset_id %}
                  <code>{{ port.dataset_id }}</code>
                {% else %}
                  <span class="text-muted">n/a</span>
                {% endif %}
                {% if port.stage_contract %}
                  <div class="small text-muted">Stage contract {{ port.stage_contract }}</div>
                {% endif %}
                {% if port.records %}
                  <div class="small text-muted">Runs: {{ port.records | length }}</div>
                {% endif %}
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
        {% else %}
        <p class="text-muted mb-0">No output ports defined.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}