{$wrapper_id = uniqid('t-confirm-deletion-dialog')}

<div class="dialog s-confirm-reset-password-dialog" id="{$wrapper_id}">
    <div class="dialog-background"></div>
    <div class="dialog-body">
        <header class="dialog-header">
            {if $contact_has_account}
                <h2 class="s-title">[`Reset customer’s password and send it to an email address`]</h2>
            {else}
                <h2 class="s-title">[`Create a customer account and send a password to an email address`]</h2>
            {/if}
        </header>
        <div class="dialog-content">
            <ul class="menu js-emails">
                {foreach $contact_emails as $email}
                    <li>
                        <label>
                            <span class="wa-radio">
                                <input type="radio" name="email" value="{$email.id}"{if $email@first} checked data-first-element="1"{/if}>
                                <span></span>
                            </span>
                            <span class="s-email">{$email.email}</span>
                            {if $email@first && count($contact_emails) > 1}
                                <span>([`Main`])</span>
                            {/if}
                        </label>
                    </li>
                {/foreach}
                {if empty($contact_emails)}
                    <li>
                        <span>[`The contact has no email addresses.`]</span>
                    </li>
                {/if}
            </ul>

            <span class="js-error-message state-error" style="display: none;">[`Contact’s main email address will be changed. The new main address will have to be used to sign into the customer account.`]</span>
            <span class="js-response-message state-error"></span>
        </div>
        <footer class="dialog-footer">
            <div class="s-actions">
                <div>
                    {if !empty($contact_emails)}
                        <button type="submit" class="button yellow js-submit-button">{if $contact_has_account}[`Reset password`]{else}[`Create customer account`]{/if}</button>
                    {/if}
                    <button class="js-close-dialog button light-gray">[`Cancel`]</button>
                </div>
                <button class="button light-gray js-close-dialog js-close-button" style="display:none">[`Close`]</button>
            </div>
        </footer>
    </div>

    <script>
        ( function($) { "use strict";
            var $wrapper = $('#{$wrapper_id}'),
                $error = $wrapper.find('.js-error-message'),
                $submit_button = $wrapper.find(".js-submit-button");

            var dialog = $wrapper.data("dialog");

            var is_locked = false;

            $wrapper.on("change", "input[type=radio]", function() {
                if ($(this).data('first-element')) {
                    $error.hide();
                } else {
                    $error.show();
                }
            });

            $submit_button.on("click", function(event) {
                event.preventDefault();

                if (is_locked) { return false; }
                is_locked = true;

                $submit_button.attr("disabled", true);
                var $loading = $("<i class=\"fas fa-spinner fa-spin custom-ml-4\"></i>").appendTo($submit_button);

                var href = "?module=customers&action=resetPassword",
                    data = {
                        contact_id: {$id},
                        email_id: $wrapper.find('input[name="email"]:checked').val()
                    };

                $.post(href, data, "json")
                    .always( function() {
                        $loading.remove();
                        $submit_button.attr("disabled", false);
                        is_locked = false;
                    })
                    .done( function(response) {
                        if (response.status === "ok") {
                            renderResponse(response.data);
                        } else if (response.errors) {
                            renderResponse(response.errors);
                        }
                    });
            });

            function renderResponse(response) {
                $submit_button.parent().hide();
                $wrapper.find('.js-close-button').show();
                $('.js-emails').hide();
                $('.js-response-message').html(response);
            }
        })(jQuery);
    </script>
</div>