<div class="bg-white rounded-lg shadow">
  {% if snippets %}
    <div class="divide-y">
      {% for s in snippets %}
        <div class="flex items-center gap-4 p-4 hover:bg-stone-50 transition">
          {# Name #}
          <div class="flex-1 min-w-0">
            <div class="font-medium truncate">{{ s.name }}</div>
            <div class="text-xs text-stone-500">
              {% if s.user_id == g.user.id %}
                You
              {% else %}
                User #{{ s.user_id }}
              {% endif %}
            </div>
          </div>

          {# Visibility badge #}
          {% set badge_colours = {
            'private': 'bg-stone-200 text-stone-700',
            'shared': 'bg-blue-100 text-blue-700',
            'admin': 'bg-amber-100 text-amber-700',
          } %}
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ badge_colours.get(s.visibility, 'bg-stone-200 text-stone-700') }}">
            {{ s.visibility }}
          </span>

          {# Admin: inline visibility select #}
          {% if is_admin %}
            <select
              name="visibility"
              hx-patch="{{ url_for('snippets.patch_visibility', snippet_id=s.id) }}"
              hx-target="#snippets-list"
              hx-swap="innerHTML"
              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
              class="text-sm border border-stone-300 rounded px-2 py-1"
            >
              {% for v in ['private', 'shared', 'admin'] %}
                <option value="{{ v }}" {{ 'selected' if s.visibility == v else '' }}>{{ v }}</option>
              {% endfor %}
            </select>
          {% endif %}

          {# Delete button #}
          {% if s.user_id == g.user.id or is_admin %}
            <button
              type="button"
              data-confirm
              data-confirm-title="Delete snippet?"
              data-confirm-text="Delete &ldquo;{{ s.name }}&rdquo;?"
              data-confirm-icon="warning"
              data-confirm-confirm-text="Yes, delete"
              data-confirm-cancel-text="Cancel"
              data-confirm-event="confirmed"
              hx-delete="{{ url_for('snippets.delete_snippet', snippet_id=s.id) }}"
              hx-trigger="confirmed"
              hx-target="#snippets-list"
              hx-swap="innerHTML"
              hx-headers='{"X-CSRFToken": "{{ csrf_token() }}"}'
              class="px-3 py-1 text-sm bg-red-200 hover:bg-red-300 rounded text-red-800 flex-shrink-0">
              <i class="fa fa-trash"></i> Delete
            </button>
          {% endif %}
        </div>
      {% endfor %}
    </div>
  {% else %}
    <div class="p-8 text-center text-stone-400">
      <i class="fa fa-puzzle-piece text-4xl mb-2"></i>
      <p>No snippets yet. Create one from the blog editor.</p>
    </div>
  {% endif %}
</div>
