{{ header }}
<div id="container" class="container j-container">
  <ul class="breadcrumb">
    {% for breadcrumb in breadcrumbs %}
      <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ breadcrumb.href }}" itemprop="url"><span itemprop="title">{{ breadcrumb.text }}</span></a></li>
    {% endfor %}
  </ul>
  <div class="row">{{ column_left }}{{ column_right }}
    {% 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 }}">{{ content_top }}
      <h2 class="secondary-title">{{ heading_title }}</h2>
      <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">{{ button_continue }}</a></div>
      </div>
      {{ content_bottom }}</div>
  </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) + '',
        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 }}