{# Esta no es una página web, contiene funciones para que puedan ser usadas en otras páginas. #}
{# Referencia: https://jinja.palletsprojects.com/en/2.11.x/templates/#macros #}

{% import "detail_view_macros.html" as dv_macros %}

{# Ayuda a agregar a importar los mismos archivos en el header de los archivos .html #}
{% macro headertags() -%}
{# Linea en blanco intencional #}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{# Anti-FOUC: apply saved theme before ANY paint #}
<script>
  (function(){
    var t = localStorage.getItem('ca-theme') || 'light';
    document.documentElement.setAttribute('data-theme', t);
  })();
</script>

<meta name="theme-color" content="#2E7D32">
<meta name="msapplication-TileColor" content="#2E7D32">

<meta name="description" content="Aplicación Contable.">
<meta name="author" content="William Moreno Reyes">

{# Bootstrap first so our CSS can override it #}
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/bootstrap/dist/css/bootstrap.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='node_modules/bootstrap-icons/font/bootstrap-icons.css') }}">
{# Our design system last — wins over Bootstrap #}
<link href="{{ url_for('static', filename='css/cacaoaccounting.css') }}" rel="stylesheet">

<script src="{{ url_for('static', filename='node_modules/bootstrap/dist/js/bootstrap.bundle.js') }}"></script>
<script src="{{ url_for('static', filename='node_modules/@popperjs/core/dist/umd/popper.min.js') }}"></script>

<link rel="apple-touch-icon" sizes="57x57"
  href="{{ url_for('static', filename='media/favicon/apple-icon-57x57.png') }}">
<link rel="apple-touch-icon" sizes="60x60"
  href="{{ url_for('static', filename='media/favicon/apple-icon-60x60.png') }}">
<link rel="apple-touch-icon" sizes="72x72"
  href="{{ url_for('static', filename='media/favicon/apple-icon-72x72.png') }}">
<link rel="apple-touch-icon" sizes="76x76"
  href="{{ url_for('static', filename='media/favicon/apple-icon-76x76.png') }}">
<link rel="apple-touch-icon" sizes="114x114"
  href="{{ url_for('static', filename='media/favicon/apple-icon-114x114.png') }}">
<link rel="apple-touch-icon" sizes="120x120"
  href="{{ url_for('static', filename='media/favicon/apple-icon-120x120.png') }}">
<link rel="apple-touch-icon" sizes="144x144"
  href="{{ url_for('static', filename='media/favicon/apple-icon-144x144.png') }}">
<link rel="apple-touch-icon" sizes="152x152"
  href="{{ url_for('static', filename='media/favicon/apple-icon-152x152.png') }}">
<link rel="apple-touch-icon" sizes="180x180"
  href="{{ url_for('static', filename='media/favicon/apple-icon-180x180.png') }}">
<link rel="icon" type="image/png" sizes="192x192"
  href="{{ url_for('static', filename='media/favicon/android-icon-192x192.png') }}">
<link rel="icon" type="image/png" sizes="32x32"
  href="{{ url_for('static', filename='media/favicon/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="96x96"
  href="{{ url_for('static', filename='media/favicon/favicon-96x96.png') }}">
<link rel="icon" type="image/png" sizes="16x16"
  href="{{ url_for('static', filename='media/favicon/favicon-16x16.png') }}">
<meta name="msapplication-TileImage" content="{{ url_for('static', filename='media/favicon/ms-icon-144x144.png') }}">

<link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">

<script src="{{ url_for('static', filename='js/smart-select.js') }}?v=20260506-2" defer></script>
<script src="{{ url_for('static', filename='js/transaction-form.js') }}" defer></script>
<script src="//unpkg.com/alpinejs" defer></script>

{%- endmacro %}

{# Ayuda a renderizar la barra superior en las páginas de la aplicación #}
{% macro cabecera() %}
<header class="ca-navbar">
  <div class="ca-navbar-start">
    <button class="ca-navbar-toggler d-md-none" type="button" data-bs-toggle="collapse"
      data-bs-target="#BarraLateralMenu" aria-expanded="false" aria-controls="BarraLateralMenu">
      <i class="bi bi-list"></i>
    </button>
    <a class="ca-navbar-brand" href="{{ url_for('cacao_app.pagina_inicio') }}">
      <img height="30" src="{{ url_for('static', filename='media/cacao_accounting _logo.svg') }}" alt="Cacao Accounting"
        class="d-inline-block align-middle">
    </a>
  </div>
  <div class="ca-navbar-end">
    <button class="ca-nav-btn" id="ca-theme-btn" onclick="caToggleTheme()" title="Cambiar tema" type="button">
      <i class="bi bi-moon-stars-fill" id="ca-theme-icon"></i>
    </button>
    <a class="ca-nav-btn" href="{{ url_for('login.profile') }}" title="Mi perfil">
      <i class="bi bi-person-circle"></i>
    </a>
    <a class="ca-nav-btn" href="{{ url_for('login.cerrar_sesion') }}" title="Cerrar sesión">
      <i class="bi bi-box-arrow-right"></i>
    </a>
  </div>
</header>
<script>
  (function () {
    var icon = document.getElementById('ca-theme-icon');
    function syncIcon() {
      var t = document.documentElement.getAttribute('data-theme');
      if (icon) icon.className = (t === 'dark') ? 'bi bi-sun-fill' : 'bi bi-moon-stars-fill';
    }
    syncIcon();
    window.caToggleTheme = function () {
      var current = document.documentElement.getAttribute('data-theme') || 'light';
      var next = current === 'dark' ? 'light' : 'dark';
      document.documentElement.setAttribute('data-theme', next);
      localStorage.setItem('ca-theme', next);
      syncIcon();
    };
  })();
</script>
{%- endmacro %}

{# Ayuda a renderizar la barra lateral en las páginas de la aplicación #}
{% macro barralateral() -%}
<nav id="BarraLateralMenu" class="ca-sidebar">
  <ul class="nav">
    {% if validar_modulo_activo("accounting") and permisos(modulo=id_modulo("accounting"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('contabilidad.conta') }}" class="nav-link {% if request.blueprint == 'contabilidad' %}active{% endif %}">
        <i class="bi bi-book"></i>
        Contabilidad
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("cash") and permisos(modulo=id_modulo("cash"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('bancos.bancos_') }}" class="nav-link {% if request.blueprint == 'bancos' %}active{% endif %}">
        <i class="bi bi-bank"></i>
        Caja y Bancos
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("purchases") and permisos(modulo=id_modulo("purchases"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('compras.compras_') }}" class="nav-link {% if request.blueprint == 'compras' %}active{% endif %}">
        <i class="bi bi-cart4"></i>
        Compras
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("inventory") and permisos(modulo=id_modulo("inventory"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('inventario.inventario_') }}" class="nav-link {% if request.blueprint == 'inventario' %}active{% endif %}">
        <i class="bi bi-shop"></i>
        Inventarios
      </a>
    </li>
    {%- endif %}
    {% if validar_modulo_activo("sales") and permisos(modulo=id_modulo("sales"), usuario=usuario.id).autorizado %}
    <li class="nav-item">
      <a href="{{ url_for('ventas.ventas_') }}" class="nav-link {% if request.blueprint == 'ventas' %}active{% endif %}">
        <i class="bi bi-handbag"></i>
        Ventas
      </a>
    </li>
    {%- endif %}
    {% if modulos_extra -%}
    {% for modulo in modulos_extra -%}
    {% if validar_modulo_activo(modulo.nombre_modulo) and permisos(modulo=id_modulo(modulo.nombre_modulo), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for( modulo.url ) }}" class="nav-link">
        {{ modulo.icon}}
        {{ modulo.nombre }}
      </a>
    </li>
    {%- endif %}
    {%- endfor %}
    {%- endif %}
    {% if validar_modulo_activo("admin") and permisos(modulo=id_modulo("admin"), usuario=usuario.id).autorizado -%}
    <li class="nav-item">
      <a href="{{ url_for('admin.admin_') }}" class="nav-link {% if request.blueprint == 'admin' %}active{% endif %}">
        <i class="bi bi-gear"></i>
        Administración
      </a>
    </li>
    {%- endif %}
    <li class="nav-item d-md-none">
      <a href="{{ url_for('login.cerrar_sesion') }}" class="nav-link">
        <i class="bi bi-box-arrow-right"></i> Cerrar Sesión
      </a>
    </li>
  </ul>
</nav>
{%- endmacro %}


{% macro rendizar_paginacion(consulta=None, vista=None) %}
<p class="ca-pagination">{{ consulta.total }} items encontrados.
  <br>
  {% if consulta.has_prev %}
  <a href="{{ url_for(vista, page=consulta.prev_num) }}"><i class="bi bi-arrow-left-short"></i> Anterior</a>
  {% endif %}
  Página {{ consulta.page }} de {{ consulta.pages }}
  {% if consulta.has_next %}
  <a href="{{ url_for(vista, page=consulta.next_num) }}">Siguiente <i class="bi bi-arrow-right-short"></i></a>
  {% endif %}
</p>
{% endmacro %}

{% macro render_status(status=None, lista_status=None) %}
{%- set normalized_status = status if status is not none else 'activo' -%}
{%- set status_info = lista_status[normalized_status] if lista_status and normalized_status in lista_status else None -%}
<span class="badge" title="{{ status_info.label if status_info else 'Activo' }}">
  <i class="bi bi-circle-fill" style="color:{{ status_info.color if status_info else '#6c757d' }}"></i>
</span>
{% endmacro %}

{% macro crear_nueva_entidad() %}

<div style="text-align: center; padding: 2rem 0;">
  <p>
    <img src="{{ url_for('static', filename='media/cacao_accounting.png') }}" height="50" width="50"
      alt="Cacao Accounting Logo">
    <br>
    <strong>Bienvenido a Cacao Accounting</strong>
  </p>
  <p>Al parecer es la primera vez que accedes al sistema.</p>
  <p>Para utilizar el sistema debes al menos haber creado una entidad a la que realizar registros:</p>
  <p>
    <a class="btn btn-success btn-sm" href="{{ url_for('contabilidad.nueva_entidad') }}" role="button"><i
        class="bi bi-plus-circle-fill" aria-hidden="true"></i> Crear Nueva
      Entidad</a>
  </p>
  {% if not MODO_ESCRITORIO %}
  <p>Los siguientes vínculos pueden ser de su interés:</p>

  <div class="d-flex justify-content-center gap-2">

    <a class="btn btn-secondary btn-sm" href="https://cacao-accounting-manual.readthedocs.io/es/latest/"
      role="button"><i class="bi bi-book-fill" aria-hidden="true"></i> Manual de Usuario</a>

    <a class="btn btn-secondary btn-sm" href="https://cacao-accounting-manual.readthedocs.io/es/latest/"
      role="button"><i class="bi bi-chat-left-dots" aria-hidden="true"></i> Sala de Chat</a>

  </div>

  {% endif %}

</div>

{% endmacro %}

{# ─── Docstatus Badge ──────────────────────────────────────────── #}
{% macro docstatus_badge(docstatus) %}
  {% if docstatus == 0 %}
    <span class="badge bg-secondary"><i class="bi bi-pencil-fill me-1"></i>Borrador</span>
  {% elif docstatus == 1 %}
    <span class="badge bg-success"><i class="bi bi-check-circle-fill me-1"></i>Aprobado</span>
  {% elif docstatus == 2 %}
    <span class="badge bg-danger"><i class="bi bi-x-circle-fill me-1"></i>Cancelado</span>
  {% endif %}
{% endmacro %}

{# ─── Calculated Document Status Badge ────────────────────────── #}
{% macro document_status_badge(status_info, detail=False) %}
  <span class="badge {{ status_info.badge_class }}" title="{{ status_info.full_label }}">
    <i class="bi {{ status_info.icon }} me-1"></i>{{ status_info.label }}
  </span>
  {% if detail %}
    <span class="ms-2 text-muted small">{{ status_info.full_label }}</span>
  {% endif %}
{% endmacro %}

{% macro document_status_for(document_type, document, detail=False) %}
  {{ document_status_badge(document_status_info(document_type, document), detail=detail) }}
{% endmacro %}

{% macro document_flow_trace(document_type, document) %}
{%- set api_url = url_for('api.api_document_flow_summary') ~ '?document_type=' ~ document_type ~ '&document_id=' ~ document.id -%}
<div class="ca-card mt-3"
     x-data="{
       open: false,
       loaded: false,
       loading: false,
       upstream: [],
       downstream: [],
       createActions: [],
       toggle() {
         this.open = !this.open;
         if (this.open && !this.loaded) this.load();
       },
       load() {
         this.loading = true;
         fetch('{{ api_url }}', {credentials: 'same-origin'})
           .then(r => r.json())
           .then(data => {
             this.upstream = data.upstream || [];
             this.downstream = data.downstream || [];
             this.createActions = data.create_actions || [];
             this.loaded = true;
             this.loading = false;
           })
           .catch(() => { this.loading = false; });
       }
     }">
  <div class="ca-card-header" style="cursor:pointer;" @click="toggle()">
    <h6 class="ca-card-title mb-0">
      <i class="bi bi-diagram-3 me-1"></i>Flujo documental
      <span class="ms-2">{{ document_status_for(document_type, document) }}</span>
    </h6>
    <i class="bi" :class="open ? 'bi-chevron-up' : 'bi-chevron-down'"></i>
  </div>

  <div x-show="open" x-cloak>
    <div x-show="loading" class="p-3 text-muted small text-center">
      <span class="spinner-border spinner-border-sm me-1"></span>Cargando relaciones…
    </div>

    <div x-show="!loading && loaded">
      {# ── Documentos origen (upstream) ─────────────────────── #}
      <template x-if="upstream.length > 0">
        <div class="px-3 pt-2">
          <p class="small fw-semibold text-muted mb-1"><i class="bi bi-arrow-up-circle me-1"></i>Documentos origen</p>
          <template x-for="group in upstream" :key="group.doctype">
            <div class="mb-2">
              <div class="d-flex align-items-center gap-2 mb-1">
                <span class="small fw-semibold" x-text="group.label"></span>
                <span class="badge text-bg-primary" x-text="group.active_count" x-show="group.active_count > 0"></span>
                <span class="badge text-bg-secondary" x-show="group.historical_count > 0"
                      :title="'Históricos: ' + group.historical_count" x-text="group.historical_count + ' hist.'"></span>
                <template x-if="group.list_url">
                  <a :href="group.list_url" class="btn btn-link btn-sm p-0 ms-auto small">
                    <i class="bi bi-list-ul me-1"></i>Ver lista
                  </a>
                </template>
              </div>
              <template x-for="rel in group.documents" :key="rel.relation_id">
                <div class="d-flex align-items-center gap-2 ms-2 mb-1 small">
                  <span class="badge" :class="rel.badge_class"
                        x-text="rel.document.status ? rel.document.status.label : '—'"></span>
                  <span x-text="rel.document.document_no"
                        :class="{'text-decoration-line-through text-muted': rel.status !== 'active'}"></span>
                  <span class="badge text-bg-light border" x-text="rel.relation_type"></span>
                </div>
              </template>
            </div>
          </template>
        </div>
      </template>

      {# ── Documentos destino (downstream) ──────────────────── #}
      <template x-if="downstream.length > 0">
        <div class="px-3 pt-2 pb-3">
          <p class="small fw-semibold text-muted mb-1"><i class="bi bi-arrow-down-circle me-1"></i>Documentos generados</p>
          <template x-for="group in downstream" :key="group.doctype">
            <div class="mb-2">
              <div class="d-flex align-items-center gap-2 mb-1">
                <span class="small fw-semibold" x-text="group.label"></span>
                <span class="badge text-bg-primary" x-text="group.active_count" x-show="group.active_count > 0"></span>
                <span class="badge text-bg-secondary" x-show="group.historical_count > 0"
                      :title="'Históricos: ' + group.historical_count" x-text="group.historical_count + ' hist.'"></span>
                <template x-if="group.list_url">
                  <a :href="group.list_url" class="btn btn-link btn-sm p-0 ms-auto small">
                    <i class="bi bi-list-ul me-1"></i>Ver lista
                  </a>
                </template>
              </div>
              <template x-for="rel in group.documents" :key="rel.relation_id">
                <div class="d-flex align-items-center gap-2 ms-2 mb-1 small">
                  <span class="badge" :class="rel.badge_class"
                        x-text="rel.document.status ? rel.document.status.label : '—'"></span>
                  <span x-text="rel.document.document_no"
                        :class="{'text-decoration-line-through text-muted': rel.status !== 'active'}"></span>
                  <span class="badge text-bg-light border" x-text="rel.relation_type"></span>
                </div>
              </template>
            </div>
          </template>
        </div>
      </template>

      {# ── Sin relaciones ───────────────────────────────────── #}
      <template x-if="upstream.length === 0 && downstream.length === 0">
        <div class="p-3 text-muted small text-center">
          <i class="bi bi-info-circle me-1"></i>No hay documentos relacionados aún.
        </div>
      </template>
    </div>
  </div>
</div>
{% endmacro %}

{# ─── Workflow Buttons (Submit / Cancel) ──────────────────────── #}
{% macro workflow_buttons(docstatus, submit_url, cancel_url, submit_label, cancel_label) %}
  {% if docstatus == 0 %}
    <form method="post" action="{{ submit_url }}" class="d-inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm btn-success">
        <i class="bi bi-check-circle me-1"></i>{{ submit_label }}
      </button>
    </form>
  {% elif docstatus == 1 %}
    <form method="post" action="{{ cancel_url }}" class="d-inline">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm btn-outline-danger"
              onclick="return confirm('¿Cancelar este documento?')">
        <i class="bi bi-arrow-counterclockwise me-1"></i>{{ cancel_label }}
      </button>
    </form>
  {% endif %}
{% endmacro %}

{# ─── "Crear" dropdown shortcuts (shown when docstatus == 1) ──── #}
{% macro crear_dropdown(opciones) %}
  {# opciones: list of (label, url) #}
  <div class="dropdown">
    <button class="btn btn-sm btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
      <i class="bi bi-plus-circle me-1"></i>Crear
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      {% for label, url in opciones %}
        <li><a class="dropdown-item" href="{{ url }}">{{ label }}</a></li>
      {% endfor %}
    </ul>
  </div>
{% endmacro %}

{% macro detail_nav_buttons(list_url, new_url) %}
  <a class="btn btn-sm btn-outline-secondary" href="{{ list_url }}">
    <i class="bi bi-list-ul me-1"></i>{{ _('Listado') }}
  </a>
  <a class="btn btn-sm btn-primary" href="{{ new_url }}">
    <i class="bi bi-plus-lg me-1"></i>{{ _('Nuevo') }}
  </a>
{% endmacro %}

{# ─── Line Items Table (Alpine.js) for create forms ──────────── #}
{# Params:                                                         #}
{#   items_disponibles: list of {code, name, uom}                 #}
{#   uoms_disponibles:  list of {code, name}                      #}
{#   source_api_url:    string or None — enables auto-fill modal   #}
{#   source_label:      human-readable source doc label            #}
{% macro lineas_items(items_disponibles, uoms_disponibles, source_api_url=None, source_label="documento origen") %}
<div class="ca-card mt-3"
     x-data="{
       items: [],
       availableItems: {{ items_disponibles | tojson }},
       availableUoms:  {{ uoms_disponibles  | tojson }},
       sourceItems: [],
       loadingSource: false,
       addRow() {
         this.items.push({
           item_code:'', item_name:'', qty:1, uom:'', rate:0, amount:0,
           source_type:'', source_id:'', source_item_id:''
         });
       },
       removeRow(i) {
         this.items.splice(i, 1);
       },
       calcAmount(i) {
         this.items[i].amount = parseFloat(this.items[i].qty || 0) * parseFloat(this.items[i].rate || 0);
       },
       onItemSelect(i) {
         const found = this.availableItems.find(x => x.code === this.items[i].item_code);
         if (found) {
           this.items[i].item_name = found.name;
           if (!this.items[i].uom) this.items[i].uom = found.uom || '';
         }
         this.calcAmount(i);
       },
       fetchSource(apiUrl) {
         this.loadingSource = true;
         fetch(apiUrl, {credentials: 'same-origin'})
           .then(r => r.json())
           .then(data => {
             this.sourceItems = (data.items || []).map(item => Object.assign({selected: true}, item));
             this.loadingSource = false;
           })
           .catch(() => { this.loadingSource = false; });
       },
       applySource() {
         const sel = this.sourceItems.filter(i => i.selected);
         sel.forEach(i => {
           const exists = this.items.some(row =>
             row.source_type === i.source_type &&
             row.source_id === i.source_id &&
             row.source_item_id === i.source_item_id
           );
           if (!exists) {
             this.items.push({
               item_code: i.item_code,
               item_name: i.item_name,
               qty: i.qty,
               uom: i.uom,
               rate: i.rate,
               amount: parseFloat(i.qty || 0) * parseFloat(i.rate || 0),
               source_type: i.source_type || '',
               source_id: i.source_id || '',
               source_item_id: i.source_item_id || ''
             });
           }
         });
       }
     }">
  <div class="ca-card-header">
    <h6 class="ca-card-title mb-0"><i class="bi bi-table me-1"></i>Productos / Servicios</h6>
    <div class="d-flex gap-2">
      {% if source_api_url %}
      <button type="button" class="btn btn-sm btn-outline-secondary"
              data-bs-toggle="modal" data-bs-target="#modalAutofill"
              @click="fetchSource('{{ source_api_url }}')">
        <i class="bi bi-arrow-repeat me-1"></i>Actualizar Elementos
      </button>
      {% endif %}
      <button type="button" class="btn btn-sm btn-outline-primary" @click="addRow()">
        <i class="bi bi-plus me-1"></i>Agregar Línea
      </button>
    </div>
  </div>

  <div class="table-responsive p-2">
    <table class="ca-table">
      <caption class="visually-hidden">Líneas del documento</caption>
      <thead>
        <tr>
          <th scope="col" style="width:22%">Artículo</th>
          <th scope="col" style="width:22%">Descripción</th>
          <th scope="col" style="width:10%">Cantidad</th>
          <th scope="col" style="width:10%">UOM</th>
          <th scope="col" style="width:12%">Precio Unit.</th>
          <th scope="col" style="width:12%">Monto</th>
          <th scope="col" style="width:6%"></th>
        </tr>
      </thead>
      <tbody>
        <template x-for="(item, idx) in items" :key="idx">
          <tr>
            <td>
              <select :name="'item_code_' + idx" x-model="item.item_code"
                      @change="onItemSelect(idx)" class="form-select form-select-sm">
                <option value=""></option>
                <template x-for="ai in availableItems" :key="ai.code">
                  <option :value="ai.code" :selected="ai.code === item.item_code"
                          x-text="ai.code + ' — ' + ai.name"></option>
                </template>
              </select>
              <input type="hidden" :name="'item_name_' + idx" :value="item.item_name">
              <input type="hidden" :name="'source_type_' + idx" :value="item.source_type">
              <input type="hidden" :name="'source_id_' + idx" :value="item.source_id">
              <input type="hidden" :name="'source_item_id_' + idx" :value="item.source_item_id">
            </td>
            <td><input type="text" :name="'item_name_display_' + idx" x-model="item.item_name"
                       class="form-control form-control-sm" placeholder="Descripción"></td>
            <td><input type="number" :name="'qty_' + idx" x-model.number="item.qty" min="0.0001"
                       step="0.0001" @input="calcAmount(idx)" class="form-control form-control-sm"></td>
            <td>
              <select :name="'uom_' + idx" x-model="item.uom" class="form-select form-select-sm">
                <option value=""></option>
                <template x-for="u in availableUoms" :key="u.code">
                  <option :value="u.code" :selected="u.code === item.uom" x-text="u.code"></option>
                </template>
              </select>
            </td>
            <td><input type="number" :name="'rate_' + idx" x-model.number="item.rate" min="0"
                       step="0.0001" @input="calcAmount(idx)" class="form-control form-control-sm"></td>
            <td>
              <span x-text="item.amount.toFixed(2)" style="font-size:.85rem;"></span>
              <input type="hidden" :name="'amount_' + idx" :value="item.amount">
            </td>
            <td>
              <button type="button" class="btn btn-sm btn-outline-danger" @click="removeRow(idx)"
                      title="Eliminar línea"><i class="bi bi-trash"></i></button>
            </td>
          </tr>
        </template>
        <tr x-show="items.length === 0">
          <td colspan="7" class="text-center text-muted py-3" style="font-size:.85rem;">
            Sin líneas. Use "Agregar Línea"{% if source_api_url %} o "Actualizar Elementos"{% endif %}.
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  {% if source_api_url %}
  {# ── Auto-fill modal ── #}
  <div class="modal fade" id="modalAutofill" tabindex="-1" aria-labelledby="modalAutofillLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalAutofillLabel">
            <i class="bi bi-table me-2"></i>Actualizar Elementos desde {{ source_label }}
          </h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
        </div>
        <div class="modal-body">
          <div x-show="loadingSource" class="text-center py-3">
            <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
            Cargando elementos…
          </div>
          <div x-show="!loadingSource">
            <table class="ca-table">
              <caption class="visually-hidden">Elementos del documento origen</caption>
              <thead>
                <tr>
                  <th scope="col" style="width:5%"><input type="checkbox"
                    @change="sourceItems.forEach(i => i.selected = $event.target.checked)"></th>
                  <th scope="col">Código</th>
                  <th scope="col">Descripción</th>
                  <th scope="col">Ordenado</th>
                  <th scope="col">Consumido</th>
                  <th scope="col">Pendiente</th>
                  <th scope="col">Traer</th>
                  <th scope="col">UOM</th>
                  <th scope="col">Precio</th>
                </tr>
              </thead>
              <tbody>
                <template x-for="(si, idx) in sourceItems" :key="idx">
                  <tr>
                    <td><input type="checkbox" x-model="si.selected"></td>
                    <td x-text="si.item_code"></td>
                    <td x-text="si.item_name"></td>
                    <td x-text="Number(si.source_qty || si.qty || 0).toFixed(4)"></td>
                    <td x-text="Number(si.consumed_qty || 0).toFixed(4)"></td>
                    <td x-text="Number(si.pending_qty || si.qty || 0).toFixed(4)"></td>
                    <td>
                      <input type="number" x-model.number="si.qty" min="0.0001"
                             :max="si.pending_qty || si.qty" step="0.0001"
                             class="form-control form-control-sm" style="width:90px">
                    </td>
                    <td x-text="si.uom"></td>
                    <td x-text="Number(si.rate || 0).toFixed(2)"></td>
                  </tr>
                </template>
                <tr x-show="sourceItems.length === 0">
                  <td colspan="9" class="text-center text-muted py-3">Sin elementos disponibles.</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="applySource()">
            <i class="bi bi-arrow-repeat me-1"></i>Actualizar
          </button>
        </div>
      </div>
    </div>
  </div>
  {% endif %}
</div>
{% endmacro %}

{# ─── Line Items read-only table (for detail pages) ───────────── #}
{% macro lineas_tabla_lectura(items, currency_code='') %}
{{ dv_macros.detail_lines_table(items, currency_code=currency_code) }}
{% endmacro %}