{{ header }}
<div id="account-tracking" class="container-xl flex-grow-1">
 	<nav aria-label="breadcrumb">
        <ul class="breadcrumb pr-breadcrumb fsz-12">
        {% for breadcrumb in breadcrumbs %}
            {% if loop.last %}
                <li class="breadcrumb-item pr-breadcrumb-item">{{ breadcrumb.text }}</li>
            {% else %}
                <li class="breadcrumb-item pr-breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
            {% endif %}
        {% endfor %}
        </ul>
    </nav>
    <main>
        <div class="content-top-box">{{ content_top }}</div>
        <div class="row g-3 g-xxl-4 pr-account">
            {{ column_left }}
            {% if column_left and column_right %}
                {% set class = 'col-xl-6' %}
            {% elseif column_left or column_right %}
                {% set class = 'col-xl-9' %}
            {% else %}
                {% set class = 'col-xl-12' %}
            {% endif %}
            <div id="content" class="{{ class }}">
                <div class="content-block pr-account-page">
					<div class="pr-page-title mb-3 mb-xl-4 pb-3 pb-xl-4 border-bottom d-flex align-items-center gap-3">
						<h1>{{ heading_title }}</h1>
					</div>
                    <div class="h3 mt-0 mb-4">{{ text_description }}</div>
                    <form class="form-horizontal">
                        <fieldset class="p-0">
                            <div class="form-group mb-4">
                                <label class="dark-text fsz-14 fw-500 mb-1" for="input-code">{{ entry_code }}</label>
                                <textarea cols="40" rows="5" placeholder="{{ entry_code }}" id="input-code" class="form-control">{{ code }}</textarea>
                            </div>
                            <div class="form-group mb-4">
                                <label class="dark-text fsz-14 fw-500 mb-1" for="input-generator">
                                    <span data-bs-toggle="tooltip" title="{{ help_generator }}">{{ entry_generator }}</span>
    							</label>
                                <input type="text" name="product" value="" placeholder="{{ entry_generator }}" id="input-generator" class="form-control"/>
                            </div>
                            <div class="form-group mb-4">
                                <label class="dark-text fsz-14 fw-500 mb-1" for="input-link">{{ entry_link }}</label>
                                <textarea name="link" cols="40" rows="5" placeholder="{{ entry_link }}" id="input-link" class="form-control"></textarea>
                            </div>
                        </form>
                        <a href="{{ continue }}" class="button button-secondary button-large">{{ button_continue }}</a>
                    </fieldset>
                </div>
            </div>
            {{ column_right }}
        </div>
        {{ content_bottom }}
    </main>
</div>
<script type="text/javascript">
    <!--
    $('input[name=\'product\']').autocomplete({
        'source': function(request, response) {
            $.ajax({
                url: 'index.php?route=account/tracking/autocomplete&filter_name=' + encodeURIComponent(request) + '&tracking=' + encodeURIComponent($('#input-code').val()),
                dataType: 'json',
                cache: false,
                success: function(json) {
                    response($.map(json, function(item) {
                        return {label: item['name'], value: item['link']}
                    }));
                }
            });
        },
        'select': function(item) {
            $('input[name=\'product\']').val(item['label']);
            $('textarea[name=\'link\']').val(item['value']);
        }
    });

    //-->
</script>
{{ footer }}
