{% macro render_media_list(media_list, thumb_width=150, current_user=None) -%}
  {% if media_list %}
    <div class="row">
      {% for media in media_list %}
        <div class="col-md-3 mb-4" data-media-id="{{ media.id }}">
          <div class="card shadow-sm">
            <img src="{{ url_for('media.serve', plugin=media.plugin, filename=media.filename) }}"
                 class="card-img-top" style="width:100%; height:auto;">
            {% if media.caption %}
              <div class="card-body p-2">
                <p class="card-text text-center">{{ media.caption }}</p>
              </div>
            {% endif %}
            <div class="card-footer d-flex justify-content-between align-items-center p-2">
              <button class="btn btn-sm btn-outline-danger heart-btn" data-id="{{ media.id }}">
                ❤️ <span class="heart-count">{{ media.hearts|length }}</span>
              </button>
              {% if current_user and (current_user.id == media.uploader_id or current_user.role == 'admin') %}
                <form method="POST" action="{{ url_for('media.set_featured_image', media_id=media.id) }}">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  {% if media.featured_entries|length %}
                    <button class="btn btn-sm btn-outline-secondary" type="submit">★ Featured</button>
                  {% else %}
                    <button class="btn btn-sm btn-outline-primary" type="submit">☆ Set Featured</button>
                  {% endif %}
                </form>
              {% endif %}
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{%- endmacro %}
