{% 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>
  {# Three numbers answering three questions: where this page sits, how many
     lines the filters matched, and how many there are in all. Collapsed to one
     they contradict each other — "100 lines" above a filter chip reading 4,231
     reads as the filter having lost most of the inventory.

     The window is a separate clause rather than another "of". Written
     "1–100 of 138 of 152 lines" the sentence has two of them, and the middle
     number stops being readable as either bound. #}
  {# `data-plain` is the same label without the window, for when a selection
     is active. The bar is `bar-nowrap` and its only give is the search box,
     which by this point has already shrunk to its minimum — so all three
     clauses at once truncate to "740 cards …" and the number the seller most
     needs is the one that gets cut. The window is on the pager and in the
     selection bar by then, and the selection is not anywhere else. #}
  <span class="bar-note" id="rowlabel"
        data-plain="{{ matched_lines }}{% if narrowed %} of {{ total_lines }}{% endif %} lines"
  >{% if last_page > 1 %}showing {{ row_from }}–{{ row_to }} · {% endif %}{{ matched_lines }}{% 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 }}">
    {# The filter this screen is showing, carried onto the run.

       A selection is not always a list of ids any more. One page of a hundred
       lines is around 740 copies, which is a 6.4 KB querystring — already
       inside what a proxy will commonly accept, before a shop with twenty
       copies of a staple is considered — and "everything matching" would be a
       quarter of a megabyte. So the filter travels instead and `/listings`
       resolves it through the same `inventory.narrow` this screen used.

       `sel` is what says which reading applies, and it is empty at rest. An
       absent mode selects the ids and nothing else: `/listings` once read "no
       ids" as "everything the account owns", with the filter nowhere on the
       form, so a screen reading `Not listed 75` handed off a run priced over
       the whole inventory. Breadth has to be something asked for. #}
    <input type="hidden" name="sel" id="selmode" value="">
    <input type="hidden" name="page" value="{{ page }}">
    <input type="hidden" name="sort" value="{{ sort }}">
    <input type="hidden" name="dir" value="{{ dir }}">
    {% for name, value in sel_fields %}<input type="hidden" name="{{ name }}" value="{{ value }}">{% endfor %}
    {% if last_page > 1 %}
    {# Only where there is more to select than is on screen. On a single page
       "select all matching" and the header checkbox are the same act, and
       offering both invites the seller to look for a difference. #}
    <div class="selbar" id="selbar" hidden>
      <span id="selbar-text"></span>
      <button type="button" class="linkish" id="selall">Select all {{ matched_label }} lines matching these filters</button>
      <button type="button" class="linkish" id="selpage" hidden>Select just this page instead</button>
    </div>
    {% endif %}
    <table class="dtable">
      <thead>
        <tr>
          {# Says which rows it means, because the table is a page of a larger
             result and the box cannot reach past it. A select-all that silently
             covers a hundred of four thousand lines is the whole hazard of
             paging a screen that feeds a listing run. #}
          <th class="cbcol"><input type="checkbox" id="all"
              title="{% if last_page > 1 %}Select every line on this page{% else %}Select every line{% endif %}"></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 price 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.

               "No price", not "no printing". The catalogue names printings it
               has no market figure for, and a foil printing nobody will pay
               for leaves this row priced off the non-foil just as surely as no
               foil printing at all would. Reading those two as the same fact
               is what this pill was doing, and it went quiet on the cards it
               was written for. #}
            {% 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 price 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>

  {# Inside the scroller and after the table, so it sits at the end of the rows
     rather than floating in the chrome. Absent entirely on a single page: a
     paging control that cannot page is furniture. #}
  {% if last_page > 1 %}
  <nav class="pager" aria-label="Inventory pages">
    {% if prev_href %}<a class="chip chip-sm" href="{{ prev_href }}" rel="prev">← Prev</a>
    {% else %}<span class="chip chip-sm is-off">← Prev</span>{% endif %}
    {% for p in page_links %}
      {% if p.gap %}<span class="pager-gap">…</span>
      {% else %}<a class="chip chip-sm {{ 'on' if p.on }}" href="{{ p.href }}"{% if p.on %} aria-current="page"{% endif %}>{{ p.n }}</a>{% endif %}
    {% endfor %}
    {% if next_href %}<a class="chip chip-sm" href="{{ next_href }}" rel="next">Next →</a>
    {% else %}<span class="chip chip-sm is-off">Next →</span>{% endif %}
  </nav>
  {% endif %}
</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;
const plainLabel = label.dataset.plain;
const selmode = $('#selmode');
const selbar = $('#selbar');
const selallbtn = $('#selall');
const selpagebtn = $('#selpage');
const selbarText = $('#selbar-text');
const matchedLines = {{ matched_lines }};
const matchedLabel = '{{ matched_label }}';
const pageLines = rows.length;

/* Whether the run being described is "every line the filter matches" rather
   than the rows ticked on this page. It is a mode and not a count, because at
   this size a selection cannot be carried as ids — see the hidden `sel` field
   above for the arithmetic. */
let allMatching = false;

/* 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.

   Except when the whole page or the whole filter is selected, where the ids
   are turned off entirely and the filter carries the meaning instead. A full
   page is around 740 of them, which is a 6.4 KB URL. */
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;
  const wholePage = pageLines > 0 && n === pageLines;

  // Three modes, and the ids are only submitted in the narrowest of them.
  // `sel` is what the server reads; leaving it empty while also submitting no
  // ids would select nothing, which is the safe end of the mistake.
  selmode.value = allMatching ? 'all' : (wholePage ? 'page' : '');

  rows.forEach((r, i) => {
    r.classList.toggle('sel', boxes[i].checked || allMatching);
    syncHidden(r, boxes[i].checked && !selmode.value);
  });
  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.
  // Selecting by filter cannot count cards without asking the server, and a
  // guess would be a number about somebody's stock. The button says lines
  // instead, which is what was actually chosen, and `/listings` answers with
  // the card count once it has resolved it.
  if (allMatching) {
    listbtn.textContent = 'List ' + matchedLabel + ' lines →';
  } else {
    listbtn.textContent = cards
      ? 'List ' + cards + ' card' + (cards === 1 ? '' : 's') + ' →'
      : 'List selected →';
  }
  listbtn.disabled = !allMatching && cards === 0;
  listbtn.title = (allMatching || cards) ? '' : 'Select rows to list';
  // Nothing added when the whole filter is selected: the bar above the table
  // already says so in a full sentence. The page-mode suffix stays because it
  // is not a repeat — that bar counts lines and this counts cards, which is
  // the number that reaches a marketplace.
  label.textContent = (cards || allMatching ? plainLabel : baseLabel)
    + (!allMatching && 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. Deliberately not
  // offered for "all matching": bulk delete takes a list of ids, so a filter
  // selection has no meaning there, and inventing one would make the widest
  // possible selection one click from the most destructive button.
  delbtn.hidden = cards === 0 || allMatching;
  delbtn.textContent = 'Delete ' + cards;

  if (selbar) {
    // The offer only appears once the page itself is fully selected, which is
    // the moment the seller has expressed interest in "everything" and the
    // moment the page's own answer is visibly not all of it.
    selbar.hidden = !wholePage;
    selallbtn.hidden = allMatching;
    selpagebtn.hidden = !allMatching;
    selbarText.textContent = allMatching
      ? 'All ' + matchedLabel + ' lines matching these filters are selected.'
      : 'All ' + pageLines + ' lines on this page are selected.';
  }
}

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();
  }
});

/* Any change to what is ticked drops back to the narrow reading. Widening is
   always a deliberate click on the offer, never a state a row edit leaves you
   in — untick one line out of four thousand and "all matching" would otherwise
   still be in force, listing the line you just removed. */
function narrow() {
  allMatching = false;
  sync();
}

boxes.forEach(b => b.addEventListener('change', narrow));
all.addEventListener('change', () => {
  allMatching = false;
  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;
  narrow();
}));
if (selbar) {
  selallbtn.addEventListener('click', () => { allMatching = true; sync(); });
  selpagebtn.addEventListener('click', narrow);
}
sync();
</script>
{% endblock %}