{% if not embedded %}
    {% set loading_screen = true %}
    {% extends 'base/base.html' %}
{% endif %}

{% block body %}
    {{ icon_defs(
    "resize-full", "resize-small", "volume-up", "videocam", "dot-3-vert", "wrench", "user-circle"
    ) }}
    <audio id="audio_player" class="is-hidden" src="{{media_path}}sounds/notifications/ring_1.mp3" preload="auto" loop></audio>
    <section class="section is-full-below-menu" style="position: relative" >
    <div id="containers_wrapper">

    {# Search #}
    <div id="search_container" class="is-overlay">
        <div id="search_header" class="columns is-1">
            <div class="column">
                <input class="input" type="search" id="search" placeholder="Enter contact's name or address">
            </div>

        <div class="column is-narrow buttons has-addons">
            <button class="button is-primary" id="call_btn">
                <i class="icon-videocam" aria-hidden="true"></i>
                {% trans %}Video Call{% endtrans %}
            </button>
            <button class="button is-primary" id="toggle_call_mode_btn">
                <span class="icon is-small">
                    <i class="icon-exchange" aria-hidden="true"></i>
                </span>
            </button>
        </div>
        </div>

        <div id="contacts" class="columns is-multiline is-mobile">
        </div>

    </div>

    {# Calls #}
    <div class="is-hidden is-flex is-flex-direction-column" id="call_container">

        <div class="columns is-1 is-centered is-vcentered m-0" id="call_header">
            <div class="column p-0">
                <div class="columns is-mobile is-1 is-vcentered m-0">
                    <div class="column is-narrow px-0" id="call_avatar_wrapper"></div>
                    <div class="column" id="call_status_wrapper"></div>
                </div>
            </div>
            <div class="column is-narrow has-text-centered px-0" id="hangup_wrapper">
                <button class="button is-danger" id="hangup_btn">{% trans %}Hang Up{% endtrans %}</button>
            </div>
        </div>

        <div id="call_box" class="is-relative mt-3 is-flex-grow-1">
            <video id="remote_video" class="is-video-only" autoplay playsinline></video>
            <div class="fullscreen-btn is-video-only">
                <button class="button is-light" id="full_screen_btn">
                    {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
                </button>
                <button class="button is-light is-hidden" id="exit_full_screen_btn">
                    {{ icon('resize-small', cls='image is-24x24 is-inline-block') }}
                </button>
            </div>
            <video id="local_video" class="is-video-only" autoplay playsinline muted></video>

            <div class="controls is-flex is-justify-content-center is-align-items-center p-4">
                <button class="button is-success mx-2" id="mute_audio_btn">
                    {{ icon('volume-up', cls='image is-24x24 is-inline-block') }}
                </button>
                <button class="button is-success mx-2 is-video-only" id="mute_video_btn">
                    {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
                </button>
            </div>
        </div>
    </div>

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