{% extends 'ops/base_ops.html' %}
{% block title %}CAPA Detail - IXG Operations{% endblock %}
{% block content %}

<div class=page-header d-flex justify-content-between align-items-center>
  <h2>CAPA Record: {{ record.batch.batch_reference }}</h2>
  <a href={% url 'ops:capa_list' %} class=btn btn-sm btn-outline-secondary><i class=bi bi-arrow-left></i> Back</a>
</div>

<div class=row g-3>
  <div class=col-md-8>
    <div class=stat-card mb-3>
      <h6>Issue Description</h6>
      <p>{{ record.issue_description|linebreaks }}</p>
    </div>
    {% if record.root_cause %}
    <div class=stat-card mb-3>
      <h6>Root Cause</h6>
      <p>{{ record.root_cause|linebreaks }}</p>
    </div>
    {% endif %}
    {% if record.corrective_action %}
    <div class=stat-card mb-3>
      <h6>Corrective Action</h6>
      <p>{{ record.corrective_action|linebreaks }}</p>
    </div>
    {% endif %}
    {% if record.preventive_action %}
    <div class=stat-card>
      <h6>Preventive Action</h6>
      <p>{{ record.preventive_action|linebreaks }}</p>
    </div>
    {% endif %}
  </div>
  <div class=col-md-4>
    <div class=stat-card>
      <table class=table table-sm table-borderless mb-0>
        <tr><td class=text-secondary>Batch</td><td><a href={% url 'ops:batch_detail' record.batch.pk %}>{{ record.batch.batch_reference }}</a></td></tr>
        <tr><td class=text-secondary>Status</td><td><span class=badge {% if record.status == open %}bg-danger{% elif record.status == in_progress %}bg-warning text-dark{% else %}bg-success{% endif %} badge-status>{{ record.get_status_display }}</span></td></tr>
        <tr><td class=text-secondary>Assigned To</td><td>{{ record.assigned_to|default:'-' }}</td></tr>
        <tr><td class=text-secondary>Due Date</td><td>{{ record.due_date|date:'d/m/Y'|default:'-' }}</td></tr>
        <tr><td class=text-secondary>Created</td><td>{{ record.created_at|date:'d/m/Y H:i' }}</td></tr>
        {% if record.closed_at %}<tr><td class=text-secondary>Closed</td><td>{{ record.closed_at|date:'d/m/Y H:i' }}</td></tr>{% endif %}
      </table>
    </div>
  </div>
</div>

{% endblock %}