{% extends "AppBundle::layout.html.twig" %}
{% block body%}
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12" style=" height: auto; text-align:center;background-image:url({{asset(user.image)}});background-position: center;background-size: 100%;text-align: center;">
				<img src="{{asset(user.image)}}" alt="" style="border-radius:300px;margin:10px;height:100px;width:100px;border: 5px solid rgb(255, 247, 247);">
				<h3 style=" color: white; font-weight: bold">{{user.name}}</h3>
			</div>
			<div  class="col-md-12" style="border:1px solid #ccc;height:70px;background:white">
				<div class="row">
					<div  class="col-md-3" style="border-right:1px solid #ccc;height:70px;background:white">
						<a href="{{path("user_user_edit",{"id":user.id})}}" style="color:black;font-size:20px;line-height: 70px;font-weight: bold;">Edit infos</a>
					</div>
					<div  class="col-md-3" style="border-right:1px solid #ccc;height:70px;background:white">
						<a href="{{path("user_user_followings",{"id":user.id})}}" style="color:black;font-size:20px;line-height: 70px;font-weight: bold;">{{user.users|length}} Following </a>
					</div>
					<div  class="col-md-3" style="border-right:1px solid #ccc;height:70px;background:white">
						<a href="{{path("user_user_followers",{"id":user.id})}}" style="color:black;font-size:20px;line-height: 70px;font-weight: bold;">{{user.followers|length}} Followers </a>
					</div>
					<div  class="col-md-3" style="height:70px;background:white">
						<a href="{{path("user_user_packs",{"id":user.id})}}" style="color:black;font-size:20px;line-height: 70px;font-weight: bold;">{{user.packs|length}} Packs </a>
					</div>
				</div>
			</div>
			<div  class="col-md-12" >
{% for pack in pagination %}
					<div class="col-md-6">
						<div class="card">
							<div class="card-content">
								<div class="pack-item">
									<div class="pack-header">
										<div class="pack-item-image"><img src="{{asset(pack.image.link)}}"></div>
										<div class="pack-item-title"><p>{{pack.name}} - {{pack.sizes}}</p></div>
										<div class="pack-body">
											{% set index = 0 %}
											{% for sticker in pack.stickers %}
												{% if index < 10 %}
													<div class="pack-item-sticker"><img src="{{asset(sticker.media.link)}}"></div>
												{% endif %}
												{% set index = index + 1 %}
											{% endfor %}
										</div>
									</div>
					
								</div>
								
								<img src="" style="width:100%; height:auto;    border-radius: 5px;" >
								<br>
							</div>
							<div class="card-footer" style="    text-align: left;">
								<a href="{{path("app_pack_edit",{"id":pack.id})}}" rel="tooltip" data-placement="bottom" class=" btn btn-primary btn-xs btn-round" data-original-title="Edit">
									<i class="material-icons">edit</i>
								</a>
								<a href="{{path("app_pack_stickers",{"id":pack.id})}}" rel="tooltip" data-placement="bottom" class=" btn btn-primary btn-xs btn-round" data-original-title="Edit Stickers">
									<i class="material-icons">list</i>
								</a>
								<a href="{{path("app_pack_delete",{"id":pack.id})}}" rel="tooltip" data-placement="bottom" class=" btn btn-danger btn-xs btn-round" data-original-title="Delete">
									<i class="material-icons">delete</i>
								</a>
								<div class="price">
									<div class="wallpaper-logo" >
										{% if pack.user.image == "" %}
											{{pack.user.name}}
										{% else %}
											<img src="{{pack.user.image}}" class="avatar-img" alt="">
										{% endif %}
										<span>{{pack.user.name}}<br>{{pack.created|ago}}</span>
									</div>
								</div>
							</div>

						</div>
					</div>
				{% else %}
					<div class="col-md-12">
						<div class="card"  style="text-align: center;" >
							<br>
							<br>
							<img src="{{asset("img/bg_empty.png")}}"  style="width: auto !important;" ="">
							<br>
							<br>
						</div>
					</div>
				{% endfor %}
				
			</div>
			<div class=" pull-right">
				{{ knp_pagination_render(pagination) }}
			</div>
			</div>
		</div>
	</div>
{% endblock%}