{% import "partials/macros.html" as ui %}
{#
  Asking for support, in two shapes. web/support.py says when the card shows.
  The card sits on Finds after an alert has reached someone; the block is in Settings,
  a page people open themselves. Neither is ever a pop-up.
#}

{# Ko-fi's own cup, from the button Ko-fi offers for READMEs, drawn here so nothing loads from Ko-fi. #}
{% macro kofi_cup(size=24) -%}
<svg class="kofi-cup" width="{{ size }}" height="{{ (size * 19 / 22)|round(1) }}" viewBox="20 6 22 19" fill="none" aria-hidden="true">
  <path d="M29.1393 24.6047C25.8118 24.6047 23.1053 23.1165 21.5189 20.4141C20.1144 18.0454 20 15.4798 20 12.613C20 10.9135 20.5113 9.43371 21.4779 8.33338C22.3663 7.32279 23.625 6.66813 25.0228 6.48986C26.6821 6.27967 28.7448 6.26221 30.8895 6.26221C34.3796 6.26221 35.3655 6.30497 36.7386 6.44228C38.5653 6.62356 40.1022 7.30532 41.1827 8.41408C42.28 9.54031 42.86 11.0442 42.86 12.7648V13.1105C42.86 16.0465 40.8972 18.5038 38.1618 19.1717C37.9576 19.6535 37.7047 20.1329 37.4053 20.605L37.3975 20.6171C36.4339 22.1065 34.1688 24.6053 29.8301 24.6053H29.1387L29.1393 24.6047Z" fill="white"/>
  <path d="M21.4459 12.6128C21.4459 9.73822 23.175 8.18257 25.2064 7.923C26.741 7.72847 28.6429 7.70679 30.89 7.70679C34.3909 7.70679 35.2985 7.75015 36.5952 7.87964C39.6426 8.18197 41.4145 10.0622 41.4145 12.764V13.1097C41.4145 15.6169 39.5776 17.67 37.0921 17.8856C36.8975 18.5342 36.5952 19.1823 36.1844 19.8309C35.2335 21.3004 33.3315 23.159 29.8306 23.159H29.1392C26.2863 23.159 24.082 21.9274 22.7637 19.6797C21.5965 17.7133 21.4453 15.5301 21.4453 12.6128" fill="#202020"/>
  <path d="M23.065 12.6343C23.065 15.4222 23.2379 17.2157 24.1455 18.8797C25.1826 20.8034 27.0629 21.5381 29.2027 21.5381H29.8724C32.682 21.5381 34.0437 20.1764 34.8001 18.9881C35.1675 18.3829 35.4915 17.7132 35.6643 16.87L35.7938 16.3298H36.572C38.301 16.3298 39.7922 14.9253 39.7922 13.1311V12.8071C39.7922 10.7974 38.5389 9.73801 36.3557 9.47905C35.1241 9.37125 34.3894 9.32788 30.8878 9.32788C28.5324 9.32788 26.8466 9.34955 25.5717 9.54409C23.7781 9.80367 23.0645 10.8191 23.0645 12.6343" fill="white"/>
  <path d="M35.7969 14.1256C35.7969 14.3852 35.9914 14.5797 36.3371 14.5797C37.4393 14.5797 38.0445 13.9528 38.0445 12.9157C38.0445 11.8786 37.4393 11.23 36.3371 11.23C35.9914 11.23 35.7969 11.4245 35.7969 11.6841V14.1263V14.1256Z" fill="#202020"/>
  <path d="M25.1842 13.9968C25.1842 15.2718 25.8973 16.374 26.8049 17.2388C27.4102 17.8224 28.3611 18.4277 29.0092 18.8167C29.2037 18.9245 29.3982 18.9896 29.6144 18.9896C29.874 18.9896 30.0896 18.9245 30.2631 18.8167C30.9117 18.4277 31.8621 17.8224 32.4457 17.2388C33.375 16.3746 34.088 15.2724 34.088 13.9968C34.088 12.6134 33.0509 11.3818 31.5597 11.3818C30.6738 11.3818 30.0685 11.8359 29.6144 12.4623C29.2037 11.8353 28.5773 11.3818 27.6908 11.3818C26.1779 11.3818 25.1836 12.6134 25.1836 13.9968" fill="#FF5A16"/>
</svg>
{%- endmacro %}

{#
  The card on Finds, in one of three looks (heading, words, tint) so it doesn't turn into
  wallpaper. Not teal, which the watch band above already is. The logo rather than Mags:
  the watch band already has him. The thank-you texts swap in after a click.
#}
{% macro card(look) -%}
{% set looks = [
  ("", "Did it find you something good?", "I'm Jasper, a student, and I build vinted-bot in my spare time. It's free and stays free. A coffee keeps me going, and a star on GitHub helps other people find it."),
  ("sun", "Glad it's finding things", "vinted-bot is free, with no ads, no account and no tracking. If it helped, a coffee keeps it going, and a star on GitHub helps other people find it."),
  ("lilac", "Found while it's still there", "Good listings go fast, and this tells you about them while you can still buy them. I'm a student keeping it free, so a coffee helps, and so does a star."),
] %}
{% set tint, heading, pitch = looks[look % looks|length] %}
{% set links = support_links("support-card") %}
<aside class="support-card{% if tint %} support-card--{{ tint }}{% endif %}" aria-labelledby="support-title" data-support-card
  data-thanks-coffee="Thank you!|That means a lot. It's what keeps it free for everyone."
  data-thanks-star="Thanks for the star!|If you'd like to do more, a coffee helps too.">
  <img class="support-card__logo" src="{{ static('img/icons/favicon.svg') }}" alt="" width="40" height="40">
  <div class="support-card__body">
    <h2 class="support-card__title" id="support-title" data-support-title>{{ heading }}</h2>
    <p data-support-pitch>{{ pitch }}</p>
    <div class="support-card__actions">
      <a class="btn btn--kofi" href="{{ links.kofi }}" target="_blank" rel="noopener" data-support-thanks="coffee">{{ kofi_cup(24) }}Buy me a coffee<span class="sr-only"> on Ko-fi</span></a>
      <a class="btn btn--secondary" href="{{ links.star }}" target="_blank" rel="noopener" data-support-thanks="star">{{ ui.icon("star") }}Star on GitHub</a>
    </div>
    <div class="support-card__quiet">
      <a href="{{ links.issue }}" target="_blank" rel="noopener">Something not right? Tell me</a>
      <form method="post" action="/support/hide" data-support-hide><button type="submit">Don't show again</button></form>
    </div>
  </div>
</aside>
{%- endmacro %}

{#
  The block at the top of Settings' last part. One-off gifts, which people give more
  readily than a monthly one. Ko-fi has no link that fills in an amount, so it says the
  amount is chosen there. The free ways to help sit beside it, each offered once on the page.
#}
{% macro block(place) -%}
{% set links = support_links(place) %}
{% set tiers = [
  ("Any amount", "You choose", "wave", "sun"),
  ("Keeps it working", "€5 once", "parcel", "lilac"),
  ("Keeps it getting better", "€10 once", "cheer", "mint"),
] %}
<section class="support" aria-labelledby="support-block-title">
  <div class="support__story">
    {{ ui.mags("wave", "support__mags") }}
    <div>
      <h2 class="support__title" id="support-block-title">Help keep it free</h2>
      <p>I'm a student and build vinted-bot in my free time. It has no ads and no tracking, and it stays free. If it got you a good find, you can buy me a coffee.</p>
    </div>
  </div>
  <ul class="tiers">
    {% for name, note, pose, field in tiers %}
    <li><a href="{{ links.kofi }}" target="_blank" rel="noopener">
      <span class="tier__art tier__art--{{ field }}" aria-hidden="true">
        <svg class="tier__heart tier__heart--a" viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-9.4-9.1C1.3 8.6 3.4 5 7 5c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.6 0 5.7 3.6 4.4 6.9C19.5 16.4 12 21 12 21z"/></svg>
        <svg class="tier__heart tier__heart--b" viewBox="0 0 24 24"><path d="M12 21s-7.5-4.6-9.4-9.1C1.3 8.6 3.4 5 7 5c2.1 0 3.6 1.2 5 3 1.4-1.8 2.9-3 5-3 3.6 0 5.7 3.6 4.4 6.9C19.5 16.4 12 21 12 21z"/></svg>
        <img class="tier__mags" src="{{ static('img/mags/mags-' ~ pose ~ '.webp') }}" alt="" loading="lazy" decoding="async">
        {{ kofi_cup(44) }}
      </span>
      <span class="tier__name">{{ name }}</span>
      <span class="tier__amount num">{{ note }}</span>
    </a></li>
    {% endfor %}
  </ul>
  <p class="support__small">These open Ko-fi, where you pick the amount.</p>
  <div class="support__other">
    <span>No money needed: a star on GitHub, or the link sent to a friend, helps others find it.</span>
    <span class="support__links">
      <a class="btn btn--secondary btn--sm" href="{{ links.star }}" target="_blank" rel="noopener">{{ ui.icon("star", "i-sm") }}Star on GitHub</a>
      <button class="btn btn--secondary btn--sm" type="button" data-copy="{{ links.website }}">{{ ui.icon("copy", "i-sm") }}Copy the link</button>
    </span>
  </div>
</section>
{%- endmacro %}