{% 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", "desktop"
    ) }}
    <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 class="container">
            <div class="columns is-vcentered is-mobile">

        <!-- Search bar -->
        <div class="column is-flex-grow-1">
            <input class="input" type="search" id="search" placeholder="Enter contact's name or address" aria-label="Search for contacts">
        </div>

        <!-- Video Call Button -->
        <div class="column is-narrow">
            <button class="button is-primary" id="video_call_btn" aria-label="Initiate Video Call">
                <span class="icon">
                    <i class="icon-videocam"></i>
                </span>
            </button>
        </div>

        <!-- Audio Call Button -->
        <div class="column is-narrow">
            <button class="button is-light" id="audio_call_btn" aria-label="Initiate Audio Call">
                <span class="icon">
                    <i class="icon-phone"></i>
                </span>
            </button>
        </div>
            </div>
        </div>

        <div id="contacts" class="columns is-multiline is-mobile is-half-touch">
        </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></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>
                <button class="button is-success mx-2 inactive screen-off is-hidden-touch" id="share_desktop_btn">
                    {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
                </button>
            </div>
        </div>
    </div>

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