@model string

<div class="container mt-4">
    <div class="card justify-content-center">
        <div class="card-body">
            <h5 class="card-title">Generate Content</h5>

            <div class="row">
                <form id="generateForm">
                    <div class="mb-3 col-12">
                        <label for="inputText" class="control-label">Input Text</label>
                        <textarea id="inputText" name="inputText" class="form-control" rows="4"></textarea>
                        <span class="text-danger" id="inputTextError"></span>
                    </div>

                    <div class="mb-3 ml-3">
                        <button type="button" id="generateButton" class="btn btn-primary">Generate</button>
                    </div>
                </form>
            </div>

            <div id="generatedContent" style="display: none;">
                <div class="mt-4">
                    <h5>Generated Content</h5>
                    <p id="generatedText"></p>
                </div>
            </div>
        </div>
    </div>
</div>

@section scripts {
    <script>
        $(document).ready(function () {
            // Handle click event on generate button
            $("#generateButton").click(function () {
                // Clear previous error message
                $("#inputTextError").text("");

                // Get input text
                var inputText = $("#inputText").val();

                // Validate input text
                if (inputText.trim() === "") {
                    $("#inputTextError").text("Input text is required.");
                    return;
                }

                // Make AJAX request to generate content
                $.ajax({
                    url: "/Contents/GenerateContent",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify({ inputText: inputText }),
                    success: function (data) {
                        // Display generated content
                        $("#generatedText").html(data);
                        $("#generatedContent").show();
                    },
                    error: function (xhr, status, error) {
                        // Display error message
                        console.error(xhr.responseText);
                    }
                });
            });
        });
    </script>
}