<a href="event/{{event.id}}" style="color: inherit; text-decoration: none;"> <div class="card mb-4 shadow"> <!-- <div class="card-header"> --> <img src="static/{{ event.image_path }}" class="card-img-top" alt="..."> <!-- </div> --> <div class="sep"></div> <div class="card-body"> <h5 class="card-title ">{{ event.name }}</h5> <ul class="list-group list-group-flush"> <li class="list-group-item"><i class="far fa-clock"></i> Total duration: {{event.duration }}</li> <li class="list-group-item"><i class="far fa-map"></i> {{ event.location_name }}</li> <ul class="list-group-item d-flex justify-content-between align-items-center"> <span> {% for n in range(event.rating) %} <i class="fas fa-star"></i> {% endfor %} {% for n in range(5 - event.rating) %} <i class="far fa-star"></i> {% endfor %} </span> <span class="badge bg-secondary small rounded-pill">{{ event.nreviews }} reviews</span> </ul> </ul> </div> </div> </a>