@extends('layouts.app')

@section('styles')
@include ('layouts.footer-style')
html {
	height: inherit;
}
@endsection

@section('content')

<div class="container">

	<div style="margin-top: 20px"></div>
	<div class="card">
		<h1 class="card-header">
			Genres
		</h1>
		<div class="card-body">
			<p class="card-text">
				Browse movies by genre. Each genre shows all movies that have been categorized.
			</p>
		</div>
	</div>
	<div style="margin-bottom: 20px"></div>

	<div class="text-center card">
		<div class="card-body">
		@foreach ($genres as $genre)
			@if ( "" != $genre->name )
				<a href="{{ route('cinema.genre', $genre->name) }}" class="btn btn-lg btn-primary mx-1 my-1">{{ $genre->name }} ({{ $genre->count }} Movies)</a>
			@endif
		@endforeach
		</div>
	</div>

</div>
@endsection

@section('footer')
	@include ('layouts.footer')
@endsection