{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right"> <a href="{{ cancel }}" 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">
    {% if bulk_linking_status %}
    <div class="alert alert-info">{{ text_load_listings }}</div>
    <div class="well">
      <div class="row">
        <div class="col-sm-12">
          {% if marketplace_processing %}
          <div class="pull-right">
            <a class="btn btn-warning" href="{{ cancel_report_link }}"><i class="fa fa-times fa-lg"></i> {{ button_cancel }}</a>
            <a class="btn btn-primary" disabled="disabled"><i class="fa fa-cog fa-lg fa-spin"></i> {{ text_loading }}</a>
          </div>
          {% else %}
          <div class="pull-right"> <a id="button-load-listings" class="btn btn-primary" href="{{ link_load_listings }}">{{ button_load }}</a> </div>
          {% endif %}
        </div>
      </div>
    </div>
    <form id="bulk-link-form" class="form-horizontal">
      <div id="text-market">
        {% if not marketplace_processing %}
        {% if unlinked_products %}
        <table class="table table-bordered table-hover">
          <thead>
          <tr>
            <th></th>
            <th class="text-center" colspan="4">{{ text_amazon }}</th>
            <th class="text-center" colspan="3">{{ text_local }}</th>
          </tr>
          <tr>
            <th class="text-center"><input type="checkbox" id="master-checkbox" value="1"/></th>
            <th class="text-left">{{ column_asin }}</th>
            <th class="text-left">{{ column_sku }}</th>
            <th class="text-center">{{ column_quantity }}</th>
            <th class="text-right">{{ column_price }}</th>
            <th class="text-left">{{ column_name }}</th>
            <th class="text-left">{{ column_sku }}</th>
            <th class="text-center">{{ column_quantity }}</th>
          </tr>
          </thead>
          <tbody>
          {% set row = 0 %}
          {% for product in unlinked_products %}
          {% set row = row + 1 %}
          {% if product.sku or product.quantity < 1 %}
          <tr class="warning">
            <td class="text-center"> - </td>
            {% else %}
          <tr class="success">
            <td class="text-center"><input type="checkbox" class="link-checkbox link-checkbox-market"/></td>
            {% endif %}

            <td class="text-left"><a href="{{ product.href_amazon }}" target="_blank">{{ product.asin }}</a></td>
            <td class="text-left">{{ product.amazon_sku }}</td>
            <td class="text-center">{{ product.amazon_quantity }}</td>
            <td class="text-right">{{ product.amazon_price }}</td>
            <td class="text-left"><a href="{{ product.href_product }}" target="_blank">{{ product.name }}</a>{% if product.combination is not empty %}<br />{{ product.combination }}{% endif %}</td>
            <td class="text-left">{{ product.sku }}</td>
            <td class="text-center">{{ product.quantity }}</td>
            <input type="hidden" name="link[{{ row }}][amazon_sku]" value="{{ product.amazon_sku }}"/>
            <input type="hidden" name="link[{{ row }}][product_id]" value="{{ product.product_id }}"/>
            <input type="hidden" name="link[{{ row }}][sku]" value="{{ product.var }}"/>
          </tr>
          {% endfor %}
          </tbody>
        </table>
        <div class="well">
          <div class="row">
            <div class="col-sm-12 text-right">
              <div class="pull-right"> <a id="link-button" class="btn btn-primary" data-toggle="tooltip" title="{{ button_link }}"><i class="fa fa-save"></i></a></div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-6 text-left">{{ pagination }}</div>
          <div class="col-sm-6 text-right">{{ results }}</div>
        </div>
        {% endif %}
        {% endif %}
      </div>
    </form>
    {% else %}
    <div class="warning">{{ error_bulk_link_permission }}</div>
    {% endif %}
  </div>
  <script type="text/javascript"><!--
  $('#button-load-listings').bind('click', function (e) {
    e.preventDefault();

    $.ajax({
      url: $(this).attr('href'),
      dataType: 'json',
      beforeSend: function () {
        $('#button-load-listings').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i> {{ text_loading }}').attr('disabled','disabled');
        $('.alert-danger, .alert-success').remove();
      },
      success: function (json) {
        if (json['status'] == 1) {
          $('.alert-info').after('<div class="alert alert-success alert-dismissible">' + json['message'] + '</div>');
        } else {
          $('.alert-info').after('<div class="alert alert-danger alert-dismissible">' + json['message'] + '</div>');
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      },
      complete: function() {
        $('#button-load-listings').empty().removeAttr('disabled').html('{{ button_load }}');
      }
    });

    return false;
  });

  $('#master-checkbox').click(function () {
    if ($(this).is(':checked')) {
      $('.link-checkbox-market').attr('checked', 'checked');
    } else {
      $('.link-checkbox-market').removeAttr('checked');
    }
  });

  $('#link-button').click(function (e) {
    e.preventDefault();

    $.ajax({
      url: '{{ link_do_listings }}',
      dataType: 'json',
      type: 'POST',
      data: $('.link-checkbox:checked').parent().siblings('input[type="hidden"]').serialize(),
      beforeSend: function() {
        $('#link-button').empty().attr('disabled', 'disabled').html('<i class="fa fa-cog fa-lg fa-spin"></i>');
      },
      success: function () {
        document.location.reload(true);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        $('#link-button').empty().removeAttr('disabled').html('<i class="fa fa-save"></i>');
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  });
  //--></script></div>
{{ footer }}
