{# server-rendered first page of recipe cards. JS appends matching markup for subsequent pages. #}
<a class="recipe-card{% if r.picked %} picked{% endif %}" href="/recipes/{{ r.slug }}" data-slug="{{ r.slug }}" data-name="{{ r.name }}">
  <span class="rmain">
    <div class="rname">{{ r.name }}</div>
    <div class="rmeta">
      {% if r.totalTime %}{{ r.totalTime }}{% if r.recipeYield or r.dateUpdated %} · {% endif %}{% endif %}
      {% if r.recipeYield %}{{ r.recipeYield }}{% if r.dateUpdated %} · {% endif %}{% endif %}
      {{ r.dateUpdated[:10] if r.dateUpdated else '' }}
    </div>
    {% if r.tags %}
    <div class="rtags">
      {% for t in r.tags[:3] %}<span class="rtag">{{ t.name }}</span>{% endfor %}
    </div>
    {% endif %}
  </span>
  <button class="pick-btn{% if r.picked %} on{% endif %}" type="button" aria-label="add to picks" data-slug="{{ r.slug }}" data-name="{{ r.name }}">
    <svg class="shroom" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M5 11 q0 -7 7 -7 q7 0 7 7 q0 1.4 -1 1.4 H6 q-1 0 -1 -1.4z" fill="#9b5fe8"/>
      <path d="M9.5 12.4 v6 q0 1.6 2.5 1.6 q2.5 0 2.5 -1.6 v-6" fill="#e8e0c8" stroke="#9b5fe8" stroke-width=".7"/>
      <circle cx="9" cy="8" r="1" fill="#0a0a0c"/>
      <circle cx="15" cy="7.5" r=".8" fill="#0a0a0c"/>
      <circle cx="12" cy="9.5" r=".7" fill="#0a0a0c"/>
    </svg>
  </button>
</a>