{% extends "base.html" %}

{% block title %}QDRO · {{ file_no }}{% if qdro %} · {{ qdro.version }}{% endif %} · Delphi Database{% endblock %}

{% block content %}
<div class="row g-3">
  <div class="col-12 d-flex align-items-center">
    <a class="btn btn-sm btn-outline-secondary me-2" href="/dashboard">
      <i class="bi bi-arrow-left"></i>
      Back
    </a>
    <h2 class="mb-0">QDRO</h2>
    <div class="ms-auto">
      <a class="btn btn-sm btn-outline-secondary" href="/qdro/{{ file_no }}">All Versions</a>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card h-100">
      <div class="card-header">Versions</div>
      <div class="card-body p-0">
        <div class="list-group list-group-flush">
          {% if versions and versions|length > 0 %}
            {% for v in versions %}
              <a class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" href="/qdro/{{ v.file_no }}/{{ v.version }}">
                <span>Version {{ v.version }}</span>
                <i class="bi bi-chevron-right"></i>
              </a>
            {% endfor %}
          {% else %}
            <div class="list-group-item text-muted">No QDRO versions for this file.</div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  <div class="col-md-8">
    <div class="card h-100">
      <div class="card-header">Details</div>
      <div class="card-body">
        {% if qdro %}
          <div class="row mb-3">
            <div class="col-md-6"><div class="text-muted small">File #</div><div class="fw-semibold">{{ qdro.file_no }}</div></div>
            <div class="col-md-6"><div class="text-muted small">Version</div><div class="fw-semibold">{{ qdro.version }}</div></div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6"><div class="text-muted small">Plan Id</div><div>{{ qdro.plan_id or '' }}</div></div>
            <div class="col-md-6"><div class="text-muted small">Case Number</div><div>{{ qdro.case_number or '' }}</div></div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6"><div class="text-muted small">Case Type</div><div>{{ qdro.case_type or '' }}</div></div>
            <div class="col-md-6"><div class="text-muted small">Section</div><div>{{ qdro.section or '' }}</div></div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6"><div class="text-muted small">Judgment Date</div><div>{{ qdro.judgment_date if qdro.judgment_date else '' }}</div></div>
            <div class="col-md-6"><div class="text-muted small">Valuation Date</div><div>{{ qdro.valuation_date if qdro.valuation_date else '' }}</div></div>
          </div>
          <div class="row mb-3">
            <div class="col-md-6"><div class="text-muted small">Married On</div><div>{{ qdro.married_on if qdro.married_on else '' }}</div></div>
            <div class="col-md-6"><div class="text-muted small">Percent Awarded</div><div>{{ qdro.percent_awarded or '' }}</div></div>
          </div>
          <div class="row mb-3">
            <div class="col-md-12"><div class="text-muted small">Judge</div><div>{{ qdro.judge or '' }}</div></div>
          </div>
        {% else %}
          <div class="text-muted">Select a version on the left to view details.</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}