<article class="content-article" aria-posinset="{{ position }}" aria-setsize="20" data-id="{{ id }}" id="post-id-{{ id }}" tabindex="0">
  <div tabindex="-1">
    <div class="status__wrapper status__wrapper-public focusable" tabindex="0">
      <div class="status status-public" data-id="{{ id }}">
        <div class="status__expand" role="presentation"></div>
        <div class="status__info"><a href="{{ url }}" class="status__relative-time" target="_blank" rel="noopener noreferrer"><time datetime="{{ datetime }}" title="{{ date }}">{{ date }}</time></a>
          <a href="{{ author_url }}" title="{{ author }}" class="status__display-name" target="_blank" rel="noopener noreferrer">
            <div class="status__avatar">
              {% if avatar %}
                <div class="account__avatar" style="width: 48px; height: 48px; background-size: 48px 48px; background-image: url({{ avatar }});"></div>
              {% else %}
                <div class="account__avatar fa fa-user-circle" {{ avatar|raw }}></div>
              {% endif %}
              {% if new %}
                <div class="new">{% trans %}new{% endtrans %}</div>
              {% endif %}
            </div>
            <span class="display-name"><bdi><strong class="display-name__html">{{ author }}</strong></bdi> <span class="display-name__account">{{ account }}</span></span></a>
        </div>
        <div class="status__content" tabindex="0">
          <div class="status__content__text status__content__text--visible">
            {{ response_type }}
            {% if name %}
              <h2>
                {{ name }}
              </h2>
            {% endif %}
            {% if content %}
              <div class="main-content">
                {{ content }}
              </div>
            {% endif %}
            {% if context %}
              <div class="context">
                {{ context }}
              </div>
            {% endif %}
          </div>
          {% if images %}
            <div class="media-gallery mfp-all-items">
              {% for image in images %}
                <div class="media-gallery__item-thumbnail">
                  <a href="{{ image }}" class="image-gallery-item"><img alt="" loading="lazy" src="{{ image }}" /></a>
                </div>
              {% endfor %}
            </div>
          {% endif %}
          {% if audio %}
            <div class="audio"> <audio controls preload="none"> <source src="{{ audio }}"> </audio> </div>
          {% endif %}
          {% if video %}
            <div class="video"> <video controls preload="none"> <source src="{{ video }}"> </video> </div>
          {% endif %}
        </div>
        {% if actions %}
        <div class="status__action-bar">
          <div class="status__action-bar-dropdown"><div><button aria-label="More" title="More" class="icon-button" style="font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 18px;" tabindex="0"><i role="img" class="fa fa-ellipsis-h fa-fw" aria-hidden="true"></i> </button></div>
          </div>
          <div class="status__action-bar-links">{{ actions }}</div>
        </div>
        {% endif %}
      </div>
    </div>
  </div>
</article>
