{% extends "AppBundle::layout.html.twig" %}
{% block body%}
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-12">
			<div class="row">
				<div class="col-md-4">
					<a href="{{path("app_genre_index")}}" class="btn  btn-lg btn-warning btn-block"><i class="material-icons" style="font-size: 30px;">refresh</i> Refresh</a>
				</div>
				<div class="col-md-4">
					<a class="btn btn btn-lg btn-yellow btn-block"><i class="material-icons" style="font-size: 30px;">label</i> {{genres|length}} genres</a>
				</div>
				<div class="col-md-4">
					<a href="{{path("app_genre_add")}}" class="btn btn-rose btn-lg pull-right add-button btn-block" title=""><i class="material-icons" style="font-size: 30px;">add_box</i> NEW GENRE </a>
				</div>
			</div>
				<div class="row">
					{% for genre in genres %}

						<div class="col-md-4">
							<div class="card">
								<div class="card-content" style="text-align: left;height: 209px;padding: 0px;background: black;border-top-left-radius: 2px;border-top-right-radius: 2px;">
									<i class="material-icons" style="font-size: 64px;color: white;">inbox</i>
									<br>
									<span class="label-lang">{{genre.title}}</span>
								</div>
								<div class="card-footer" style="    text-align: center;">
									<a href="{{path("app_genre_edit",{"id":genre.id})}}" rel="tooltip" data-placement="left" class=" btn btn-primary btn-xs btn-round" data-original-title="Edit">
										<i class="material-icons">edit</i>
									</a>
									<a href="{{path("app_genre_delete",{"id":genre.id})}}" rel="tooltip" data-placement="left" class=" btn btn-danger btn-xs btn-round" data-original-title="Delete">
										<i class="material-icons">delete</i>
									</a>
									<a href="{{path("app_genre_up",{"id":genre.id})}}" rel="tooltip" data-placement="left" class=" btn btn-info btn-xs btn-round" data-original-title="Up">
										<i class="material-icons">keyboard_arrow_up</i>
									</a>
									<a href="{{path("app_genre_down",{"id":genre.id})}}" rel="tooltip" data-placement="left" class=" btn btn-info btn-xs btn-round" data-original-title="Down">
										<i class="material-icons">keyboard_arrow_down</i>
									</a>
								</div>
							</div>
						</div>
					{% else %}
						<div class="col-md-12">
							<div class="card">
								<div class="card-content">
									<br>
									<br>
									<center><img src="{{asset("img/bg_empty.png")}}"  style="width: auto !important;" =""></center>
									<br>
									<br>
								</div>
							</div>
						</div>
					{% endfor %}
				</div>
				
			</div>
		</div>
		
	{% endblock%}