<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ReEdgeGPT</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
          rel="stylesheet"
          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
          crossorigin="anonymous">
    <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
            crossorigin="anonymous">
    </script>
    <script src="{{url_for('static', filename='javascript/call_back_end.js')}}"></script>
</head>
<body>
<section style="background-color: #eee;">
    <div class="container py-5">

        <div class="row d-flex justify-content-center">
            <div class="col-md-8 col-lg-6 col-xl-4">

                <div class="card" id="chat_board" style="border-radius: 15px;">
                    <div
                            class="card-header d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0"
                            style="border-top-left-radius: 15px; border-top-right-radius: 15px;">
                        <i class="fas fa-angle-left"></i>
                        <p class="mb-0 fw-bold">Chat</p>
                        <i class="fas fa-times"></i>
                    </div>
                    <div class="card-body">
                        <div id="chatTextArea">
                            <div class="form-outline">
                                <textarea class="form-control" id="inputTextArea" rows="4"></textarea>
                                <label class="form-label" for="inputTextArea">Type your message</label>
                                <button type="button" class="btn btn-primary" onclick="sendChatPrompt()">
                                    Send prompt
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>
</body>
</html>