@extends('layouts.app')

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

@section ('content')

<div class="text-center container">

<div class="container row text-white text-lg">
	<ul class="list-inline">
	@foreach ($letters as $letter)
		<li class="list-inline-item">
		<a href="#{{$letter->name}}" class="text-white">{{$letter->name}}</a>
		</li>
	@endforeach
	</ul>
</div>

@php ($curLetter = "")
@foreach ($topics->get() as $topic)
	@if ( "" != $topic->name )
		@php ( $firstLetter = strtoupper(substr($topic->name, 0, 1)) )
		@if ( $curLetter != $firstLetter )
			<div class="container row">
				<h2 id="{{$firstLetter}}">
					<a class="text-white" href="#{{$firstLetter}}">
					{{ $firstLetter }}
					</a>
				</h2>
			</div>
			<hr>

			@php ($curLetter = $firstLetter)

		@endif
		<a href="{{ route('topic', $topic->name) }}" class="btn btn-lg btn-outline-primary">{{ ucwords($topic->name) }}</a>
	@endif
@endforeach

</div>
@endsection

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