==
{% if feeditemclass is empty %}
    {% set feeditemclass = 'masonry-item' %}
{% else %}
    {% set feeditemclass = 'masonry-item ' ~ feeditemclass %}
{% endif %}

{% if posts is empty %}
    <p>No feed items have been found.</p>
{% endif %}

{% for post in posts %}
    <div class="{{ feeditemclass }}">
        <div class="card">
            {% if post.extra.img %}
                <img class="card-img-top" src="{{ post.extra.img }}">
            {% elseif post.extra.lat %}
                <!--<div>MAP!</div>
                <img class="card-img-top" src="https://api.mapbox.com/styles/v1/mapbox/light-v10/static/{{ post.extra.lng }},{{ post.extra.lat }},14,0/725x400@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">-->
                <img class="card-img-top" src="https://api.mapbox.com/styles/v1/jason32dev/ckgehopjc2o1y19o09aqs4x11/static/pin-l+B05C71({{ post.extra.lng }},{{ post.extra.lat }})/{{ post.extra.lng }},{{ post.extra.lat }},14,0/545x300@2x?access_token=pk.eyJ1IjoiamFzb24zMmRldiIsImEiOiJjazFsNHd5djcwMXptM2htbW8zM3MyZGxuIn0.-TtNNGFysQPQRfGR1P8DUA">
            {% endif %}
            <div class="card-body">
                {% if post.channel.slug == 'twitter' or post.channel.slug == 'instagram' %}
                    {% if post.title | striptags | length < 100 %}
                        <h2 class="card-title">{{ post.title | raw | nl2br }}</h2>
                    {% elseif  post.title | striptags | length < 150 %}
                        <p class="card-text main">{{ post.title | raw | nl2br }}</p>
                    {% else %}
                        <p class="card-text">{{ post.title | raw | nl2br }}</p>
                    {% endif %}
                {% elseif post.channel.slug == 'foursquare' %}
                    {% if post.body %}<p class="card-text main">{{ post.body | raw | nl2br }}</p>{% endif %}
                    <h2 class="card-title mb-1">{{ post.title }}</h2>
                    <p class="card-text">{{ post.extra.address }}</p>
                {% endif %}
                <div class="feedcard-footer">
                    <p class="float-right feedcard-itemtype">{{ post.friendlytime }} <i class="{{ post.channel.icon }}" style="color: {{ post.channel.colour }};"></i></p>
                    {% if post.channel.slug == 'twitter' and post.extra.opuser %}
                        <p class="float-left feedcard-attribution"><i class="fas fa-retweet"></i> <a href="https://twitter.com/{{ post.extra.opuser }}">{{ post.extra.opname }}</a> <img src="{{ post.extra.opimg }}"></p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
{% endfor %}