<div class="card">
    <div class="card-body">
        <div class="card-image waves-effect waves-block waves-light">
            <ul class="card-entry-labels">
            {% for tag in entry.tags | slice(0, 3) %}
                <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
            {% endfor %}
            </ul>
            <a href="{{ path('view', { 'id': entry.id }) }}">
                <span class="preview" style="background-image: url({{ entry.previewPicture }})"></span>
            </a>
        </div>
        {% include "@WallabagCore/themes/material/Entry/Card/_content.html.twig" with {'entry': entry, 'withPreview': true} only %}
    </div>

    <div class="card-reveal">
        <i class="card-title activator grey-text text-darken-4 material-icons right">clear</i>
        <span class="card-title">
            <a href="{{ path('view', { 'id': entry.id }) }}" title="{{ entry.title | striptags | e('html_attr') }}">
                {{ entry.title |  striptags | truncate(80, true, '…') | raw }}
            </a>
        </span>

        <p>{{ entry.content|striptags|slice(0, 250)|raw }}&hellip;</p>

        <ul class="card-entry-labels-hidden">
            {% for tag in entry.tags %}
                <li><a href="{{ path('tag_entries', {'slug': tag.slug}) }}">{{ tag.label }}</a></li>
            {% endfor %}
        </ul>
    </div>

    {% include "@WallabagCore/themes/material/Entry/_card_actions.html.twig" with {'entry': entry} only %}
</div>
