{% extends "AppBundle::layout.html.twig" %}

{% block javascripts %}

	{{parent()}}
	{% javascripts 
	"@AppBundle/Resources/public/components/datatables/media/js/jquery.dataTables.min.js" 
	"@AppBundle/Resources/public/components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js" 
	%}
	<script src="{{ asset_url }}" ></script>
	{% endjavascripts %}

    <script>
		$(document).ready(function () {
			$('#dataTables-example').DataTable({
				responsive: true,
				"order": [[ 1, 'desc' ]]
			});
		});
    </script>

{% endblock %}
{% block sub_body %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success">
	{{ flashMessage|raw }}
</div>
{% endfor %}
<div class="row">
	<div class="col-lg-12">
		<h1 class="page-header">Search Rank List</h1>
	</div>
	<!-- /.col-lg-12 -->
</div>
<!-- /.panel-heading -->
<div class="panel-body">
	<div class="dataTable_wrapper">
		<table class="table table-striped table-bordered table-hover" id="dataTables-example">
			<thead>
				<tr>
					<th>id</th>
					<th>ASIN</th>
					<th>关键词</th>
					<th>产品名称</th>
				</tr>
			</thead>
			<tbody>
			{% for product in products %}
			<tr class="{%if loop.index is odd %}odd{% else %}even{% endif %}">
				<td>
					{{product.id}} 
				</td>
				<td>
					<a href="http://www.amazon.com/dp/{{product.ASIN}}/" target="_blank">{{product.ASIN}}</a>
				</td>
				<td>
					<ul>
					{% for row in product.keywords %}
					<li>
					<a href="{{path('search_rank_draw', {id: product.id, keyId: row.id})}}">{{row.keyword}}</a>
						{% for rank in row.ranks %}
						{% if loop.index == loop.last %}
						(最新排名：{{rank.rank}})
						{% endif %}
						{% endfor %}
					</li>
					{% endfor %}
				</ul>
					
				</td>
				<td>
					{{product.title|raw}}
				</td>
			</tr>
			{% endfor %}
			</tbody>
		</table>
	</div>
	<!-- /.table-responsive -->
</div>

{% endblock %}