@page "{Transaction_UID}"
@using System.Text.Json
@model EnotaryoPH.Web.Pages.Participant.VideoCall.RoomModel
@{
    Layout = "_Blank";
}

@section Head {
    <style>
        .video-container {
            position: relative;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
            background: #000;
            border: 2px solid #444;

            width: 100%;
            overflow: hidden;
        }

        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* This will maintain the video's original aspect ratio and crop if necessary */
        }

        .video-element {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .participant-name {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.5);
            padding: 2px 8px;
            border-radius: 4px;
            z-index: 1;
        }

        .controls {
            position: fixed;
            bottom: 20px;
            left: 50%;
            /* transform: translateX(-50%); */
            background: rgba(0,0,0,0.8);
            padding: 10px;
            border-radius: 20px;
        }

        .participant-col {
            transition: all 0.3s ease;

            display:flex;
            justify-content: center;
            align-items: center;
        }
    </style>
}

<div class="container-fluid py-3" id="videoGrid-container">
    <div class="d-flex mb-1">
        <div>
            <span>32:04</span>
        </div>
        <div class="flex-fill"></div>
        <div>
            <a href="#" id="ViewDocument" class="btn btn-sm btn-secondary">View Document</a>
            <a href="#" id="Approve" class="btn btn-sm btn-success">Approve</a>
            <a href="#" id="Reject" class="btn btn-sm btn-danger">Reject</a>
        </div>

    </div>
    <div class="row g-2" id="VideoGrid">
    </div>
</div>

<template id="templateVideo">
    <div class="video-container bg-light">
        <div class="participant-name">Participant Name</div>
    </div>
</template>

<input type="hidden" id="Participants" value="@(System.Web.HttpUtility.JavaScriptStringEncode(JsonSerializer.Serialize(Model.Participants)).Replace("\\", ""))" />
<input type="hidden" id="CommunicationUserToken" value="@Model.CommunicationUserToken" />
<input type="hidden" id="CommunicationUserId" value="@Model.CommunicationUserId" />
<input type="hidden" id="CommunicationRoomId" value="@Model.CommunicationRoomId" />

<form method="post" asp-page-handler="StartRecording">
    <input type="hidden" asp-for="ServerCallID" />
    <input type="hidden" asp-for="Transaction_UID" />
</form>

@section Scripts {
    <script type="text/javascript" src="/dist/_jfa.js"></script>
    <script src="~/Pages/Participant/VideoCall/Room.cshtml.js" asp-append-version="true"></script>
}