{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"> <a href="{{ link_overview }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a> </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="well">
      <div class="row">
        <div class="col-sm-12">
          <p>{{ text_description }}</p>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          <div class="pull-right">
            {% if saved_products %}
            <a id="button-upload" class="btn btn-primary"><i class="fa fa-cloud-upload fa-lg"></i> {{ button_upload }}</a>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
    <table class="table table-bordered table-hover">
      <thead>
        <tr>
          <th>{{ column_name }}</th>
          <th>{{ column_model }}</th>
          <th>{{ column_sku }}</th>
          <th>{{ column_amazon_sku }}</th>
          <th class="text-center">{{ column_action }}</th>
        </tr>
      </thead>
      <tbody>
        {% if saved_products %}
        {% for saved_product in saved_products %}
        <tr>
          <td class="text-left">{{ saved_product.product_name }}</td>
          <td class="text-left">{{ saved_product.product_model }}</td>
          <td class="text-left">{{ saved_product.var }}</td>
          <td class="text-left">{{ saved_product.amazon_sku }}</td>
          <td class="text-right">
            <a class="btn btn-primary" href="{{ saved_product.edit_link }}" data-toggle="tooltip" data-original-title="{{ button_edit }}"><i class="fa fa-pencil"></i></a>
            <a class="btn btn-danger" onclick="removeSaved('{{ saved_product.product_id }}', '{{ saved_product.var }}', this)" data-toggle="tooltip" data-original-title="{{ button_remove }}"><i class="fa fa-times-circle"></i></a>
          </td>
        </tr>
        {% endfor %}
        {% else %}
        <tr>
          <td colspan="5" class="text-center">{{ text_no_results }}</td>
        </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
</div>
<script type="text/javascript">
  function removeSaved(id, option_var, button) {
    if (!confirm("{{ text_delete_confirm }}")) {
      return;
    }
    $.ajax({
      url: '{{ delete_saved }}',
      type: 'get',
      data: 'product_id=' + id + '&var=' + option_var,
      beforeSend: function () {
        $(button).empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
      },
      success: function () {
        window.location.href = window.location.href;
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  }

  $('#button-upload').bind('click', function(e) {
    e.preventDefault();

    $.ajax({
      url: '{{ upload_saved }}',
      dataType: 'json',
      beforeSend: function () {
        $('#button-upload').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
      },
      complete: function () {
        $('#button-upload').empty().html('<i class="fa fa-cloud-upload fa-lg"></i> {{ button_upload }}').removeAttr('disabled');
      },
      success: function (data) {
        if (data['status'] == 'ok') {
          alert('{{ text_uploaded_alert }}');
        } else if (data['error_message'] !== undefined) {
          alert(data['error_message']);
          return;
        } else {
          alert('Unknown error.');
          return;
        }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  });
</script>
{{ footer }}
