{{ header }}
<ul class="breadcrumb">
  {% for breadcrumb in breadcrumbs %}
  <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
  {% endfor %}
</ul>
{% if j3.settings.get('pageTitlePosition') == 'top' %}
  <h1 class="title page-title"><span>{{ heading_title }}</span></h1>
{% endif %}
{{ j3.loadController('journal3/layout', 'top') }}
<div id="account-tracking" class="container">
  <div class="row">{{ column_left }}
    {% if column_left and column_right %}
    {% set class = 'col-sm-6' %}
    {% elseif column_left or column_right %}
    {% set class = 'col-sm-9' %}
    {% else %}
    {% set class = 'col-sm-12' %}
    {% endif %}
    <div id="content" class="{{ class }}">
      {% if j3.settings.get('pageTitlePosition') == 'default' %}
        <h1 class="title page-title">{{ heading_title }}</h1>
      {% endif %}
      {{ content_top }}
      <p>{{ text_description }}</p>
      <form class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-code">{{ entry_code }}</label>
          <div class="col-sm-10">
            <textarea cols="40" rows="5" placeholder="{{ entry_code }}" id="input-code" class="form-control">{{ code }}</textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-generator"><span data-toggle="tooltip" title="{{ help_generator }}">{{ entry_generator }}</span></label>
          <div class="col-sm-10">
            <input type="text" name="product" value="" placeholder="{{ entry_generator }}" id="input-generator" class="form-control" />
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-link">{{ entry_link }}</label>
          <div class="col-sm-10">
            <textarea name="link" cols="40" rows="5" placeholder="{{ entry_link }}" id="input-link" class="form-control"></textarea>
          </div>
        </div>
      </form>
      <div class="buttons clearfix">
        <div class="pull-right"><a href="{{ continue }}" class="btn btn-primary">{{ button_continue }}</a></div>
      </div>
      {{ content_bottom }}</div>
    {{ column_right }}</div>
</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',
			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 }}
