neiam /bismuth

{% extends "root.html" %}

{% block width %}max-w-6xl{% endblock %}

{% block content %}
<div class="flex items-center justify-between gap-3">
  <h1 class="text-2xl font-bold">Snippets</h1>
  <a href="/" class="btn btn-sm btn-primary"><i class="fas fa-plus fa-fw"></i> New card</a>
</div>

{% if snippets %}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
  {% for s in snippets %}
  <a href="/s/{{ s.slug }}" class="card bg-base-200 border border-base-300 hover:border-primary transition-colors overflow-hidden">
    <figure class="bg-base-300 aspect-[4/3]">
      <img src="/s/{{ s.slug }}/card.svg" alt="{{ s.title }}" loading="lazy" class="w-full h-full object-contain p-2">
    </figure>
    <div class="card-body p-3 gap-1">
      <h2 class="font-semibold truncate">{{ s.title or "Untitled" }}</h2>
      <p class="text-xs font-mono opacity-60 truncate">{{ s.language }} · {{ s.chrome }} · {{ s.palette }}</p>
    </div>
  </a>
  {% endfor %}
</div>
{% else %}
<div class="rounded-box border border-dashed border-base-300 p-10 text-center opacity-80">
  <p>No snippets yet.</p>
  <a href="/" class="btn btn-sm btn-ghost mt-3">Make one</a>
</div>
{% endif %}
{% endblock %}