{% if url_preview %}

<div id="url-preview" class="box my-2 url-preview has-background-light">
  <div class="has-text-right">
    <span class="tag is-dark is-rounded is-fullwidth-mobile has-text-centered-mobile mb-2">
      {% trans %}Preview{% endtrans %}
    </span>
  </div>
  <article class="media">
    {% if url_preview.image %}
      <figure class="media-left is-hidden-touch">
        <p class="image is-64x64">
          <img src="{{ url_preview.image }}" alt="">
        </p>
      </figure>
    {% endif %}
    <div class="media-content">
      <div class="content">
        {% if url_preview.image %}
          <p class="is-hidden-desktop">
            <img src="{{ url_preview.image }}" alt="" class="image is-64x64 mb-2">
          </p>
        {% endif %}
        <p>
          <strong><a href="{{ url_preview.url }}" class="has-text-dark">{{ url_preview.title }}</a></strong> <br>
          {% if url_preview.author_name %}
            <small>{% trans %}By{% endtrans %} <a href="{{ url_preview.author_url }}">{{ url_preview.author_name }}</a></small> <br>
          {% endif %}
          {{ url_preview.description }}
        </p>

      </div>
    </div>
  </article>
{% if url_preview.html %}
  <div class="url-preview-iframe-container">
      <iframe class="url-preview-iframe" srcdoc="{{url_preview.html}}" frameborder="0" sandbox="{{'allow-scripts allow-same-origin' if url_preview.html_known}}"></iframe>
  </div>
{% endif %}

  <footer class="content has-text-right">
    <a href="{{ url_preview.provider_url }}" class="has-text-grey">{% trans %}source:{% endtrans %} {{ url_preview.provider_name }}</a>
  </footer>
</div>
{% endif %}