{% extends "base.html" %}
{% block title %}Inventory · foilstack{% endblock %}
{% block status %}<span id="status">{{ totals.count }} in stock · {{ totals.market|money }} at market{% if totals.sold_rows %} · {{ totals.sold_rows }} sold, {{ totals.realised|money }} realised{% endif %}</span>{% endblock %}

{% block screen %}
{# Nowrap for the reason the listing run is: at 1000px, the width the README
   animation is captured at, the status chips pushed the primary button onto a
   row of its own and the facet row below it then read as four rows of chrome
   above the table. The give is the search box, which shrinks. #}
<div class="bar bar-nowrap">
  <h1>Inventory</h1>
  <form class="searchform" method="get" action="/inventory">
    <input class="search" type="search" name="q" value="{{ q }}" placeholder="filter name, set, sku…">
    {# The filters and the sort, carried through, so searching narrows what is
       on screen rather than throwing the rest of the controls away. #}
    {% for name, value in carry %}<input type="hidden" name="{{ name }}" value="{{ value }}">{% endfor %}
  </form>
  <div class="chip-set">
    {% for c in status_chips %}
    <a class="chip chip-filter {{ 'on' if c.on }}" href="{{ c.href }}">{{ c.label }} {{ c.count }}</a>
    {% endfor %}
  </div>
  <span class="bar-note" id="rowlabel">{{ rows|length }}{% if narrowed %} of {{ total_lines }}{% endif %} lines</span>
  <div class="spacer"></div>
  <button class="btn btn-danger" type="button" id="delbtn" hidden>Delete</button>
  {# Disabled rather than hidden, unlike the Delete button beside it. That one
     is absent at rest because it is destructive and there is nothing to
     mis-click; this one is the only thing on the screen that says selecting
     rows leads anywhere, so it has to stay visible to be the instruction. It
     starts disabled in the markup rather than waiting for `sync()`, because a
     live primary button for one parse is one a fast hand can press — and until
     this it submitted no ids at all, which `/listings` reads as the whole
     inventory and prices a run over everything the account owns. The filter
     the seller was looking at is not on that form, so the screen they left
     said 75 unlisted and the one they arrived at answered for all of it. #}
  <button class="btn btn-primary btn-idle" type="submit" form="sel" formaction="/listings" formmethod="get"
          id="listbtn" disabled title="Select rows to list">List selected →</button>
</div>

{% if facets %}
<div class="facets">
  {% for f in facets %}
  <div class="facet">
    <span class="facet-label">{{ f.label }}</span>
    {% for o in f.options %}
    <a class="chip chip-sm {{ 'on' if o.on }}" href="{{ o.href }}">{{ o.label }} <span class="facet-n">{{ o.count }}</span></a>
    {% endfor %}
    {% if f.hidden %}<span class="facet-more" title="Not shown, because this facet has more values than fit. Use the search box to reach them.">+{{ f.hidden }}</span>{% endif %}
  </div>
  {% endfor %}
  {% if filtered %}
  <a class="facet-clear" href="{{ clear_href }}">clear {{ filtered }} filter{{ '' if filtered == 1 else 's' }}</a>
  {% endif %}
</div>
{% endif %}

<div class="screen-scroll">
  <form id="sel" method="get" action="/listings">
    <input type="hidden" name="rule" value="{{ rule }}">
    <input type="hidden" name="show" value="{{ show }}">
    <table class="dtable">
      <thead>
        <tr>
          <th class="cbcol"><input type="checkbox" id="all"></th>
          {# A sortable heading is a link, not a script: the order is in the
             URL, so a sorted view is one a seller can bookmark and send. #}
          <th>{{ sorts.name|sortlink('CARD') }}</th>
          <th></th>
          <th>{{ sorts.set|sortlink('GAME / SET') }}</th>
          <th class="r">{{ sorts.quantity|sortlink('QTY') }}</th>
          <th>CONDITION</th>
          <th>PRINTING</th>
          <th class="r">{{ sorts.cost|sortlink('COST') }}</th>
          <th class="r">{{ sorts.market|sortlink('MARKET') }}</th>
          <th class="r">{{ sorts.margin|sortlink('MARGIN') }}</th>
          <th>{{ sorts.listed|sortlink('LISTED') }}</th>
        </tr>
      </thead>
      <tbody>
        {% for r in rows %}
        <tr data-row class="{{ 'is-sold' if r.sold }}"
            data-value="{{ '%.2f'|format((r.market or 0) * r.quantity) }}"
            data-sold="{{ 1 if r.sold else 0 }}"
            data-name="{{ r.name }}">
          <td>
            <input type="checkbox" class="groupbox" data-ids="{{ r.ids|join(',') }}">
            {# One hidden input per copy, so the server contract stays "a list
               of inventory ids" no matter how the UI groups them. #}
            {% for i in r.ids %}<input type="hidden" name="id" value="{{ i }}" disabled>{% endfor %}
          </td>
          <td class="refcol">
            {# The catalogue image, not a scan: with several copies behind this
               line, picking one of their scans to represent it is arbitrary. #}
            <span class="thumb-xs ref" title="catalogue reference"><img src="/card/{{ r.card_id }}/image" alt="" loading="lazy"></span>
          </td>
          <td class="name">
            <a class="rowname" href="/inventory/{{ r.card_id }}">{{ r.name }}</a>
            {% if r.sold %}<span class="pill">sold</span>
            {% elif r.sold_quantity %}<span class="pill">{{ r.sold_quantity }} sold</span>{% endif %}
          </td>
          <td class="muted">{{ r.game }}{% if r.set_name %} / {{ r.set_name }}{% endif %}</td>
          <td class="r {{ 'strong' if r.quantity > 1 }}">{{ r.quantity }}</td>
          <td class="{{ 'muted' if not r.mixed }}">{{ r.conditions }}</td>
          <td class="{{ 'foil-yes' if r.any_foil else 'muted' }}">
            {{ r.printing_label }}
            {# Ahead of the "guessed" mark: a finish with no printing behind it
               is the worse of the two and stays quiet on a single-printing
               card, which is most of the cards it happens to. #}
            {% if r.finish_unpriced %}<span class="pill warn" title="{{ r.finish_unpriced }} of {{ r.quantity }} copies are marked with a finish the catalogue has no printing for, so they are priced off the other finish">!</span>
            {% elif r.guessed %}<span class="pill warn" title="printing not chosen, so it is priced as the dearest match">?</span>{% endif %}
          </td>
          <td class="r muted">{{ r.cost|money if r.cost is not none else '—' }}</td>
          <td class="r">{{ r.market|money if r.market is not none else '—' }}</td>
          <td class="r pos">{{ r.margin_pct ~ '%' if r.margin_pct is not none else '—' }}</td>
          <td class="muted">{{ r.listed_label }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not rows %}
    <div class="empty">
      {% if show == 'printing' %}every card is priced on a printing you chose
      {% elif filtered and total_lines %}no card matches every filter · <a href="{{ clear_href }}">clear them</a>
      {% elif q %}nothing matches “{{ q }}”
      {% else %}nothing confirmed yet · import some scans to get started{% endif %}
    </div>
    {% endif %}
  </form>
</div>
{% endblock %}

{% block scripts %}
<script>
const rows = $$('tr[data-row]');
const boxes = rows.map(r => r.querySelector('.groupbox'));
const all = $('#all');
const listbtn = $('#listbtn');
const delbtn = $('#delbtn');
const label = $('#rowlabel');
const baseLabel = label.textContent;

/* A checked line submits one hidden input per copy it holds. Disabled inputs
   are not submitted, so enabling them is the whole of "select this line" — and
   the server keeps receiving a flat list of inventory ids however the UI
   chooses to group them. */
function syncHidden(row, on) {
  row.querySelectorAll('input[type=hidden][name=id]').forEach(h => { h.disabled = !on; });
}

function sync() {
  const n = boxes.filter(b => b.checked).length;
  rows.forEach((r, i) => {
    r.classList.toggle('sel', boxes[i].checked);
    syncHidden(r, boxes[i].checked);
  });
  all.checked = n > 0 && n === boxes.length;
  all.indeterminate = n > 0 && n < boxes.length;
  // Counted in cards, not lines: "List 3 selected" for three lines holding
  // five cards would be a lie about what is going to the marketplace.
  const cards = rows.reduce((a, r, i) =>
    a + (boxes[i].checked ? r.querySelectorAll('input[type=hidden][name=id]').length : 0), 0);
  // And the label says which unit it is in, because the number beside it does
  // not. The facet chips and the row note count lines — a `Not listed 75` chip
  // above a `List 123` button is two right answers to two different questions
  // and reads as one of them being wrong. Only the button knows it is talking
  // about physical cards, so only the button can say so.
  listbtn.textContent = cards
    ? 'List ' + cards + ' card' + (cards === 1 ? '' : 's') + ' →'
    : 'List selected →';
  listbtn.disabled = cards === 0;
  listbtn.title = cards ? '' : 'Select rows to list';
  label.textContent = baseLabel + (cards ? ' · ' + cards + ' cards selected' : '');

  // Destructive, so it is absent rather than merely disabled until there is
  // something to destroy — nothing to mis-click at rest.
  delbtn.hidden = cards === 0;
  delbtn.textContent = 'Delete ' + cards;
}

function selectedIds() {
  return rows.flatMap((r, i) => boxes[i].checked
    ? Array.from(r.querySelectorAll('input[type=hidden][name=id]')).map(h => +h.value)
    : []);
}

delbtn.addEventListener('click', async () => {
  const chosen = rows.filter((r, i) => boxes[i].checked);
  const ids = selectedIds();
  if (!ids.length) return;

  const value = chosen.reduce((a, r) => a + parseFloat(r.dataset.value || 0), 0);
  const names = chosen.slice(0, 3).map(r => r.dataset.name);
  const rest = chosen.length - names.length;

  // The count and the money, both, because the mistake this guards against is
  // "select all" followed by a reflex — and a bare row count does not make
  // that land.
  const ok = confirm(
    'Delete ' + ids.length + ' card' + (ids.length === 1 ? '' : 's') +
    ' worth $' + value.toFixed(2) + ' at market?\n\n' +
    names.join(', ') + (rest > 0 ? ' and ' + rest + ' more' : '') +
    '\n\nThis cannot be undone. Their scans stay on disk, so re-importing the ' +
    'archive would bring them back.'
  );
  if (!ok) return;

  if (await postJSON('/api/inventory/delete', { ids }, { error: 'could not delete' })) {
    location.reload();
  }
});

boxes.forEach(b => b.addEventListener('change', sync));
all.addEventListener('change', () => { boxes.forEach(b => { b.checked = all.checked; }); sync(); });
rows.forEach((r, i) => r.addEventListener('click', ev => {
  if (ev.target.closest('input, a, button')) return;
  boxes[i].checked = !boxes[i].checked;
  sync();
}));
sync();
</script>
{% endblock %}