{{define "snippet_grid"}}
<script id="snippet-data" type="application/json">{{.SnippetsJSON}}</script>
{{range .Snippets}}
<div class="bg-white border border-outline-variant/30 rounded-2xl overflow-hidden shadow-sm flex flex-col group">
  <div class="p-5 flex justify-between items-start gap-4">
    <div class="space-y-1">
      <div class="flex flex-wrap items-center gap-2">
        <h3 class="font-bold text-on-surface text-base group-hover:text-primary transition-colors">{{.Name}}</h3>
        <div class="flex flex-wrap gap-1">
          {{range .Tags}}
          <span class="px-2 py-0.5 bg-surface-container text-[10px] font-bold rounded text-on-surface-variant">{{.}}</span>
          {{end}}
        </div>
      </div>
      {{if .Description}}
      <p class="text-xs text-on-surface-variant leading-relaxed">{{.Description}}</p>
      {{end}}
    </div>

    <div class="flex items-center gap-2 shrink-0">
      <button data-copy="{{.Content}}"
              class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-primary text-outline hover:text-primary transition-colors"
              title="Copy code to clipboard">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
      </button>
      <button hx-delete="/snippets/{{.ID}}" hx-target="#snippet-grid" hx-confirm="Delete {{.Name}}?"
              class="p-1.5 border border-outline-variant/40 rounded-lg bg-surface-container-low hover:border-error text-outline hover:text-error transition-colors"
              title="Delete code snippet">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
      </button>
    </div>
  </div>

  <div class="bg-surface-container-low border-t border-outline-variant/40 p-4 font-mono text-xs text-on-surface relative group/code overflow-x-auto">
    <pre class="text-on-surface select-all leading-relaxed whitespace-pre font-medium">{{.Content}}</pre>
    <button data-copy="{{.Content}}"
            class="absolute right-4 top-4 bg-white/90 backdrop-blur border border-outline-variant/30 shadow px-2.5 py-1 rounded text-[10px] font-mono font-bold hover:border-primary hover:text-primary transition-colors opacity-0 group-hover/code:opacity-100">
      COPY
    </button>
  </div>

  <div class="px-5 py-2 border-t border-outline-variant/20 bg-surface-container-lowest flex justify-between items-center text-[10px] text-outline font-semibold">
    <span>Last adjusted {{.CreatedAt}}</span>
    <span class="flex items-center gap-1 text-primary">
      <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
      Ready to inject to shell
    </span>
  </div>
</div>
{{end}}

{{if eq (len .Snippets) 0}}
<div class="p-12 border border-dashed border-outline-variant/40 rounded-2xl text-center text-outline">
  No matching snippet found.
</div>
{{end}}
{{end}}