{% 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
			});
		});
    </script>

{% endblock %}

{% block sub_body %}
	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">{{product.title}}
			</h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<div class="row">
		<div class="col-lg-12">
			<h1 class="page-header">评论用户列表
				<a href="{{path('export_user', {id: product.id})}}" class="btn btn-success btn-sm"><i class="fa fa-paper-plane-o"></i>导出</a>
			</h1>
		</div>
		<!-- /.col-lg-12 -->
	</div>
	<!-- /.row -->
	<div class="row">
		<div class="col-lg-12">
			{% for flashMessage in app.session.flashbag.get('notice') %}
				<div class="alert alert-success">
					{{ flashMessage }}
				</div>
			{% endfor %}
			<div class="panel panel-default">
				<div class="panel-heading">
				</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 width="200">用户名</th>
									<th>email</th>
									<th>排名</th>
								</tr>
							</thead>
							<tbody>
								{% for row in product.users %}
								<tr class="{%if loop.index is odd %}odd{% else %}even{% endif %}">
									<td>{{row.id}}</td>
									<td>
										<a href="http://www.amazon.com/gp/pdp/profile/{{row.userId}}/ref=cm_cr_pr_pdp?ie=UTF8" target="_blank">{{row.name}}</a>
									</td>
									<th>
									{{row.email}}
									</th>
									<th>
										{{row.rank|raw}}
									</th>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
					<!-- /.table-responsive -->
				</div>
				<!-- /.panel-body -->
			</div>
			<!-- /.panel -->
		</div>
		<!-- /.col-lg-12 -->
	</div>
{% endblock sub_body %}