@extends('layouts.app')

@section('styles')

@include ('layouts.footer-style')

@if ( 0 != $count )
	html {
		height: inherit;
	}
	.hn {
	  display: inline-block;
	  font-size: inherit;
	  height: 1em;
	  overflow: visible;
	  vertical-align: -.125em;
	  fill: #ff6600;
	}

	.rss-link > svg {
	  display: inline-block;
	  font-size: inherit;
	  height: 1em;
	  overflow: visible;
	  vertical-align: -.125em;
	  fill: #f59436;
	}
@endif

.permalink:hover {
	text-decoration: none;
}

@endsection

@section('content')
	<div class="container">

	<div style="margin-top: 20px"></div>
	<div class="card">
	@if ( "search" == Request::route()->getName() )
		<h1 class="card-header">
			Search for <strong>"{{ Request::input("q") }}"</strong>
			@if ( "1" != $articles->currentPage() )
				(Page {{ $articles->currentPage() }})
			@endif
		</h1>
		<div class="card-body">
			<p class="card-text">
				You searched for <strong>"{{ Request::input("q") }}"</strong>. We found {{ $count }} matches.
			</p>
			@include("search")
		</div>
	@elseif ( "topic" == Request::route()->getName() )
		<h1 class="card-header">
			Topic: <strong>{{ Request::route()->parameters()["topic"] }}</strong>
			@if ( "1" != $articles->currentPage() )
				(Page {{ $articles->currentPage() }})
			@endif
		</h1>
		<div class="card-body">
			<p class="card-text">
				You are looking at all articles with the topic <strong>"{{ Request::route()->parameters()["topic"] }}"</strong>. We found {{ $count }} matches.
			<br>
			<br>
			<strong>Hint:</strong>
			<em>To view all topics, <a href="{{ route('topic_index') }}" title="all topics">click here</a>. Too see the most popular topics, <a href="{{ route('popular_topics') }}" title="popular topics">click here instead</a>.</em>
			</p>
		</div>
	@elseif ( "random" ==  Request::route()->getName() )
		<h1 class="card-header">
			{{ ucwords(Request::route()->getName()) }} Articles
			@if ( "1" != $articles->currentPage() )
				(Page {{ $articles->currentPage() }})
			@endif
		</h1>
		<div class="card-body">
			<p class="card-text">
				Have a deep view into what people are curious about.
			</p>
		</div>
	@elseif ( "show" ==  Request::route()->getName() )
		<!-- single article. show nothing -->
	@else
		<h1 class="card-header">
			{{ ucwords(Request::route()->getName()) }} Articles
			@if ( "1" != $articles->currentPage() )
				(Page {{ $articles->currentPage() }})
			@endif
			<div class="float-right">
				<a class="rss-link" href="{{ route('feed_' . Request::route()->getName()) }}" title="RSS-Feed">
					{!! file_get_contents(public_path() . "/img/rss-square.svg") !!}
				</a>
			</div>
		</h1>
		@if ( "popular" == Request::route()->getName() )
			<div class="card-body">
				<p class="card-text">
					<strong>Hint:</strong>
					<em>You are looking at the most popular articles. If you are interested in </em><strong>popular topics</strong><em> instead, <a href="{{ route('popular_topics') }}" title="popular topics">click here</a>.</em>
				</p>
			</div>
		@elseif ( "new" == Request::route()->getName() )
			<div class="card-body">
				<p class="card-text">
					To stay up to date you can also follow on <a title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}" target="_blank">{!! file_get_contents(public_path() . "/img/mastodon.svg") !!} Mastodon</a>.
				</p>
			</div>
		@endif
		
	@endif
	</div>
	<div style="margin-bottom: 20px"></div>

	@foreach( $articles->all() as $article)
		<div class="card">
				<h1 class="card-header">
					<a style="color:inherit;" href="{{ $article->url }}" title="{{ $article->title }}">
						🔗 {{ $article->title }}
					</a>
@if ( "show" != Request::route()->getName() )
					<div class="float-right">
						<a class="permalink" href="{{ route('show', $article->id) }}" title="Permalink">🛈</a>
					</div>
@endif
				</h1>
			<div class="card-body">
				@if ( ! is_null($article->getCategories()) )
					@foreach ( $article->getCategories()->get() as $cat )
						<a class="badge badge-pill badge-primary" href="/topic/{{ $cat->name }}">
						🔗 {{ $cat->name }}
						</a>
					@endforeach
				@endif
				<p class="card-text">
				{!! $article->excerpt_html !!}
				</p>
				

				@if ( 0 != $article->comments )
				<div class="row">
					<div class="col">
						<h3 class="card-subtitle">Discussed on</h3>
						<ul class="list-unstyled">
						@foreach ( $article->where('id', $article->article_id)->first()->getDiscussions()->orderBy('posted_on', 'desc')->get() as $discussion )
						@if ( 0 != $discussion->comments )
							<li>
							<a class="card-links" href="{{ $discussion->source_url }}">
								@if ( "HN" == $discussion->source )
								{!! file_get_contents(public_path() . "/img/y-combinator.svg") !!}
								@endif
								 "{{ $discussion->title }}"
							</a>
							| {{ \App\Libraries\Helper::formatTimestamp($discussion->posted_on) }} | 
							<span class="badge badge-pill badge-secondary">{{ $discussion->upvotes }} Upvotes</span>
							<span class="badge badge-pill badge-secondary">{{ $discussion->comments }} Comments </span>
							</li>
						@endif
						@endforeach
						</ul>
					</div>
				</div>
				@endif
			</div>
		</div>

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

	{{ $articles->appends(Request::input())->links() }}

	</div>
@endsection

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