@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">
			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 </em><strong>popular articles</strong><em> instead, <a href="{{ route('popular') }}" alt="popular articles">click here instead</a>.</em>
			</p>
			<p class="card-text">
				<strong>Hint:</strong>
				<em>
					For a list of all topics please <a href="{{ route('topic_index') }}" alt="all topics">click here</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

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