{# templates/pos_api/android_sales_list.html #}
{% extends "pos/base.html" %}
{% load humanize %}

{% block title %}Android Sales (Staging){% endblock %}

{% block content %}
<style>
  :root {
    --primary: #1a56db;
    --success: #057a55;
    --danger: #e02424;
    --warning: #c27803;
    --surface: #ffffff;
    --muted: #6b7280;
    --border: #e5e7eb;
    --bg: #f3f4f6;
  }

  .filter-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
  }

  .filter-card .form-control,
  .filter-card .form-select {
    font-size: 13px;
    border-radius: 7px;
    border-color: #d1d5db;
    height: 34px;
    padding: 4px 10px;
  }

  .filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 3px;
  }

  .summary-bar {
    position: sticky;
    bottom: 0;
    background: #1e2939;
    color: #fff;
    border-radius: 10px 10px 0 0;
    padding: 10px 20px;
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: 13px;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    z-index: 100;
    transition: all .2s;
  }

  .summary-bar .s-item { display: flex; flex-direction: column; gap: 1px; }
  .summary-bar .s-label { font-size: 10px; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; }
  .summary-bar .s-val  { font-size: 15px; font-weight: 700; color: #f9fafb; }
  .summary-bar .s-val.selected-mode { color: #34d399; }

  .tbl-wrap { border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
  .tbl-wrap table { margin: 0; }
  .tbl-wrap thead th { background: #111827 !important; color: #e6e7e9; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 10px 12px; border: none; }
  .tbl-wrap tbody tr { transition: background .1s; }
  .tbl-wrap tbody tr:hover { background: #f0f9ff; }
  .tbl-wrap tbody td { font-size: 13px; padding: 9px 12px; border-color: #f0f0f0; vertical-align: middle; }
  .tbl-wrap tfoot td { background: #f9fafb; font-size: 13px; font-weight: 700; padding: 10px 12px; border-color: #e5e7eb; }

  .badge-inv { background: #1a56db; color: #fff; font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 5px; }
  .badge-branch { background: #374151; color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 4px; }

  .stock-zero td { background: #fff5f5 !important; }
  .stock-zero .badge-inv { background: #e02424; }

  .action-btns { display: flex; gap: 5px; justify-content: center; }
  .btn-view   { font-size: 11px; padding: 3px 9px; border-radius: 5px; }
  .btn-reject { font-size: 11px; padding: 3px 9px; border-radius: 5px; background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }
  .btn-reject:hover { background: #e02424; color: #fff; }
  .btn-approve-one { font-size: 11px; padding: 3px 9px; border-radius: 5px; background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
  .btn-approve-one:hover { background: #057a55; color: #fff; }

  .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
  .page-title { font-size: 20px; font-weight: 800; color: #111827; }
  .page-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

  .top-actions { display: flex; gap: 8px; align-items: center; }

  .empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
  .empty-state svg { width: 48px; height: 48px; margin-bottom: 12px; opacity: .35; }

  /* Sort indicators */
  th.sortable { cursor: pointer; user-select: none; }
  th.sortable:hover { background: #1f2d3d; }
  th.sort-asc::after  { content: ' ↑'; color: #60a5fa; }
  th.sort-desc::after { content: ' ↓'; color: #60a5fa; }
</style>

<div class="container-fluid py-3">

  {# ─── FILTERS ─── #}
  <div class="filter-card">
    <div class="row g-2 align-items-end">
      <div class="col-md-2 col-6">
        <div class="filter-label">Salesman</div>
        <select id="fSalesman" class="form-select">
          <option value="">All Salesmen</option>
          {% for s in salesman_list %}
          <option value="{{ s.id }}" {% if request.GET.salesman == s.id|stringformat:"s" %}selected{% endif %}>{{ s.username }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Customer</div>
        <input type="text" id="fCustomer" class="form-control" placeholder="Search customer…" value="{{ request.GET.customer|default:'' }}">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Date From</div>
        <input type="date" id="fDateFrom" class="form-control" value="{{ request.GET.date_from|default:'' }}">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Date To</div>
        <input type="date" id="fDateTo" class="form-control" value="{{ request.GET.date_to|default:'' }}">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Min Amount</div>
        <input type="number" id="fAmtMin" class="form-control" placeholder="0" value="{{ request.GET.amt_min|default:'' }}">
      </div>
      <div class="col-md-2 col-6">
        <div class="filter-label">Max Amount</div>
        <input type="number" id="fAmtMax" class="form-control" placeholder="∞" value="{{ request.GET.amt_max|default:'' }}">
      </div>
    </div>
    <div class="row g-2 mt-1 align-items-center">
      <div class="col-auto">
        <button id="btnFilter" class="btn btn-primary btn-sm px-3">Apply Filters</button>
      </div>
      <div class="col-auto">
        <button id="btnClear" class="btn btn-outline-secondary btn-sm px-3">Clear</button>
      </div>
      <div class="col-auto ms-auto text-muted" style="font-size:12px;">
        Showing <span id="visibleCount">{{ rows|length }}</span> of {{ rows|length }} records
      </div>
    </div>
  </div>

  {# ─── HEADER ─── #}
  <div class="page-header">
    <div>
      <div class="page-title">Android Sales <span class="badge bg-warning text-dark ms-1" style="font-size:13px;">Staging</span></div>
      <div class="page-sub">Sales posted from Android App awaiting approval</div>
    </div>
    <div class="top-actions">

     <a id="btnPlotShops"
       href="{% url 'pos_api:android_sales_shop_map' %}"
       class="btn btn-info btn-sm px-3 disabled"
       onclick="return openSelectedInvoicesMap(this);">
      Plot Shops
    </a>
      <form id="formBulkPdf" method="post" action="{% url 'pos_api:android_sales_product_stock_diff_pdf' %}" target="_blank">
        {% csrf_token %}
        <button type="submit" id="btnPdf" class="btn btn-dark btn-sm px-3" disabled
                onclick="return copyChecked('formBulkPdf');">
          PDF Product Stock Report
        </button>
      </form>
      <form id="formBulkReject" method="post" action="{% url 'pos_api:android_sales_reject_bulk' %}" style="display:none;"></form>







      <!-- form bulk approve edit gt -->
      <form id="formBulkApproveEdit" method="post" action="{% url 'pos_api:android_sales_approve_bulk_edit' %}">
        {% csrf_token %}
        <button type="submit" id="btnApproveEdit" class="btn btn-primary btn-sm px-3" disabled
                onclick="return copyChecked('formBulkApproveEdit');">
          Bulk Approve (Edit)
        </button>
      </form>


      <button type="button" id="btnReject" class="btn btn-danger btn-sm px-3" disabled
              onclick="bulkReject()">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" class="me-1" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/></svg>
        Reject Selected
      </button>
    </div>
  </div>

  {% if not rows %}
    <div class="empty-state">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
      <p class="mt-2 mb-0">No staging sales found.</p>
    </div>
  {% else %}

  <div class="tbl-wrap">
    <table class="table table-hover" id="salesTable">
      <thead>
        <tr class="">
          <th class="text-center" style="width:44px;">
            <input type="checkbox" id="chkAll">
          </th>
          <th class="sortable " data-col="invoice" >Invoice</th>
          <th class="sortable" data-col="branch">Branch</th>
          <th class="sortable" data-col="customer">Customer</th>
          <th class="sortable" data-col="date">Date</th>
          <th>Time</th>
          <th class="text-end sortable" data-col="total">Total</th>
          <th class="text-end sortable" data-col="received">Received</th>
          <th>Location</th>
          <th class="text-center">Total Numbers of Items</th>
          <th class="sortable" data-col="salesman">Salesman</th>
          <th class="text-center" style="width:170px;">Actions</th>
        </tr>
      </thead>
      <tbody id="salesBody">
        {% for r in rows %}
        <tr class="sale-row {% if r.has_zero_stock %}stock-zero{% endif %}"
            data-invoice="{{ r.description }}"
            data-customer="{{ r.party_descp|lower }}"
            data-salesman="{{ r.saleman_id }}"
            data-date="{{ r.transaction_date|date:'Y-m-d' }}"
            data-total="{{ r.total_amount }}"
            data-received="{{ r.amount_transaction }}"
            data-qty="{{ r.total_qty }}"
            data-bonus="{{ r.total_bonus }}">

          <td class="text-center">
            <input type="checkbox" class="chkRow" name="invoice_nos" value="{{ r.description }}">
          </td>
          <td>
            <span class="badge-inv">#{{ r.description }}</span>
            {% if r.has_zero_stock %}
              <span class="badge bg-danger ms-1" style="font-size:10px;">Stock!</span>
            {% endif %}
          </td>
          <td><span class="badge-branch">{{ r.main_pos_business_id }}</span></td>
          <td>
            <div class="fw-semibold" style="color:#111;">{{ r.customer_name|default:"—" }}</div>
            <small class="text-muted">ID: {{ r.name }}</small>
          </td>
          <td style="white-space:nowrap;">{{ r.transaction_date }}</td>
          <td><small class="text-muted">{{ r.bill_time|default:"—" }}</small></td>
          <td class="text-end fw-bold">{{ r.total_amount|floatformat:2|intcomma }}</td>
          <td class="text-end text-success">{{ r.amount_transaction|floatformat:2|intcomma }}</td>
          <td>
            {% if r.location_ok %}
              <span class="badge badge-success text-md-4">{{ r.location_status }}</span>
            {% else %}
              {% if r.location_status == 'No location' or r.location_status == 'No sale location' %}
                <span class="badge badge-secondary">Not Mark</span>
              {% elif r.location_status == 'Customer loc missing' %}
                <span class="badge badge-warning">Customer Loc Missing</span>
              {% else %}
                <span class="badge badge-danger">{{ r.location_status }}</span>
              {% endif %}
            {% endif %}
          </td>
          <td class="text-center">
            <span class="badge bg-info text-dark">{{ r.lines_count }}</span>
          </td>
          <td><small>{{ r.saleman_name|default:"—" }}</small></td>
          <td>
            <div class="action-btns">
              <a class="btn btn-sm btn-outline-primary btn-view"
                 href="{% url 'pos_api:android_sale_view' r.description %}">View</a>
              <a class="btn btn-sm btn-approve-one"
                 href="{% url 'pos_api:android_sale_approve_single' r.description %}">Approve</a>
              <button type="button" class="btn btn-sm btn-reject"
                      onclick="rejectOne('{{ r.description }}')">Reject</button>
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
      <tfoot>
        <tr>
          <td colspan="6">
            <span id="footLabel">Total ({{ rows|length }} invoices)</span>
          </td>
          <td class="text-end" id="footTotal">{{ sum_total|floatformat:2|intcomma }}</td>
          <td class="text-end" id="footReceived">{{ sum_received|floatformat:2|intcomma }}</td>
          <td class="text-end" id="footQty">{{ sum_qty|floatformat:2 }}</td>
          <td class="text-end" id="footBonus">{{ sum_bonus|floatformat:2 }}</td>
          <td class="text-center" id="footLines">—</td>
          <td colspan="2"></td>
        </tr>
      </tfoot>
    </table>
  </div>

  {% endif %}
</div>

{# ─── STICKY SUMMARY BAR ─── #}
<div class="summary-bar" id="summaryBar">
  <div class="s-item">
    <span class="s-label">Mode</span>
    <span class="s-val" id="sbMode">All Records</span>
  </div>
  <div class="s-item">
    <span class="s-label">Invoices</span>
    <span class="s-val" id="sbCount">{{ rows|length }}</span>
  </div>
  <div class="s-item">
    <span class="s-label">Total Amount</span>
    <span class="s-val" id="sbTotal">{{ sum_total|floatformat:2|intcomma }}</span>
  </div>
  <div class="s-item">
    <span class="s-label">Received</span>
    <span class="s-val" id="sbReceived">{{ sum_received|floatformat:2|intcomma }}</span>
  </div>
  <div class="s-item">
    <span class="s-label">Total Qty</span>
    <span class="s-val" id="sbQty">{{ sum_qty|floatformat:2 }}</span>
  </div>
  <div class="s-item">
    <span class="s-label">Total Bonus</span>
    <span class="s-val" id="sbBonus">{{ sum_bonus|floatformat:2 }}</span>
  </div>
</div>


<div class="tbl-wrap" style="margin-top: 20px; margin-bottom: 10px;">
  <table>
    <thead>
        <tr>
            <th>Zero stock allow</th>
            <th>check batch</th>
            <th>expriry warn days</th>
            <th>pick mode</th>
        </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-weight: bold; color: black;">{{ settings.zero_stock_allow }}</td>
        <td style="font-weight: bold; color: black;">{{ settings.check_batch }}</td>
        <td style="font-weight: bold; color: black;">{{ settings.expiry_warn_days }}</td>
        <td style="font-weight: bold; color: black;">{{ settings.pick_mode }}</td>
      </tr>
    </tbody>
  </table>
</div>

{# Hidden reject form #}
<form id="formRejectBulk" method="post" action="{% url 'pos_api:android_sales_reject_bulk' %}">
  {% csrf_token %}
  <div id="rejectInputs"></div>
</form>

<script>
// ── DATA ──────────────────────────────────────────────────────────
const ALL_TOTALS = {
  total:    {{ sum_total|default:0 }},
  received: {{ sum_received|default:0 }},
  qty:      {{ sum_qty|default:0 }},
  bonus:    {{ sum_bonus|default:0 }},
  count:    {{ rows|length }},
};

// ── HELPERS ───────────────────────────────────────────────────────
function fmt(n){ return parseFloat(n||0).toLocaleString('en',{minimumFractionDigits:2,maximumFractionDigits:2}); }

function visibleRows(){
  return Array.from(document.querySelectorAll('#salesBody .sale-row'))
              .filter(r => r.style.display !== 'none');
}
function checkedRows(){
  return Array.from(document.querySelectorAll('.chkRow:checked'))
              .map(cb => cb.closest('tr'));
}

// ── SUMMARY UPDATE ────────────────────────────────────────────────
function updateSummary(){
  const sel  = checkedRows();
  const vis  = visibleRows();
  const src  = sel.length > 0 ? sel : vis;
  const mode = sel.length > 0 ? `Selected (${sel.length})` : `Visible (${vis.length})`;

  let total=0, received=0, qty=0, bonus=0;
  src.forEach(r => {
    total    += parseFloat(r.dataset.total    || 0);
    received += parseFloat(r.dataset.received || 0);
    qty      += parseFloat(r.dataset.qty      || 0);
    bonus    += parseFloat(r.dataset.bonus    || 0);
  });

  document.getElementById('sbMode').textContent     = mode;
  document.getElementById('sbCount').textContent    = src.length;
  document.getElementById('sbTotal').textContent    = fmt(total);
  document.getElementById('sbReceived').textContent = fmt(received);
  document.getElementById('sbQty').textContent      = fmt(qty);
  document.getElementById('sbBonus').textContent    = fmt(bonus);

  const isSelected = sel.length > 0;
  document.getElementById('sbTotal').className    = 's-val' + (isSelected ? ' selected-mode' : '');
  document.getElementById('sbReceived').className = 's-val' + (isSelected ? ' selected-mode' : '');

  // foot
  document.getElementById('footLabel').textContent    = `${isSelected ? 'Selected' : 'Total'} (${src.length} invoices)`;
  document.getElementById('footTotal').textContent    = fmt(total);
  document.getElementById('footReceived').textContent = fmt(received);
  document.getElementById('footQty').textContent      = fmt(qty);
  document.getElementById('footBonus').textContent    = fmt(bonus);

  // buttons
  document.getElementById('btnReject').disabled  = sel.length === 0;
  document.getElementById('visibleCount').textContent = vis.length;

  document.getElementById('btnPdf').disabled = sel.length === 0;

  document.getElementById('btnApproveEdit').disabled = sel.length === 0;
}

// ── CHECKBOX LOGIC ────────────────────────────────────────────────
const chkAll = document.getElementById('chkAll');
function syncChkAll(){
  const vis = visibleRows();
  const sel = vis.filter(r => r.querySelector('.chkRow').checked);
  if(!chkAll) return;
  chkAll.checked = vis.length > 0 && sel.length === vis.length;
  chkAll.indeterminate = sel.length > 0 && sel.length < vis.length;
}
if(chkAll){
  chkAll.addEventListener('change', function(){
    visibleRows().forEach(r => r.querySelector('.chkRow').checked = this.checked);
    syncChkAll(); updateSummary();
  });
}
document.querySelectorAll('.chkRow').forEach(cb => {
  cb.addEventListener('change', () => { syncChkAll(); updateSummary(); });
});

// ── REJECT ────────────────────────────────────────────────────────
function rejectOne(invNo){
  if(!confirm(`Reject invoice #${invNo}? This will permanently delete the staging data.`)) return;
  const f = document.getElementById('formRejectBulk');
  document.getElementById('rejectInputs').innerHTML = `<input type="hidden" name="invoice_nos" value="${invNo}">`;
  f.submit();
}

function bulkReject(){
  const sel = checkedRows();
  if(sel.length === 0) return;
  if(!confirm(`Reject ${sel.length} invoice(s)? This cannot be undone.`)) return;
  const div = document.getElementById('rejectInputs');
  div.innerHTML = sel.map(r => `<input type="hidden" name="invoice_nos" value="${r.dataset.invoice}">`).join('');
  document.getElementById('formRejectBulk').submit();
}

function copyChecked(formId){
  const f = document.getElementById(formId);

  // remove old hidden inputs
  f.querySelectorAll('input[name="invoice_nos"]').forEach(i => i.remove());

  const sel = checkedRows();
  if(sel.length === 0){
    alert("Please select at least 1 invoice.");
    return false;
  }

  sel.forEach(r => {
    const inp = document.createElement('input');
    inp.type = 'hidden';
    inp.name = 'invoice_nos';
    inp.value = r.dataset.invoice;
    f.appendChild(inp);
  });

  return true;
}

// ── FILTERS ───────────────────────────────────────────────────────
function applyFilters(){
  const salesman  = document.getElementById('fSalesman').value;
  const customer  = document.getElementById('fCustomer').value.toLowerCase().trim();
  const dateFrom  = document.getElementById('fDateFrom').value;
  const dateTo    = document.getElementById('fDateTo').value;
  const amtMin    = parseFloat(document.getElementById('fAmtMin').value) || 0;
  const amtMax    = parseFloat(document.getElementById('fAmtMax').value) || Infinity;

  document.querySelectorAll('#salesBody .sale-row').forEach(row => {
    let show = true;
    if(salesman  && row.dataset.salesman !== salesman) show = false;
    if(customer  && !row.dataset.customer.includes(customer)) show = false;
    if(dateFrom  && row.dataset.date < dateFrom) show = false;
    if(dateTo    && row.dataset.date > dateTo)   show = false;
    const tot = parseFloat(row.dataset.total || 0);
    if(tot < amtMin || tot > amtMax) show = false;
    row.style.display = show ? '' : 'none';
  });
  syncChkAll(); updateSummary();
}

document.getElementById('btnFilter').addEventListener('click', applyFilters);
document.getElementById('btnClear').addEventListener('click', () => {
  ['fSalesman','fCustomer','fDateFrom','fDateTo','fAmtMin','fAmtMax'].forEach(id => {
    const el = document.getElementById(id);
    if(el) el.value = '';
  });
  applyFilters();
});
['fCustomer','fDateFrom','fDateTo','fAmtMin','fAmtMax'].forEach(id => {
  const el = document.getElementById(id);
  if(el) el.addEventListener('input', applyFilters);
});
document.getElementById('fSalesman').addEventListener('change', applyFilters);

// ── SORT ──────────────────────────────────────────────────────────
let sortState = {col: null, dir: 1};
document.querySelectorAll('th.sortable').forEach(th => {
  th.addEventListener('click', function(){
    const col = this.dataset.col;
    document.querySelectorAll('th.sortable').forEach(t => t.classList.remove('sort-asc','sort-desc'));
    if(sortState.col === col){ sortState.dir *= -1; } else { sortState.col = col; sortState.dir = 1; }
    this.classList.add(sortState.dir === 1 ? 'sort-asc' : 'sort-desc');

    const tbody = document.getElementById('salesBody');
    const rows = Array.from(tbody.querySelectorAll('.sale-row'));
    rows.sort((a, b) => {
      let va, vb;
      switch(col){
        case 'invoice':  va = parseInt(a.dataset.invoice); vb = parseInt(b.dataset.invoice); break;
        case 'date':     va = a.dataset.date; vb = b.dataset.date; break;
        case 'total':    va = parseFloat(a.dataset.total); vb = parseFloat(b.dataset.total); break;
        case 'received': va = parseFloat(a.dataset.received); vb = parseFloat(b.dataset.received); break;
        case 'qty':      va = parseFloat(a.dataset.qty); vb = parseFloat(b.dataset.qty); break;
        case 'customer': va = a.dataset.customer; vb = b.dataset.customer; break;
        case 'salesman': va = (a.querySelector('td:nth-child(12) small')||{}).textContent||''; vb = (b.querySelector('td:nth-child(12) small')||{}).textContent||''; break;
        case 'branch':   va = a.querySelector('td:nth-child(3)').textContent; vb = b.querySelector('td:nth-child(3)').textContent; break;
        default:         va = 0; vb = 0;
      }
      if(va < vb) return -1 * sortState.dir;
      if(va > vb) return  1 * sortState.dir;
      return 0;
    });
    rows.forEach(r => tbody.appendChild(r));
    updateSummary();
  });
});

// ── INIT ──────────────────────────────────────────────────────────
updateSummary();

// for plot
function syncPlotButtonState(){
  var btn = document.getElementById('btnPlotShops');
  var hasSelected = document.querySelectorAll('.chkRow:checked').length > 0;

  if(hasSelected){
    btn.classList.remove('disabled');
    btn.style.pointerEvents = 'auto';
    btn.style.opacity = '1';
  }else{
    btn.classList.add('disabled');
    btn.style.pointerEvents = 'none';
    btn.style.opacity = '0.65';
  }
}

document.addEventListener('change', function(e){
  if(e.target.matches('.chkRow') || e.target.matches('#chkAll')){
    setTimeout(syncPlotButtonState, 10);
  }
});

document.addEventListener('DOMContentLoaded', syncPlotButtonState);
</script>
{% endblock %}