{**
 * rec.reviews
 *
 * @author    Presta-Module.com <support@presta-module.com> - https://www.presta-module.com
 * @copyright Presta-Module - https://www.presta-module.com
 * @license   see file: LICENSE.txt
 *
 *           ____     __  __
 *          |  _ \   |  \/  |
 *          | |_) |  | |\/| |
 *          |  __/   | |  | |
 *          |_|      |_|  |_|
 *
 *}

<div id="onboardingContainer">
    <iframe id="onboardingIframe" src="{$onboardingLink|escape:'htmlall':'UTF-8'}"></iframe>

    {if empty($isAddons)}
        <hr />

        <div class="startUsing">
            <p>{l s='To start using the rec.reviews service, all you need to do is create your account. You can then access the module configuration.' mod='pmproductvideoreviews'}</p>
        </div>

        <div class="onboardingButtonsContainer">
            <a class="createAccount" href="{$register_link|escape:'htmlall':'UTF-8'}" target="blank">
                <span class="btn-label text-center">
                    {l s='Create account' mod='pmproductvideoreviews'}
                </span>
            </a>
            <a class="login" href="{$generatedLink|escape:'htmlall':'UTF-8'}">
                <span class="btn-label text-center">
                    {$linkTitle|escape:'htmlall':'UTF-8'}
                </span>
            </a>
        </div>
    {else}
        <section class="psAccountsSection">
            <div class="m-auto col-12 col-sm-12 col-md-8 col-lg-8 col-xl-6">
                <prestashop-accounts></prestashop-accounts>
            </div>

            {if ($isAccountLinked)}
                <form id="psAccountLinkedForm" class="m-auto col-12 col-sm-12 col-md-8 col-lg-8 col-xl-6" method="POST" action="{$accountCreationUrl|escape:'htmlall':'UTF-8'}">
                    <div class="d-flex flex-column justify-content-center">
                        <input type="hidden" name="linkRbm" value="1" />
                        <div class="form-group">
                            <label for="lastName">{$lastNameLabel|escape:'htmlall':'UTF-8'}</label>
                            <input type="text" name="lastName" id="lastName" class="form-control" required autocomplete="family-name" />
                        </div>
                        <div class="form-group">
                            <label for="firstName">{$firstNameLabel|escape:'htmlall':'UTF-8'}</label>
                            <input type="text" name="firstName" id="firstName" class="form-control" required autocomplete="given-name" />
                        </div>
                        <div class="form-group">
                            <div class="form-check">
                                <input type="checkbox" name="terms" id="terms" class="form-check-input" required />
                                <label for="terms" class="form-check-label">{$termsLabel|escape:'htmlall':'UTF-8'}</label>
                            </div>
                        </div>
                        <div class="form-group psAccountsSectionSubmitContainer">
                            <button type="submit" class="btn btn-primary">{$submitLabel|escape:'htmlall':'UTF-8'}</button>
                            <p class="form-text text-muted">{$helpLabel|escape:'htmlall':'UTF-8'}</p>
                        </div>
                    </div>
                </form>
            {/if}
        </section>

        {include file='module:pmproductvideoreviews/views/templates/admin/accountsScript.tpl'}
    {/if}
</div>

<script>
    window.addEventListener('message', (e) => {
        if (typeof (e.data.outerHeight) === 'undefined') {
            return;
        }

        document.getElementById('onboardingIframe').height = e.data.outerHeight;
    });

    // Disable form submit button to prevent spam
    document.querySelector('#psAccountLinkedForm').addEventListener('submit', (e) => {
        e.submitter.disabled = true;
    });
</script>