{**
 * Ecommerce copilot
 *
 * @author    businesstech.fr <modules@businesstech.fr> - https://www.businesstech.fr/
 * @copyright Business Tech - https://www.businesstech.fr/
 * @license   see file: LICENSE.txt
 *
 *           ____    _______
 *          |  _ \  |__   __|
 *          | |_) |    | |
 *          |  _ <     | |
 *          | |_) |    | |
 *          |____/     |_|
 *}


<form id="editForm" class="bg-gray-100 shadow-lg rounded-lg px-4 sm:px-8 pt-6 pb-8 mb-4">
    <p class="text-2xl sm:text-3xl font-bold mb-6 pb-2 border-b text-gray-800">{l s='Preview' mod='btecommercecopilot'}</p>

    <div class="hidden bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r" id="invalidEditData">
        {l s='One or more invalid data have been sent.' mod='btecommercecopilot'}
    </div>

    <div class="hidden bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-6 rounded-r" id="generatedEditData"></div>

    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-6 rounded-r" role="alert" id="about">
        {l s='Important: this is an HTML preview of your content. We strongly advise you to read it in order to check that it is coherent and corresponds to what you want. The AI is just a copilot. It\'s there to help you, but it can\'t replace you. Read the text, improve or correct it if necessary, and save.' mod='btecommercecopilot'}
    </div>

    <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 mb-6 rounded-r" role="alert" id="no-valid-sub">
        {l s='Your subscription is not valid or your PS account has been disconnected. Please check in the module configuration that your PS account is still connected to your store, and if not, please reconnect it. If your account is connected, it means that your subscription is no longer valid. In this case, please contact support.' mod='btecommercecopilot'}
    </div>

    <div class="mb-6" id="output">
        <label class="block text-gray-700 text-sm font-bold mb-2" for="productInput">{l s='Generated content' mod='btecommercecopilot'}</label>
        <textarea class="w-full px-3 py-2 text-gray-700 border rounded-lg focus:outline-none focus:border-blue-500" rows="20" cols="100" name="productDescription" id="productDescription" required="true" oninput="updateProductDescriptionContent(this.value, 'productDescriptionContent');"></textarea>
        </div>

    <div id="productDescriptionOverview" class="bg-white p-4 border rounded-lg mb-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-4">{l s='HTML Preview' mod='btecommercecopilot'}</h2>
        <div class="text-gray-700" id="productDescriptionContent"></div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-between mt-8 pt-6 border-t">
        <div class="w-full sm:w-auto text-center mt-5">
            {* For next module version *}
            {* <a type="button" href="#" class="text-blue-500 hover:text-blue-700 transition-colors duration-200">{l s='Ask the AI to improve its response' mod='btecommercecopilot'} </a> *}
        </div>
        <div class="w-full text-center mt-5" id="save-section">
            <a id="saveProduct" name="saveProduct" class="bg-green-500 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">{l s='Save' mod='btecommercecopilot'}</a>
        </div>

        <div class="w-full sm:w-auto text-center mt-2" id="new-generation">
            <a type="button" href="{$exportFormUrl|escape:'htmlall':'UTF-8'}" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg focus:outline-none focus:shadow-outline transition duration-300">
                {l s='Generate new content' mod='btecommercecopilot'} </a>
        </div>
    </div>
</form>