{% extends 'layout.html' %}

{% block title %} {{ __('FLIT SHOP') }} {% endblock %}

{% block head %}
<style>
.ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  max-height: 60px;
}
</style>

<script>

</script>
{% endblock %}

{% block content %}

<div class="container" width="100%">
  {% if products.length == 0 %}
  <div style="text-align: center; margin: 150px;">
    <h1><i class="fa fa-fw fa-warning"></i></h1>
    <h1>{{ __('This item is not yet registered.') }}</h1>
  </div>
  {% endif %}

  {% for product in products %}
  {% if loop.index == 0 || loop.index%4 == 0 %}
  <div class="row"><!-- PRODUCT -->
  {% endif %}
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail">
        <a href="/product/{{ product.id }}"><img class="img-rounded" src="{% if product.thumbnail %}{{ product.thumbnail }}{% else %}http://lorempixel.com/500/500{% endif %}">
        <div class="caption text-left">
          <h3>{{ product.name }}</a> <span class="badge badge-info pull-right">{{ sails.config.project.currency.symbol }}{{ product.price|currency }}</span></h3>
          <p class="ellipsis">{{ product.description }}</p>
          <p>
            <input type="text" style="width: 20px;" value="1" /> 개
            <button data-id="{{ product.id }}" data-role="add" class="btn btn-default">{{ __('Add to Cart') }}</button>
            <button data-id="{{ product.id }}" data-role="buy" class="btn btn-primary">{{ __('purchase') }}</button>
          </p>
        </div>
      </div>
    </div>
  {% if loop.index == 0 || loop.index%4 == 0 || loop.last %}
  </div><!-- PRODUCT -->
  {% endif %}
  {% endfor %}
</div><!-- /.container -->

<script type="text/javascript">
$(document).ready(function () {
  var $add = $('button[data-role="add"]');
  var $buy = $('button[data-role="buy"]');

  $add.on('click', AddToCart);
  $buy.on('click', AddToCart);

  function AddToCart () {
    var product_id = $(this).data('id');
    var quantity = $(this).parent().find('input').val();
    var loc = '/';

    if ( $(this).data('role') === 'buy' ) {
      loc = '/cart';
    }

    $.ajax({
      type: 'GET',
      url: '/cart/add/' + product_id + '?quantity=' + quantity,
      success: function (data, status) {
        window.location = loc;
        return;
      },
      error: function (error) {
        console.log(error);
        return;
      }
    });
  }
});
</script>
{% endblock %};