@extends('layouts.app')

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

@section ('content')

<div class="text-center container">

<div class="container row" style="margin-top: 20px"></div>

<div class="card">
	<div class="card-header text-left">
	<h1>
		List of all Topics
	</h1>
	</div>
	<div class="card-body">
		<h3>
		<ul class="list-inline">
		@foreach ($letters as $letter)
			<li class="list-inline-item topics-list">
				<a href="#{{$letter->name}}" class="text-white">{{$letter->name}}</a>
			</li>
		@endforeach
		</ul>
		</h3>
		<p class="text-left card-text">
			<strong>Hint:</strong>
			<em>
				Here is a list <a href="{{ route('popular_topics') }}" alt="all topics"> sorted by popularity</a>.
			</em>
		</p>
	</div>
</div>

<div style="margin-bottom: 20px"></div>

<div class="card">
	<div class="card-body">
	@php ($curLetter = "")
	@foreach ($topics->get() as $topic)
		@if ( "" != $topic->name )
			@php ( $firstLetter = strtoupper(substr($topic->name, 0, 1)) )
			@if ( $curLetter != $firstLetter )
				<h3 id="{{$firstLetter}}">
					<a class="text-white" href="#{{$firstLetter}}">
						{{ $firstLetter }}
					</a>
				</h3>
				<hr>
			@endif
			@php ($curLetter = $firstLetter)
			<a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-primary mx-1 my-1">{{ ucwords($topic->name) }}</a>
		@endif
	@endforeach
	</div>
</div>

</div>
@endsection

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