contentdb/app/templates/macros/packagegridtile.html

{% macro render_pkgtile(package, show_author) -%}
	<li class="packagetile flex-fill"><a href="{{ package.getURL("packages.view") }}"
		style="background-image: url({{ package.getThumbnailOrPlaceholder(2) }});">
		<div class="packagegridscrub"></div>
		<div class="packagegridinfo">
			<h3>
				{{ package.title }}

				{% if show_author %}<br />
					<small>{{ package.author.display_name }}</small>
				{% endif %}
				{% if not package.approved %}
					<span class="badge ml-1 {% if package.state == package.state.CHANGES_NEEDED %}bg-danger{% else %}bg-warning{% endif %}">
						{{ package.state.value }}
					</span>
				{% endif %}
			</h3>

			<p>
				{{ package.short_desc }}
			</p>

			{% if not package.license.is_foss and not package.media_license.is_foss and package.type != package.type.TXP  %}
				<p style="color:#f33;">
					<b>Warning:</b> Non-free code and media.
				</p>
			{% elif not package.license.is_foss and package.type != package.type.TXP %}
				<p style="color:#f33;">
					<b>Warning:</b> Non-free code.
				</p>
			{% elif not package.media_license.is_foss %}
				<p style="color:#f33;">
					<b>Warning:</b> Non-free media.
				</p>
			{% endif %}
		</div>
	</a></li>
{% endmacro %}

{% macro render_pkggrid(packages, show_author=True) -%}
	<ul class="d-flex p-0 flex-row flex-wrap justify-content-start align-content-start ">
		{% for p in packages %}
			{{ render_pkgtile(p, show_author) }}
		{% else %}
			<li class="packagetile flex-fill"><i>No packages available</i></li>
		{% endfor %}
		{% if packages %}
			{% for i in range(4) %}
				<li class="packagetile flex-fill"></li>
			{% endfor %}
		{% endif %}
	</ul>
{% endmacro %}