@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-9 px-4">

                {{--        @include('home.photo-partial', ['tags' => $tags])--}}

                @include('home.blog-partial')

                @foreach($posts as $post)

                    <h2 class="mt-0!">{{$post->title}}</h2>

                    <div class="mt-3 pr-2" style="text-align: justify">
                            <x-markdown>
                                {{array_slice(explode("\r\n", $post->content), 0, 1)[0]}}
                            </x-markdown>
                    </div>

                    <div>
                        <a href="{{route('posts.show', $post)}}">Continue reading...</a>
                    </div>

                    <div class="text-secondary mt-3">
                        <div class="d-inline-flex flex-row gap-3">
                            <div>
                                <i class="bi bi-journal-text"></i> Blog Entry
                            </div>
                            <div>
                                <i class="bi bi-calendar-week"></i> {{$post->created_at->format('Y-m-d')}}
                            </div>
                            <div>
                                <i class="bi bi-tags-fill"></i>

                                @if(sizeof($post->tags) > 0)
                                    @foreach($post->tags as $tag)
                                        <a class="text-secondary" href="/">{{$tag->name}}</a>,
                                    @endforeach
                                @else
                                    <a class="text-secondary" href="/">No tags</a>
                                @endif
                            </div>
                        </div>

                        <div class="pt-3 pb-1">
                            <hr>
                        </div>
                    </div>
                @endforeach
            </div>

            @include('layouts.sidebar')
        </div>
    </div>

@endsection