{% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/photo-collection-card.css">
{% endblock component_styles %}

<a class="photo-collection-card" href="{{collection.path}}">
    <div class="card mb-3">
        <div class="row g-0">
            <div class="col-md-4">
                <img src="{{collection.extra.cover_image}}" class="img-fluid rounded-start cover-image"
                    alt="Cover image" loading="lazy">
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h3 class="card-title">{{collection.title}}</h3>
                    {% if collection.description %}
                    <p class="card-text">{{collection.description}}</p>
                    {% endif %}
                    <p class="card-text"><small class="text-muted">Published on {{collection.date}}</small></p>
                </div>
            </div>
        </div>
    </div>
</a>