{%load static %}

<article class="LP-PlaceTeaser {% if extended %} LP-PlaceTeaser--extended{% endif %}">
    <div class="LP-PlaceTeaser__Image">
        {% if place.get_hero_image %}
			{% include 'partials/image.html' with source_url=place.get_hero_image.filename.thumbnail.url link_url=place.get_absolute_url%}
        {% else %}
			<a href="{{place.get_absolute_url}}">
            	<img class="LP-Image" src="{% static 'images/missing_image.png' %}" />
			</a>
        {% endif %}
        </div>
    </a>
    <div class="LP-PlaceTeaser__Meta">
        <div class="LP-PlaceTeaser__Info">
            <span class="LP-PlaceTeaser__Title">
                <h1 class="LP-Headline LP-Headline--teaser">{{place.name|truncatechars:19}}</h1>
            </span>
            <span class="LP-PlaceTeaser__Detail">
                <p class="LP-Paragraph">{{place.location|truncatechars:25}}</p>
            </span>
        </div>
        <div class="LP-PlaceTeaser__Description">
            <p class="LP-Paragraph">
                {% if place.description|length > 210 %}
                {{place.description|truncatechars:210|truncatewords:-1}}
                {% else %}
                {{place.description}}
                {% endif %}
            </p>
        </div>
        <div class="LP-PlaceTeaser__Icons">
            <ul class="LP-Icon__List">
                <li class="LP-Icon__Item">{% include 'partials/icons/place_favorite.html' with place=place%}</li>
                <li class="LP-Icon__Item">{% include 'partials/icons/place_visited.html' with place=place%}</li>
                <li class="LP-Icon__Item"><img class="LP-Icon" src="{% static '/icons/flag.svg' %}" /></li>
            </ul>
        </div>
    </div>
</article>