{{ define "main" }}
<main>
    <script>
        console.log("Test message");
    </script>
    <div class="max-w-2xl px-6 pt-6 pb-16 mx-auto prose dark:prose-invert dark:text-white">
        <div class="max-w-screen-xl px-4 py-8 mx-auto">
            <script src="/js/chatgpt.js" defer></script>

            <div class="w-full max-w-md mx-auto mt-8">
                <h1>Diesel Engine</h1>
                <div class="flex justify-center">
                    <div class="w-full max-w-md mx-auto mt-4 px-4 py-2 text-lg font-semibold hidden" id="reload">
                        <button class="font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="button">
                            Reload
                        </button>
                    </div>
                    <div class="w-full max-w-md mx-auto mt-4 px-4 py-2 text-lg font-semibold hidden" id="loading">
                        Loading...
                    </div>
                </div>
                <form id="error-code-form" class="bg-black shadow-md rounded px-8 pt-6 pb-8 mb-4">
                    <div class="mb-4">
                        <label class="block text-sm font-bold mb-2" for="engine-code">
                            Engine Code:
                        </label>
                        <input color="black"
                            class="shadow border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                            type="text" id="engine-code" name="engine-code" required>
                    </div>
                    <div class="mb-6">
                        <label class="block text-sm font-bold mb-2" for="motor-brand">
                            Motor Brand:
                        </label>
                        <input
                            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                            type="text" id="motor-brand" name="motor-brand" required>
                    </div>
                    <div class="mb-6">
                        <label for="model">Model:</label>
                        <select
                            class="shadow appearance-none border rounded w-full py-2 px-3 text-black leading-tight focus:outline-none focus:shadow-outline"
                            id="model" name="model" required>
                        </select>
                    </div>
                    <div class="mb-6">
                        <p id="error-message" class="text-red-600 mt-2 hidden"></p>
                        <label for="api-key">OpenAI API Key:</label>
                        <input
                            class="shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
                            type="text" id="api-key" name="api-key" required>
                    </div>
                    <div id="submit" class="flex items-center justify-between hidden">
                        <button class="font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="submit">
                            Submit
                        </button>
                    </div>
                    <div id="fetch-models-button" class="flex items-center justify-between">
                        <button class="font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            type="button" id="fetch-models-button">Fetch Models</button>
                    </div>
                </form>
            </div>

            <div id="result" class="w-full max-w-md mx-auto mt-4 px-4 py-2 text-lg font-semibold">
            </div>

            <style>
                #error-code-form input,
                select {
                    color: black;
                }
            </style>

        </div>
    </div>
</main>
{{ end }}