{% extends 'base.html' %}
{% block content %}
<div class="data-interface-page">
  <div class="data-interface-fixed">
    <div class="metrics">
      <div><strong>{{ project_count }}</strong><span>Projects</span></div>
      <div><strong>{{ dataset_count }}</strong><span>Datasets</span></div>
      <div><strong>{{ sample_count }}</strong><span>Samples</span></div>
    </div>
    <div class="data-interface-heading"><h1>Data Interface</h1></div>
    <p class="muted">Approved active data. Samples count distinct project + Sample_name groups.</p>
    <section class="card">
      <h2>Project by Data Type</h2>
      <div class="table-wrap matrix-wrap">
        <table class="data-type-matrix">
          <thead><tr><th class="matrix-project">Project</th>{% for kind in data_types %}<th class="matrix-type"><span>{{ kind }}</span></th>{% endfor %}</tr></thead>
          <tbody>{% for row in matrix %}<tr><th class="matrix-project">{{ row.project.code }}<small>{{ row.project.name }}</small></th>{% for cell in row.cells %}<td><a href="?project_id={{ row.project.pk }}&data_type={{ cell.type|urlencode }}">{{ cell.count }}</a></td>{% endfor %}</tr>{% endfor %}</tbody>
        </table>
      </div>
    </section>
  </div>
  <section id="results">
    <div class="record-toolbar">
      <form class="filters search-only record-search-form" method="get" hx-get="{{ lab_prefix }}/" hx-target="#results" hx-select="#results" hx-swap="outerHTML" hx-sync="this:replace" hx-trigger="submit, input changed delay:350ms from:input[name='q']">
        <label>Search data<input aria-label="Search data" name="q" placeholder="Keywords in any field, description or metadata…" value="{{ request.GET.q }}"></label>
        <button class="primary">Search</button><a href="{{ lab_prefix }}/">Reset</a>
      </form>
      <div class="record-actions"><h2>Records · {{ total }} matching</h2></div>
    </div>
    <form id="data-actions-form" method="post" action="{{ lab_prefix }}/export/" data-expression-url="{{ lab_prefix }}/expression/" data-genome-url="{{ lab_prefix }}/genome-browser/">{% csrf_token %}<input type="hidden" name="q" value="{{ request.GET.q }}"><input type="hidden" name="project_id" value="{{ request.GET.project_id }}"><input type="hidden" name="data_type" value="{{ request.GET.data_type }}"></form>
    <div class="integration-action-row" aria-label="Selected record actions"><button class="primary action-export" type="submit" form="data-actions-form" formaction="{{ lab_prefix }}/export/" data-action="export">Export clicked records</button><button class="primary action-expression" type="submit" form="data-actions-form" formaction="{{ lab_prefix }}/expression/" data-action="expression">Expression Plot</button><button class="primary action-genome" type="submit" form="data-actions-form" formaction="{{ lab_prefix }}/genome-browser/" data-action="genome">Genome Browser Data Hub</button></div>
    <p class="muted integration-action-help">Expression Plot supports up to 20 records per run; Data Hub supports up to 100.</p>
    <div class="table-wrap record-table-wrap">
      <table class="record-table">
        <thead><tr><th>Select</th><th>Data name / ID</th><th>Type</th><th>Project</th><th>Species</th><th>Genotype / Tissue</th><th>Performed by</th><th>Assay</th><th>Treatment</th><th>Timepoints</th><th>Public Status</th></tr></thead>
        <tbody>{% for r in page %}<tr>
          <td><input form="data-actions-form" type="checkbox" name="selected" value="{{ r.pk }}" aria-label="Select {{ r.name }}"{% if r.pk|stringformat:'s' in selected_ids %} checked{% endif %}></td>
          <td class="record-name"><a title="{{ r.name }}" href="{{ lab_prefix }}/records/{{ r.pk }}/">{{ r.name }}</a><small title="{{ r.local_id }}">{{ r.local_id }}</small></td>
          <td>{{ r.data_type }}</td><td class="record-project" title="{{ r.project.name }}">{{ r.project.code }}</td><td>{{ r.species|default:'—' }}</td><td>{{ r.genotype }} {{ r.tissue }}</td><td>{{ r.performed_by }}</td><td>{{ r.experiment_assay|default:'—' }}</td>
          <td>{% for c in r.conditions.all %}{{ c.treatment }}{% if not forloop.last %}; {% endif %}{% empty %}—{% endfor %}</td>
          <td>{% for c in r.conditions.all %}{{ c.timepoint|default:'—' }}{% if not forloop.last %}; {% endif %}{% empty %}—{% endfor %}</td><td>{{ r.external_status|default:'—' }}</td>
        </tr>{% empty %}<tr><td colspan="11">No matching approved data.</td></tr>{% endfor %}</tbody>
      </table>
    </div>
    <nav class="pagination">{% if page.has_previous %}<a href="?{{ query }}&page={{ page.previous_page_number }}">Previous</a>{% endif %}<span>Page {{ page.number }} of {{ page.paginator.num_pages }}</span>{% if page.has_next %}<a href="?{{ query }}&page={{ page.next_page_number }}">Next</a>{% endif %}</nav>
  </section>
</div>
{% endblock %}