{% extends "base.html" %}
{% block title %}Alerts{% endblock %}
{% block content %}
<div class="page-head">
  <div class="page-head__text">
    <h1 class="t-h1">Where alerts go</h1>
    <p>Each search sends to one or more of these. Choose which on the search itself; a search with none picked sends to all of them.</p>
  </div>
  <div class="page-head__actions">
    <button class="btn btn--primary" type="button" data-open="add-dest">{{ ui.icon("plus") }}Add a place</button>
  </div>
</div>

<div class="dests">
  {% for dd in dests|sort(attribute="status") %}
  <article class="card dest{% if dd.status == 'failing' %} dest--failing{% endif %}" aria-labelledby="dest-{{ dd.id }}">
    <div class="dest__head">
      <span class="dest__logo dest__logo--{{ dd.kind }}">{{ ui.dest_icon(dd.kind) }}</span>
      <div class="dest__name"><b id="dest-{{ dd.id }}">{{ dd.name }}</b><small>{{ dd.label }}</small></div>
      {# Green only when something actually arrived through it. #}
      {% if dd.status == "failing" %}<span class="badge badge--bad">{{ ui.icon("circle-alert") }}{{ dd.status_label }}</span>
      {% elif dd.status in ("waiting", "warn") %}<span class="badge badge--warn">{{ ui.icon("hourglass" if dd.status == "waiting" else "triangle-alert") }}{{ dd.status_label }}</span>
      {% elif dd.status == "untested" %}<span class="badge">{{ ui.icon("send") }}{{ dd.status_label }}</span>
      {% else %}<span class="badge badge--ok">{{ ui.icon("check") }}{{ dd.status_label }}</span>{% endif %}
    </div>
    <form class="dest__body" data-autosave="/destinations/{{ dd.id }}/options">
      {% if dd.status == "failing" %}
      <div class="notice notice--danger" style="margin-bottom:6px">{{ ui.icon("circle-alert") }}<div><p><strong>{{ dd.detail }}</strong></p><p>Send a test to see what's wrong. If it keeps failing, remove it and add it again, or use a notification on your phone instead.</p></div></div>
      {% elif dd.status == "warn" %}
      <div class="notice notice--sun" style="margin-bottom:6px">{{ ui.icon("triangle-alert") }}<div><p><strong>{{ dd.detail }}</strong></p><p>The line is <span class="code">VINTED_SNIPER_TELEGRAM_BOT_TOKEN=</span> followed by the code BotFather gave you. Settings, "Open on your phone", says where the settings file is.</p></div></div>
      {% else %}
      <p class="t-sm" style="padding-bottom:4px">{{ dd.detail }}</p>
      {% endif %}
      <details class="dest__opts" data-collapse-sm open>
      <summary>{{ ui.icon("chevron-right", "i-sm") }}<span>Options</span><small class="t-sm">What to send, sound{% if dd.kind == "discord" %}, look and pings{% elif dd.kind == "telegram" %}, look{% elif dd.kind == "ntfy" %}, priority{% endif %}</small></summary>
      <div class="rows">
        {% set tier_names = [("steal", "Big bargains", "40% or more under the typical price"), ("deal", "Bargains", "20% or more under"), ("normal", "Everything else", "")] %}
        <fieldset class="set set--stack" style="border:0;margin:0"><legend class="set__text"><span class="t-h3">Send these</span><span class="t-sm">Compared with the search's typical price. New searches count as "everything else" until they know it.</span></legend>
          <div class="chips">{% for key, label, hint in tier_names %}<label class="chip chip--sm chip--check" title="{{ hint }}"><input type="checkbox" name="tiers" value="{{ key }}"{% if key in dd.opts.tiers %} checked{% endif %}>{{ ui.icon("check", "chip__tick") }}{{ label }}{% if hint %} <small class="t-sm">{{ hint }}</small>{% endif %}</label>{% endfor %}</div>
          <p class="help help--error" data-error-for="tiers" hidden></p>
        </fieldset>
        <fieldset class="set set--stack" style="border:0;margin:0"><legend class="set__text"><span class="t-h3">Without sound</span><span class="t-sm">These arrive quietly, no buzz</span></legend>
          <div class="chips">{% for key, label, hint in tier_names %}<label class="chip chip--sm chip--check"><input type="checkbox" name="silent_tiers" value="{{ key }}"{% if key in dd.opts.silent_tiers %} checked{% endif %}>{{ ui.icon("check", "chip__tick") }}{{ label }}</label>{% endfor %}</div>
        </fieldset>
        {% if dd.kind == "discord" %}
        <div class="set"><div class="set__text"><span class="t-h3">Look</span><span class="t-sm">Big card with photos, or one line</span></div><div class="seg" role="radiogroup" aria-label="Discord look"><label><input type="radio" name="style" value="card"{% if dd.opts.style != "compact" %} checked{% endif %}>Card</label><label><input type="radio" name="style" value="compact"{% if dd.opts.style == "compact" %} checked{% endif %}>Compact</label></div></div>
        <fieldset class="set set--stack" style="border:0;margin:0"><legend class="set__text"><span class="t-h3">Ping for</span><span class="t-sm">Which listings mention the person or role below</span></legend>
          <div class="chips">{% for key, label, hint in tier_names %}<label class="chip chip--sm chip--check"><input type="checkbox" name="ping_tiers" value="{{ key }}"{% if key in dd.opts.ping_tiers %} checked{% endif %}>{{ ui.icon("check", "chip__tick") }}{{ label }}</label>{% endfor %}</div>
        </fieldset>
        <div class="set set--stack"><div class="set__text"><span class="t-h3">Ping someone</span><span class="t-sm">Type @everyone to buzz phones even when the server is muted, or a role's ID number (Discord can't look names up for webhooks). Copy a role ID by turning on Developer Mode, then right-clicking the role.</span></div><div class="field"><input class="input" style="max-width:260px;min-height:38px" type="text" name="mention" value="{{ dd.opts.mention }}" placeholder="@everyone or 123456789012345678" aria-label="Who to ping"><p class="help help--error" data-error-for="mention" hidden></p></div></div>
        {% elif dd.kind == "telegram" %}
        <div class="set"><div class="set__text"><span class="t-h3">Look</span><span class="t-sm">One photo with buttons, or all photos</span></div><div class="seg" role="radiogroup" aria-label="Telegram look"><label><input type="radio" name="style" value="photo"{% if dd.opts.style != "gallery" %} checked{% endif %}>Photo</label><label><input type="radio" name="style" value="gallery"{% if dd.opts.style == "gallery" %} checked{% endif %}>All photos</label></div></div>
        {% elif dd.kind == "ntfy" %}
        <div class="set"><div class="set__text"><span class="t-h3">Priority</span><span class="t-sm">High can break through Do Not Disturb</span></div><select class="select" name="priority" style="width:130px;min-height:38px;font-size:14px" aria-label="Priority">{% for v, l in [("2", "Low"), ("3", "Normal"), ("4", "High"), ("5", "Urgent")] %}<option value="{{ v }}"{% if dd.opts.priority == v %} selected{% endif %}>{{ l }}</option>{% endfor %}</select></div>
        {% endif %}
        <div class="set set--stack"><div class="set__text"><span class="t-h3">Used by</span></div>
          <div class="chips">
            {% for sr in dd.searches %}<a class="tag" href="{{ url('search_edit', id=sr.id) }}#where"><i class="sdot" style="--sc: {{ sr.color }}"></i>{{ sr.name }}</a>{% else %}<span class="t-sm">No searches send here. Tick it in a search's "Where alerts go".</span>{% endfor %}
          </div>
        </div>
      </div>
      </details>
    </form>
    <div class="dest__foot">
      <button class="btn btn--secondary btn--sm" type="button" data-test-dest="{{ dd.id }}">{{ ui.icon("send", "i-sm") }}Send a test</button>
      <span class="grow"></span>
      <button class="btn btn--ghost btn--sm" type="button" data-confirm="delete-dest" data-name="{{ dd.name }}" data-action="/destinations/{{ dd.id }}/delete">{{ ui.icon("trash-2", "i-sm") }}Remove</button>
    </div>
  </article>
  {% endfor %}

  <article class="card dest" aria-labelledby="dest-browser" data-browser-card>
    <div class="dest__head">
      <span class="dest__logo dest__logo--browser">{{ ui.icon("monitor") }}</span>
      <div class="dest__name"><b id="dest-browser">This browser</b><small>Only while this page is open</small></div>
      <span class="badge">{{ ui.icon("clock") }}While open</span>
    </div>
    <div class="dest__body">
      <p class="t-sm">A chime and a pop-up when a find arrives, while a vinted-sniper tab is open on this device. Nothing to set up, but you'll miss finds while it's closed.</p>
      <div class="rows">
        <div class="set"><div class="set__text"><span class="t-h3">Play a sound</span><span class="t-sm">A short chime per new find</span></div><label class="switch"><input type="checkbox" data-sound-switch aria-label="Play a sound"></label></div>
        <div class="set"><div class="set__text"><span class="t-h3">Pop-up notifications</span><span class="t-sm" data-notify-state>Your browser asks once for permission</span></div><button class="btn btn--secondary btn--sm" type="button" data-notify-allow>Allow</button></div>
      </div>
    </div>
  </article>

  <button class="card" type="button" data-open="add-dest" style="border:0;cursor:pointer;display:grid;place-items:center;align-content:center;gap:10px;padding:32px;background:var(--c-surface-2);color:var(--c-text-2);font:inherit;box-shadow:inset 0 0 0 1.5px var(--c-line)">
    <span class="choice__icon" style="background:var(--c-surface)">{{ ui.icon("plus") }}</span>
    <span class="t-h3">Add a place</span>
    <span class="t-sm">Your phone, Telegram, Discord, email and more</span>
  </button>
