{strip}

{$_uniqid = uniqid()}

{$_rule_name = ""}
{if !empty($rule.id)}
    {$_rule_name = "rules[{$rule.id}]"}

{else}
    {$_rule_name = "rules[new]"}
    {if isset($options.ident)}
        {$_rule_name = "{$_rule_name}[{$options.ident}]"}
    {/if}
{/if}

{/strip}

<div class="s-utm-rule-section js-utm-rule-section fields" id="js-utm-rule-section-{$_uniqid}">
    <p class="hint">

        [`UTM tags help you learn where a customer has come from.`]
        {sprintf('<a href="%s" target="_blank">%s</a>', '[`https://www.shop-script.com/help/33511/marketing/`]#utm', '[`Read more about UTM tags`]')}  <i class="fas fa-external-link-alt smaller"></i>.
        <br>
        [`Press “Enter” upon entering each UTM tag to add it to the list.`]
    </p>

    <input class="js-rule-type" type="hidden" name="{$_rule_name}[rule_type]" value="utm">

    <div class="field">
        <div class="name">
            <div class="s-label">[`Campaign source`]</div>
            <div class="s-code">utm_source</div>
        </div>
        <div class="value">

            <input class="js-tags-input" type="text" name="{$_rule_name}[rule_params][utm_source]" id="js-utm-source-input-{$_uniqid}" value="{$rule.rule_params.utm_source|default:[]|join:','}" placeholder="[`Add UTM tag`]">

        </div>
    </div>

    <div class="field">
        <div class="name">
            <div class="s-label">[`Traffic type`]</div>
            <div class="s-code">utm_medium</div>
        </div>
        <div class="value">

            <input class="js-tags-input" type="text" name="{$_rule_name}[rule_params][utm_medium]" id="js-utm-medium-input-{$_uniqid}" value="{$rule.rule_params.utm_medium|default:[]|join:','}" placeholder="[`Add UTM tag`]">

        </div>
    </div>

    <div class="field">
        <div class="name">
            <div class="s-label">[`Campaign name`]</div>
            <div class="s-code">utm_campaign</div>
        </div>
        <div class="value">

            <input class="js-tags-input" type="text" name="{$_rule_name}[rule_params][utm_campaign]" id="js-utm-campaign-input-{$_uniqid}" value="{$rule.rule_params.utm_campaign|default:[]|join:','}" placeholder="[`Add UTM tag`]">

        </div>
    </div>

    <div class="field">
        <div class="name">
            <div class="s-label">[`Message ID`]</div>
            <div class="s-code">utm_content</div>
        </div>
        <div class="value">

            <input class="js-tags-input" type="text" name="{$_rule_name}[rule_params][utm_content]" id="js-utm-content-input-{$_uniqid}" value="{$rule.rule_params.utm_content|default:[]|join:','}" placeholder="[`Add UTM tag`]">

        </div>
    </div>

    <div class="field">
        <div class="name">
            <div class="s-label">[`Keyword`]</div>
            <div class="s-code">utm_term</div>
        </div>
        <div class="value">

            <input class="js-tags-input" type="text" name="{$_rule_name}[rule_params][utm_term]" id="js-utm-term-input-{$_uniqid}" value="{$rule.rule_params.utm_term|default:[]|join:','}" placeholder="[`Add UTM tag`]">

        </div>
    </div>

    <script>
        ( function($) {
            var $wrapper = $("#js-utm-rule-section-{$_uniqid}").removeAttr('id');

            $wrapper.find(".js-tags-input").each( function() {
                var $input = $(this);

                $input.tagsInput({
                    width: "auto",
                    height: "42px",
                    defaultText: $input.attr("placeholder"),
                    onChange: function() {
                        var $wrapper = $input.parent().find(".tagsinput");
                        $wrapper.css("height","auto");
                        var height = $wrapper[0].scrollHeight;
                        $wrapper.css("min-height", height);
                    }
                });
            });

        })(jQuery);
    </script>
</div>