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

{% block body %}
    {{ icon_defs(
    "desktop", "doc", "dot-3-vert", "exchange", "mic", "phone", "resize-full", "resize-small", "user-circle", "videocam", "wrench"
    ) }}
    <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>

        <!-- Group Call Button -->
        <div class="column is-narrow is-hidden">
            <button class="button is-info" id="group_call_btn" aria-label="Initiate Group Call">
                <span class="icon">
                    <i class="icon-group"></i>
                </span>
                <span>Group Call</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 tabindex="0"></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 is-not-remote" autoplay playsinline></video>

            <div class="call-controls columns is-centered is-mobile is-multiline">
                <div class="column is-narrow">
                    <button class="button is-success is-not-remote" id="mute_audio_btn" aria-label="{{ _('Mute audio') }}">
                        {{ icon('mic', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
                <div class="column is-narrow">
                    <button class="button is-success is-video-only is-not-remote" 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 is-video-only is-not-remote">
                    <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 is-not-remote">
                    <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 is-not-remote">
                    <button class="button " id="send_file_btn" aria-label="{{ _('Send file') }}">
                        {{ icon('doc', cls='image is-24x24 is-inline-block') }}
                    </button>
                    <input type="file" id="send_file_input" style="display:none;" />
                </div>
                <div class="column is-narrow">
                    <button class="button is-danger is-rotated-135" id="hangup_btn" aria-label="{{ _('Hang up') }}">
                        {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
            </div>

        </div>
    </div>


    {# Group Calls #}

    <div class="is-hidden is-flex is-flex-direction-column" id="group_call_container">
        <!-- Status Bar (Header) with Fullscreen Button on the Right -->
        <div class="columns">
            <div class="column is-11" id="group_call_status_wrapper"></div>
            <div class="column">
                <div class="buttons has-addons is-right">
                    <button class="button is-light" id="group_full_screen_btn">
                        {{ icon('resize-full', cls='image is-24x24 is-inline-block') }}
                    </button>
                </div>
            </div>
        </div>

        <!-- Peer Video Grid - Adjusted for dynamic resizing -->
        <div class="columns is-multiline mt-3 is-flex-grow-1 is-variable is-0" id="group_video_grid" style="flex-wrap: wrap;">
            <!-- Peer templates dynamically loaded here -->
        </div>

        <!-- Call Control for Hangup -->
        <div class="group-call-controls columns is-centered is-mobile">
            <div class="column is-narrow">
                <button class="button is-danger is-rotated-135" id="group_hangup_btn">
                    {{ icon('phone', cls='image is-24x24 is-inline-block') }}
                </button>
            </div>
        </div>
    </div>

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