</div>
{% endblock %}

{% block modals %}
<dialog class="modal modal--wide" id="add-dest" aria-labelledby="ad-title">
  <form data-add-dest novalidate>
    <div class="modal__head"><h2 class="t-h2" id="ad-title">Add a place for alerts</h2><button class="btn btn--icon" type="button" data-close aria-label="Close">{{ ui.icon("x") }}</button></div>
    <div class="modal__body">
      <fieldset class="choices" style="border:0;padding:0;margin:0">
        <legend class="sr-only">Where alerts go</legend>
        {% with kind="ntfy", errors={}, form={} %}{% include "partials/dest_forms.html" %}{% endwith %}
        <div class="choice choice--group">
          <label class="choice__row">
            <input type="radio" name="kind" value="webhook" data-kind-pick>
            <span class="choice__icon dest__logo dest__logo--webhook">{{ ui.icon("webhook") }}</span>
            <span class="choice__text"><span class="choice__title">Your own app</span><span class="choice__desc">A signed JSON post, for developers</span></span>
            <span class="choice__tick">{{ ui.icon("check") }}</span>
          </label>
          <div class="choice-more"><div class="stack" style="padding-top:6px">
            <div class="field"><label class="label" for="wh-url">Address</label><input class="input" id="wh-url" name="webhook_url" type="text" inputmode="url" placeholder="https://example.com/hook"></div>
            <div class="field"><label class="label" for="wh-secret">Signing secret <small>optional</small></label><input class="input" id="wh-secret" name="webhook_secret" type="text" autocomplete="off"></div>
          </div></div>
        </div>
      </fieldset>
      <div class="field" style="margin-top:14px"><label class="label" for="ad-name">Name <small>so you recognise it</small></label><input class="input" id="ad-name" name="name" type="text" placeholder="My phone"></div>
      {# Errors without a field of their own (the kind, a sender's own refusal) show here. #}
      <p class="help help--error" data-add-error hidden></p>
    </div>
    <div class="modal__foot"><button class="btn btn--secondary" type="button" data-close>Cancel</button><button class="btn btn--primary" type="submit">Save and send a test</button></div>
  </form>
</dialog>
<dialog class="modal" id="delete-dest" aria-labelledby="dd-title">
  <form method="post" data-confirm-form>
    <div class="modal__head"><h2 class="t-h2" id="dd-title">Remove <span data-fill="name"></span>?</h2><button class="btn btn--icon" type="button" data-close aria-label="Close">{{ ui.icon("x") }}</button></div>
    <div class="modal__body"><p>Searches stop sending here. If a search sends nowhere else, its finds still show on your Finds page.</p></div>
    <div class="modal__foot"><button class="btn btn--secondary" type="button" data-close>Keep it</button><button class="btn btn--danger" type="submit">Remove</button></div>
  </form>
</dialog>
{% endblock %}
{% block scripts %}<script src="{{ static('js/qrcode.js') }}" defer></script>{% endblock %}