{% extends "base.html" %}
{% block title %}Listing run · foilstack{% endblock %}
{% block status %}{{ card_count }} cards · {{ rows|length }} listings · {{ rule_obj.name }} · {{ run_value|money }} at list{% endblock %}

{% block screen %}
<div class="bar bar-nowrap">
  <h1>Listing run</h1>
  <span class="bar-note">
    {{ card_count }} card{{ '' if card_count == 1 else 's' }}
    {% if rows|length != card_count %}· {{ rows|length }} listings{% endif %}
    {% if selected_ids %}· selected{% else %}· whole inventory{% endif %}
  </span>
  <div class="spacer"></div>
  <div class="bar-actions">
  <a class="btn" href="/inventory">Back to inventory</a>
  {# Both buttons count what they would change, not what is on screen, and both
     name the channels they would change it on. The count alone is ambiguous
     the moment a second channel is ticked: "Mark 6" against six rows already
     reading "listed · tcgplayer" looks like a bug until you notice the eBay
     box, and the number moves when you tick it.

     "Mark 6 on TCGplayer" rather than "Mark 6 as listed on TCGplayer", which
     is what this said first: the bar is captured at 1000px for the README
     animation and the landing hero, and the longer pair wrapped it onto two
     rows there. The verb it loses is in the title and in the pills the button
     produces, and the shorter form reads as the exact undo of the button
     beside it — which the longer one did not. #}
  {# Shown only when there is something on a picked channel to take off it.
     No disabled twin, unlike the button beside it: "nothing here is listed" is
     already what a live Mark button and an empty status column say. #}
  {% if unmark_ids %}
  <button class="btn" type="button" id="unmark"
          title="Record these as no longer listed on {{ picked_label }}. Undoes the record, not the listing — foilstack never posted it.">
    Unmark {{ unmark_ids|length }} on {{ picked_label }}
  </button>
  {% endif %}
  {% if mark_ids %}
  <button class="btn btn-primary" type="button" id="mark"
          title="Record these as listed on {{ picked_label }}. Nothing is sent — you upload the CSV yourself.">
    Mark {{ mark_ids|length }} on {{ picked_label }}
  </button>
  {% else %}
  <button class="btn" type="button" disabled title="Tick another channel to mark these there too">
    All {{ card_count }} listed on {{ picked_label }}
  </button>
  {% endif %}
  </div>
</div>

<div class="split">
  <div class="run-side">
    <div class="sec-label">Channels</div>
    {% for c in channels %}
    <a class="opt {{ 'on' if c.on }}" href="{{ c.href }}">
      <input type="checkbox" {{ 'checked' if c.on }} tabindex="-1" aria-hidden="true">
      <div class="opt-body">
        <div class="t">{{ c.name }}</div>
        <div class="s">{{ c.note }}</div>
        {% if c.exporter %}<div class="s">{{ c.exporter.columns|length }} columns · {{ c.exporter.filename }}</div>{% endif %}
      </div>
    </a>
    {% endfor %}
    <div class="s" style="font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.6; margin: 6px 0 0;">
      A channel here is a CSV format, not a connection. Nothing is sent to a
      marketplace on your behalf. You download the file and upload it yourself.
    </div>

    <div class="sec-label" style="margin-top: 16px">Pricing rule</div>
    {% for r in rules %}
    <a class="opt {{ 'on' if r.on }}" href="{{ r.href }}">
      <div class="opt-body">
        <div class="t">{{ r.name }}</div>
        <div class="s">{{ r.formula }}</div>
      </div>
    </a>
    {% endfor %}
    <div class="s" style="font-family: var(--mono); font-size: 10px; color: var(--faint); line-height: 1.6; margin: 6px 0 0;">
      Applied on top of the condition discount. “Low + $0.01” is an
      approximation: the catalogue gives a market price, not the current lowest
      listing.
    </div>

    <div class="run-summary">
      <div>floor &nbsp; {{ floor|money }}</div>
      {# "at list", not "listed value": on this screen "listed" now means a
         row marked as being on a marketplace, and the same word for the run's
         total at list price made the summary read as the value of the marked
         half. #}
      <div>at list &nbsp; <b>{{ run_value|money }}</b></div>
      <div>vs market &nbsp; <b>{{ '+' if delta >= 0 }}{{ delta|money }}</b></div>
    </div>

    <div class="sec-label" style="margin-top: 16px">Download</div>
    {% for c in channels %}
    {% if c.on and c.exporter %}
    {% if c.match_href %}
    <form class="match" method="post" action="{{ c.match_href }}" enctype="multipart/form-data">
      <input type="file" name="file" accept=".csv,text/csv" required>
      <button class="btn" type="submit">{{ c.exporter.label }} CSV</button>
      <div class="s">
        Needs your own <b>Export Filtered CSV</b> from TCGplayer&rsquo;s pricing
        screen: their ids name a card <i>and</i> a condition, so only their file
        has them. Your quantities in it are not read.
      </div>
    </form>
    {% else %}
    <a class="btn" style="width: 100%; margin-bottom: 4px" href="{{ c.csv_href }}">{{ c.exporter.label }} CSV</a>
    {% endif %}
    {% endif %}
    {% endfor %}
  </div>

  <div class="run-body">
    <div class="screen-scroll">
      <table class="dtable">
        <thead>
          <tr>
            <th>CARD</th>
            <th>SKU</th>
            <th>CND</th>
            <th class="r">QTY</th>
            <th class="r">MARKET</th>
            <th class="r">LIST PRICE</th>
            <th>STATUS</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr>
            <td class="name">{{ r.name }}</td>
            <td class="faint">{{ r.sku }}</td>
            <td>{{ r.condition }}</td>
            <td class="r {{ 'strong' if r.quantity > 1 }}">{{ r.quantity }}</td>
            <td class="r muted">{{ r.market|money if r.market is not none else '—' }}</td>
            <td class="r strong">{{ r.list_price|money if r.list_price is not none else '—' }}</td>
            <td>
              {% if r.listed_partly %}<span class="pill">{{ r.listed_count }} of {{ r.quantity }} listed · {{ r.listed_channels }}</span>
              {% elif r.listed %}<span class="pill ok">listed · {{ r.listed_channels }}</span>
              {% else %}<span class="pill">ready</span>{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% if not rows %}
      <div class="empty">nothing selected · pick rows on the inventory screen</div>
      {% endif %}
    </div>

    <div class="joblog">
      <div class="sec-label" style="margin-bottom: 6px">Job log</div>
      {% for l in log %}
      <div class="line"><span class="t">{{ l.t }}</span> &nbsp;{{ l.msg }}</div>
      {% else %}
      <div class="line">nothing yet this session</div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const channels = {{ picked | tojson }};

// Either button is absent when it has nothing to do — the bar shows a disabled
// button or none at all rather than a live one that would change nothing.
const wireMark = (sel, url, ids) => $(sel)?.addEventListener('click', async ev => {
  if (!ids.length) return;
  ev.target.disabled = true;
  // `quiet`: the button coming back to life is the failure message here.
  if (await postJSON(url, { ids, channels }, { quiet: true })) location.reload();
  else ev.target.disabled = false;
});

wireMark('#mark', '/api/listings/mark', {{ mark_ids | tojson }});
wireMark('#unmark', '/api/listings/unmark', {{ unmark_ids | tojson }});
</script>
{% endblock %}