<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Assistant</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 p-10">

    <form class="bg-white p-5 rounded shadow-lg w-full md:85 mx-auto" action="api.php" method="POST">
        <h1 class="p-5 text-19 text-center">
            <b>WELCOME TO</b>
            <img src="WALTR.png" alt="WALTR" class="w-48 mx-auto">
            <b>W</b>eb
            <b>A</b>ssistant for
            <b>L</b>anguage
            <b>T</b>echnologies
            <b>R</b>esearch
        </h1>

        <p>
            Fill out the form below to have W.A.L.T.R. generate a Formstack form. Please note, this is a limited tech demo.
        </p>

        <br>
        <label class="block mb-2 font-bold text-gray-500">Industry</label>
        <select class="w-full p-2 border rounded" required name="industry">
            <option value="">Choose One...</option>
            <option>Education</option>
            <option>Real Estate</option>
            <option>Retail</option>
            <option>Non-Profit</option>
            <option>Hospitality</option>
            <option>Legal</option>
            <option>Government</option>
            <option>Technology</option>
            <option>Financial Services</option>
            <option>Healthcare</option>
            <option>Manufacturing</option>
            <option>Food</option>
            <option>Agriculture</option>
            <option>E-commerce</option>
            <option>Transportation</option>
            <option>Entertainment</option>
            <option></option>
        </select>

        <br>
        <br>

        <label class="block mb-2 font-bold text-gray-500">Department / Category</label>
        <select class="w-full p-2 border rounded" required name="dept">
            <option value="">Choose One...</option>
            <option>Finance</option>
            <option>Human Resources</option>
            <option>Marketing</option>
            <option>Sales</option>
            <option>Operations</option>
            <option>Customer Service</option>
            <option>Information Technology (IT)</option>
            <option>Legal</option>
            <option>Research and Development (R&D)</option>
            <option>Procurement</option>
            <option>Supply Chain</option>
            <option>Quality Assurance</option>
            <option>Production</option>
            <option>Engineering</option>
            <option>Administrative</option>
            <option>Public Relations</option>
            <option>Compliance</option>
            <option>Security</option>
            <option>Logistics</option>
            <option>Product Management</option>
        </select>

        <br>
        <br>

        <label class="block mb-2 font-bold text-gray-500">Form Name</label>
        <input required type="text" class="w-full p-2 border rounded" name="name" placeholder="e.g. Summer Event Registration Form">

        <br>
        <br>

        <label class="block mb-2 font-bold text-gray-500">Field List</label>
        <textarea required id="user-input" class="w-full p-2 border rounded" name="fields" rows="5" placeholder="Separate fields by comma or new lines, e.g.:&#10;email, name, phone ..."></textarea>

        <br>
        <br>

        <label class="block mb-2 font-bold text-gray-500">OpenAI API Token</label>
        <input required type="password" name="ai_tok" class="w-full p-2 border rounded" placeholder="OpenAI Token">

        <br>
        <br>

        <label class="block mb-2 font-bold text-gray-500">Formstack oAuth Token</label>
        <input required type="password" name="fs_tok" class="w-full p-2 border rounded" placeholder="Formstack Token">

        <br>
        <br>

        <input type="submit" value="Generate Form" class="mt-3 bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-700">

    </form>

</body>
</html>

