<div class="column is-3-widescreen is-4-desktop is-6-tablet peer_video_container" data-pinned="false">
    <div class="card">
        <div class="card-content p-0 position-relative">
            <video class="peer_video_stream" autoplay playsinline tabindex="0" style="width: 100%; height: auto; object-fit: cover; border-radius: 6px;">
            </video>
            <div class="is-overlay is-flex is-align-items-end is-justify-content-space-between p-3">
                <div class="is-flex is-align-items-center">
                    {%- if identities is defined -%}
                        {% set identity = identities.get(entity) %}
                        {% set nick = identity.nicknames[0] if identity.nicknames else jid %}
                        <figure class="image is-48x48 mr-2">
                            {%- if identity.avatar.filename %}
                                <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}" alt="{{ nick }}">
                            {% else %}
                                <span class="is-avatar is-48x48 is-flex is-justify-content-center is-align-items-center has-background-light has-text-dark has-text-weight-bold is-size-5 is-rounded">{{nick|first|upper}}</span>
                            {%- endif -%}
                        </figure>
                        <span class="tag is-medium is-rounded is-info has-text-weight-semibold">
                            {{ nick }}
                        </span>
                    {%- endif -%}
                </div>
                <div class="dropdown is-right is-hoverable">
                    <div class="dropdown-trigger">
                        <button class="button is-small is-rounded is-light" aria-haspopup="true" aria-controls="dropdown-menu">
                            <span class="icon is-small">
                                <i class="icon-dot-3-vert"></i>
                            </span>
                        </button>
                    </div>
                    <div class="dropdown-menu" id="dropdown-menu" role="menu">
                        <div class="dropdown-content">
                            <a href="#" class="dropdown-item action_pin">
                                {% trans %}Pin{% endtrans %}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>