{% 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", "exchange", "phone"
    ) }}
    <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">
            <div class="control has-icons-right">
                <input class="input" type="search" id="search" placeholder="Enter contact's name or address" aria-label="Search for contacts">
                <span class="icon is-right">
                    <a role="button" tabindex="0" class="delete is-small" id="clear_search_btn" aria-label="Clear search"></a>
                </span>
            </div>
        </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>

        <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" aria-label="{{ _('Enter full screen') }}">
                    {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
                </button>
                <button class="button is-light is-hidden" id="exit_full_screen_btn" aria-label="{{ _('Exit full screen') }}">
                    {{ 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="call-controls columns is-centered is-mobile">
                <div class="column is-narrow">
                    <button class="button is-success" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}">
                        {{ icon('volume-up', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
                <div class="column is-narrow">
                    <button class="button is-success is-video-only" id="mute_video_btn" aria-label="{{ _('Mute video') }}">
                        {{ icon('videocam', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
                <div id="share_desktop_column" class="column is-narrow is-hidden-touch">
                    <button class="button is-success inactive screen-off" id="share_desktop_btn" aria-label="{{ _('Share desktop') }}">
                        {{ icon('desktop', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
                <div id="switch_camera_column" class="column is-narrow is-hidden-desktop">
                    <button class="button is-success" id="switch_camera_btn" aria-label="{{ _('Switch camera') }}">
                        {{ icon('exchange', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
                <div class="column is-narrow">
                    <button class="button is-danger" id="hangup_btn" aria-label="{{ _('Hang up') }}">
                        {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
            </div>

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