{% extends 'components/search_item.html' %}

{% import 'components/avatar.html' as avatar with context %}

{% block call %}
<div class="level is-mobile">
    <div class="level-right">
        <div class="level-item">
            <div class="search-item-extra dropdown is-right">
                <div class="dropdown-trigger">
                    <button class="button is-white is-small" aria-haspopup="true" aria-controls="dropdown-menu">
                        <span class="icon">
                            <i class="icon-dot-3-vert"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" role="menu">

                    <div class="dropdown-content">
                        <!-- Video Call Option -->
                        <a class="click-to-video dropdown-item">
                            <span class="icon">
                                <i class="icon-videocam"></i>
                            </span>
                            {% trans %}Video Call{% endtrans %}
                        </a>

                        <!-- Audio Call Option -->
                        <a class="click-to-audio dropdown-item">
                            <span class="icon">
                                <i class="icon-phone"></i>
                            </span>
                            {% trans %}Audio Call{% endtrans %}
                        </a>

                        <!-- Remote Control Option -->
                        <a class="click-to-remote-control dropdown-item">
                            <span class="icon">
                                <i class="icon-keyboard"></i>
                            </span>
                            {% trans %}Remote Control{% endtrans %}
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}