{$submit_to_right_of_email = !empty($params.submit_to_right_of_email) && count($params.fields) === 1}
{$caption_vertical_spacing = $params.caption_vertical_spacing|default:10}
<style>
{strip}
    #{$uniqid} { --min-width-input: 160px; }
    #{$uniqid} { position: relative; width: 100%; text-align: left; max-width: {$params.formwidth|default:450}px; }
    #{$uniqid} .wa-subscribe-form { display: flex; flex-direction: column; row-gap: {$params.row_gap|default:20}px; }

    {if ifset($params.captionplace) == 'none'}
        #{$uniqid} .wa-field .wa-caption { display: none; }
    {elseif ifset($params.captionplace) == 'above'}
        #{$uniqid} .wa-field { display: flex; flex-direction: column; row-gap: {$caption_vertical_spacing}px; }
    {else}
        #{$uniqid} .wa-field { display: flex; flex-wrap: wrap; align-items: baseline; row-gap: {$caption_vertical_spacing}px; }
        #{$uniqid} .wa-caption { overflow: hidden; width: {$params.captionwidth|default:20}%; }
        #{$uniqid} .wa-name.wa-caption { padding-right: 1rem; }
    {/if}

    #{$uniqid} .wa-value { flex: 1 1 min-content; min-width: var(--min-width-input); }
    #{$uniqid} [data-field="captcha"] { align-items: start; }
    #{$uniqid} [data-field="captcha"] .wa-value, #{$uniqid} [data-field="agreement"] .wa-value { min-width: 220px; }

    {if $submit_to_right_of_email}
        #{$uniqid} [data-field="email"] .wa-value { display: flex; align-items: center; flex-wrap: wrap; column-gap: {$params.submit_margin_left|default:16}px; row-gap: {$caption_vertical_spacing}px; }
        #{$uniqid} [data-field="email"] .wa-value input[type="text"] { min-width: var(--min-width-input); height: fit-content; margin-right: 0; flex: 20 1 var(--min-width-input); }
        #{$uniqid} [data-field="email"] .wa-value .wa-submit-wrapper { flex: 1 1 0; }
    {/if}

    #{$uniqid} input[type="text"], #{$uniqid} input[type="email"] { box-sizing: border-box; }
    #{$uniqid} .wa-caption { word-break: break-word; }
    #{$uniqid} .wa-after-submit { position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: #fff; display: none;text-align: center; width: 100%; }
    #{$uniqid} .wa-after-submit span { display: inline-block; vertical-align: middle; width: 100%; }

    #{$uniqid} .wa-fill { min-width: 0; width: 100%; }
    #{$uniqid} .wa-error { border: 1px solid red; }

    #{$uniqid} .wa-captcha { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
    #{$uniqid} .wa-captcha p { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
    #{$uniqid} .wa-captcha input[type="text"] { min-width: 68px; max-width: 76px; flex: 1 1 auto; width: 0; }
    #{$uniqid} .wa-captcha .wa-captcha-refresh { font-size: 0.8em;text-decoration: underline;color: rgba(131, 131, 131, 0.7); }

    {if !empty($params.submit_full_width)}
        #{$uniqid} .wa-submit { width: 100%; }
    {/if}

    #{$uniqid} .wa-error { border: 2px solid red; color: red; }
    #{$uniqid} .wa-errormsg { color: red; display: none; font-weight: normal; font-size: 12px; margin-bottom: 0.75rem; }

    @media screen and (max-width: 441px) {
        #{$uniqid} .wa-caption { width: 100%; }
    }
    @supports (container-type: inline-size) {
        #{$uniqid} .wa-subscribe-form { container: {$uniqid} / inline-size; }
        @container {$uniqid} (max-width: 441px) {
            #{$uniqid} .wa-caption { width: 100%; }
        }
    }
{/strip}
</style>
<div id="{$uniqid}" data-version="2">

    <form class="wa-subscribe-form" action="{$wa->getUrl('mailer/frontend/subscribe', true)}" method="post">
        {foreach $params.fields as $key => $field}
        <div class="wa-field" data-field="{$key}">
            <label for="{$uniqid}{$key}" class="wa-name wa-caption">{$field.caption|escape}</label>

            {if $key == 'captcha'}
            <div class="wa-value">
                {$wa->captcha(null, true, "[`Refresh code`]")}
            </div>
            {else}
            <div class="wa-value wa-value-input">
                <input type="text" data-user="true" class="wa-fill" id="{$uniqid}{$key}" name="subscriber[{$key}]" placeholder="{$field.placeholder|escape}">
                {if $key == 'email' && $submit_to_right_of_email}
                <div class="wa-submit-wrapper">
                    <input type="submit" class="wa-submit" value="{$params.button_caption|escape}">
                    <i class="icon16 loading" style="display: none;"></i>
                </div>
                {/if}
            </div>
            {/if}
        </div>
        {/foreach}

        {if isset($params.show_subscription_list)}
            {foreach $lists as $list}
            <div class="wa-field">
                <div class="wa-name wa-caption"></div>
                <div class="wa-value">
                    <label class="wa-checkbox">
                        <input type="checkbox" name="lists[]" value="{$list.id}" checked>
                        {$list.name|escape}
                    </label>
                </div>
            </div>
            {/foreach}
        {/if}

        {if !empty($params.service_agreement) && !empty($params.service_agreement_hint)}
            <div class="wa-field" data-field="agreement">
                <div class="wa-name wa-caption"></div>
                <div class="wa-value">
                    <label class="wa-checkbox">
                        {if $params.service_agreement == 'checkbox'}
                            <input type="checkbox" name="service_agreement" value="1">
                        {/if}
                        <span>{$params.service_agreement_hint}</span>
                    </label>
                </div>
            </div>
        {/if}

        <input type="hidden" name="form_id" value="{$form.id}"/>
        <input type="hidden" name="uniqid" value="{$uniqid}"/>

        <div class="wa-field"{if $submit_to_right_of_email} style="display: none;"{/if}>
            <div class="wa-name wa-caption"></div>
            <div class="wa-value">
                <div class="wa-errormsg"></div>
                {if !$submit_to_right_of_email}
                <div class="wa-submit-wrapper">
                    <input type="submit" class="wa-submit" value="{$params.button_caption|escape}">
                    <i class="icon16 loading" style="display: none;"></i>
                </div>
                {/if}
            </div>
        </div>
    </form>
    <div class="wa-after-submit">
        <span class="wa-value"></span>
    </div>
    <div style="visibility:hidden;max-height:0;word-break:break-all;color:transparent;user-select:none;">
        {for $i=0 to 30}{$uniqid}{/for}
    </div>
</div>