{# This partial template renders a table of all products, to be populated with rows via an AJAX request.
 # This extends a generic template for paginated tables.
 #
 # Note that this template contains a "skeleton" table with an empty table body, and then a block of Handlebars templates which are used
 # to render the table cells with the data from the AJAX request.
#}

{% extends "tables/table-paginated.html.twig" %}

{% block table %}
    <table id="{{table.id}}" class="tablesorter table table-bordered table-hover table-striped" data-sortlist="[[0, 1]]">
        <thead>
            <tr>
				<th class="sorter-metatext" data-column-name="title" data-column-template="#product-table-column-title" data-priority="1">{{translate("TITLE")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="description" data-column-template="#product-table-column-description" data-priority="1">{{translate("DESCRIPTION")}} <i class="fa fa-sort"></i></th>
				<th data-column-name="image" data-column-template="#product-table-column-image" data-priority="1" data-sorter="false" data-filter="false">{{translate("IMAGE")}}</th>
				<th class="sorter-metatext" data-column-name="price" data-column-template="#product-table-column-price" data-priority="1">{{translate("PRICE")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="sale_price" data-column-template="#product-table-column-sale_price" data-priority="1">{{translate("SALE_PRICE")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="currency" data-column-template="#product-table-column-currency" data-priority="1">{{translate("CURRENCY")}} <i class="fa fa-sort"></i></th>
				<th class="sorter-metatext" data-column-name="is_available" data-column-template="#product-table-column-is_available" data-priority="1">{{translate("IS_AVAILABLE")}} <i class="fa fa-sort"></i></th>
				<th data-column-name="tags" data-column-template="#product-table-column-tags" data-priority="1" data-sorter="false" data-filter="false">{{translate("PRODUCT_TAG", 2)}}</th>
				{% if 'product_category' in table.columns %}
                    <th class="sorter-metatext" data-column-name="product_category" data-column-template="#product-table-column-product_category" data-priority="1">{{translate('PRODUCT_CATEGORY')}} <i class="fa fa-sort"></i></th>
                {% endif %}
				{% if 'country' in table.columns %}
                    <th class="sorter-metatext" data-column-name="country" data-column-template="#product-table-column-country" data-priority="1">{{translate('COUNTRY')}} <i class="fa fa-sort"></i></th>
                {% endif %}
				{% if 'creator' in table.columns %}
                    <th class="sorter-metatext" data-column-name="creator" data-column-template="#product-table-column-creator" data-priority="1">{{translate('USER')}} <i class="fa fa-sort"></i></th>
                {% endif %}
				<th class="sorter-metanum" data-filter="false" data-column-name="created_at" data-column-template="#product-table-column-created-at" data-priority="1">{{translate('CREATED_AT')}} <i class="fa fa-sort"></i></th>
				<th data-column-name="actions" data-column-template="#product-table-column-actions" data-sorter="false" data-filter="false" data-priority="1">{{translate("ACTIONS")}}</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
{% endblock %}

{% block table_cell_templates %}
    {# This contains a series of <script> blocks, each of which is a client-side Handlebars template.
     # Note that these are NOT Twig templates, although the syntax is similar.  We wrap them in the `verbatim` tag,
     # so that Twig will output them directly into the DOM instead of trying to treat them like Twig templates.
     #
     # These templates require handlebars-helpers.js, moment.js
    #}
    {% verbatim %}
	<script id="product-table-column-title" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
			{{row.title}}
        </td>
    </script>
	<script id="product-table-column-description" type="text/x-handlebars-template">
        <td>
            {{row.description}}
        </td>
    </script>
	<script id="product-table-column-image" type="text/x-handlebars-template">
	<td valign="middle" align="center">
			{{#if row.product_images.[0].image }}
			<img src="product_images/img/{{row.product_images.[0].image}}"
	        {{ else }}
	        <img src="{{row.product_images.[0].image_url}}"
	        {{/if }}
			 width="100" />
	</td>
    </script>
	<script id="product-table-column-price" type="text/x-handlebars-template">
        <td>
            {{row.price}}
        </td>
    </script>
	<script id="product-table-column-sale_price" type="text/x-handlebars-template">
        <td>
            {{row.sale_price}}
        </td>
    </script>
	<script id="product-table-column-currency" type="text/x-handlebars-template">
        <td>
            {{row.currency}}
        </td>
    </script>
	<script id="product-table-column-is_available" type="text/x-handlebars-template">
        {{#if row.is_available }}
        <td>
            {% endverbatim %}{{translate("YES")}}{% verbatim %}
        </td>
        {{ else }}
        <td>
            {% endverbatim %}{{translate("NO")}}{% verbatim %}
        </td>
        {{/if }}
    </script>
	<script id="product-table-column-tags" type="text/x-handlebars-template">
		<td>
		<span class="select2 select2-container select2-container--default select2-container--disabled select2-container--focus" dir="ltr" data-select2-id="13" style="width: 100%;"><span class="selection"><span class="select2-selection select2-selection--multiple" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="-1" aria-disabled="true"><ul class="select2-selection__rendered">
		
		{{#each row.product_tags}}
		
		<li class="select2-selection__choice" title="({{id}}, {{name}})"><span class="select2-selection__choice__remove" role="presentation">×</span>({{id}}, {{name}})</li>
		{{/each}}
		
		
		
		<li class="select2-search select2-search--inline"><input class="select2-search__field" type="search" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" role="searchbox" aria-autocomplete="list" placeholder="" disabled="" style="width: 0.75em;"></li></ul></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
		
		
		
		
		
		
		
		
		</td>
    </script>		
	<script id="product-table-column-product_category" type="text/x-handlebars-template">
        <td data-text="{{row.product_category.name}}">
            	{{row.product_category.name}}
        </td>
    </script>
	<script id="product-table-column-country" type="text/x-handlebars-template">
        <td data-id="{{row.id}}">
				{{row.country.name}}
        </td>
    </script>
	<script id="product-table-column-creator" type="text/x-handlebars-template">
        <td data-text="{{row.creator.last_name}}">
            {{#if row.creator }}
                <strong>
                    <a href="{{site.uri.public}}/users/u/{{row.creator.user_name}}">{{row.creator.first_name}} {{row.creator.last_name}} ({{row.creator.user_name}})</a>
                </strong>
                <div class="js-copy-container">
                    <span class="js-copy-target">{{row.creator.email}}</span>
                    <button class="btn btn-xs uf-copy-trigger js-copy-trigger"><i class="fa fa-copy"></i></button>
                </div>
            {{ else }}
                <i>{% endverbatim %}{{translate("USER.DELETED")}}{% verbatim %}</i>
            {{/if }}
        </td>
    </script>
	<script id="product-table-column-created-at" type="text/x-handlebars-template">
        {{#if row.created_at }}
        <td data-num="{{dateFormat row.created_at format='x'}}">
            {{dateFormat row.created_at format="dddd"}}<br>{{dateFormat row.created_at format="MMM Do, YYYY h:mm a"}}
        </td>
        {{ else }}
        <td data-num="0">
            <i>{% endverbatim %}{{translate("UNKNOWN")}}{% verbatim %}</i>
        </td>
        {{/if }}
    </script>
		
    <script id="product-table-column-actions" type="text/x-handlebars-template">
        <td class="uf-table-fit-width">
            <div class="btn-group">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">{% endverbatim %}{{translate("ACTIONS")}}{% verbatim %}<span class="caret"></span></button>
                <ul class="dropdown-menu dropdown-menu-right-responsive" role="menu">
                    <li>
                        <a href="#" data-product_id="{{row.id}}" class="js-product-edit">
                        <i class="fas fa-edit"></i> {% endverbatim %}{{translate("PRODUCT.EDIT")}}{% verbatim %}
                        </a>
                    </li>
                    <li>
                        <a href="#" data-product_id="{{row.id}}" class="js-product-delete">
                        <i class="fas fa-trash-alt"></i> {% endverbatim %}{{translate("PRODUCT.DELETE")}}{% verbatim %}
                        </a>
                    </li>
                    <li>
                        <a href="#" data-product_id="{{row.id}}" class="js-product-clone">
                        <i class="fas fa-copy"></i> {% endverbatim %}{{translate("PRODUCT.CLONE")}}{% verbatim %}
                        </a>
                    </li>
                </ul>
            </div>
        </td>
    </script>
    {% endverbatim %}
{% endblock %}