@page
@model IndexModel

@if (Model.theScene.role == "error")
{
    <h2>Vælg project</h2>
    <form class="form-horizontal" method="post">
        <select id="role" name="role" onchange="javascript:this.form.submit()">
            <option value="error">---</option>
            @foreach (var scene in Model.Scenes)
            {
                <option value="@scene.role">@scene.role</option>
            }
        </select>
    </form>
}
else
{
    <h2 style="background-color:#f0f0f0;">@Model.theScene.quest</h2>

    <div style="border:1px solid #ccc; padding:10px; height:300px; overflow-y:auto; background-color:#f9f9f9;">
        @foreach (var msg in Model.ChatHistory)
        {
            <p>
                <strong>@msg.Role:</strong> @Html.Raw(msg.Content)
            </p>
        }
    </div>

    <form method="post">
        <input type="text" asp-for="UserInput" style="width:80%" />
        <button type="submit">Send</button>
    </form>
}

@section scripts {
    <script>
        // Auto-scroll to the bottom of the chat history
        var chatHistory = document.querySelector('div[style*="overflow-y:auto"]');
        if (chatHistory) {
            chatHistory.scrollTop = chatHistory.scrollHeight;
        }
    </script>
}   