@extends ('layouts.app')

@section ('styles')
html {
	height: inherit;
}
@endsection

@section ('content')

<div class="container">

	<div style="margin-top: 20px"></div>
	<div class="card">
		<h1 class="card-header">
			Popular Topics
		</h1>
		<div class="card-body">
			<p class="card-text">
				<strong>Hint:</strong> <em>You are looking at popular topics. If you are interested in the most popular articles instead, <a href="{{ route('popular') }}" alt="popular articles">click here instead</a>.</em>
			</p>
		</div>
	</div>
	<div style="margin-bottom: 20px"></div>

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

</div>
@endsection