@extends('layouts.app_old')

@section('title')
    Blog
@endsection

@section('content')

    <div style="background-image: url(/css/images/blog.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;">
        <header class="masthead-noclip text-center text-white d-flex header-gray">
            <div class="container my-auto">
                <div class="row">
                    <div class="col-lg-10 mx-auto" style="font-weight: 100;">
                        <h1>
                            { Our Latest }
                        </h1>
                    </div>
                    <div class="col-lg-8 mx-auto grid-display">
                        <span class="text-faded">News and Articles</span>
                    </div>
                </div>
            </div>
        </header>
    </div>

    <div>
        <section class="text-center" style="padding: 2rem 0;">
            <div class="container" style="max-width: 1000px;">
                <div class="row" style="margin: 0px;">
                    <div class="col-md-9">
                        <div class="col-md-12 mob-connect-center mob-padding-lr-45" style="display: grid;">
                        <span class="mob-connect-text-center contents-description" style="margin-bottom: 20px; text-align: left;">
                            {{--<img src="{{ $content->image  }}" style="width: 300px; height: 300px; float: left; margin-right: 15px; object-fit: contain;">--}}
                            <h3 class="contents-title">{{ $content->title }}</h3>

                            <p id="articleContent">{{ $content->content }}</p>
                        </span>
                            <span class="mob-connect-text-center contents-description">

                        </span>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="blog-side-div">
                            <div class="blog-side-title">Recent Articles</div>
                            <ul>
                                @foreach($articles as $article)
                                    <li><a href="/blog/{{str_slug(strtolower($article->title), '-')}}">{{$article->title}}</a></li>
                                @endforeach
                            </ul>
                        </div>
                        <div class="blog-side-div">
                            <div class="blog-side-title">Archive</div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>


    <script>

        window.onload = function(){
            var text = document.getElementById('articleContent').innerText;
            document.getElementById("articleContent").innerHTML = text;
            //console.log(text);
        };
    </script>

@endsection