@extends('layouts.'.env('THEME'))

@section('style')
<style>
.top-feature {
    background: #33443c;
    background-image: url("/uploads/brand/bg-gradient.jpg");
    background-position: bottom;
    background-repeat: repeat-x;
}

.article-header {

}
.article-content {
    padding-bottom: 2rem;
}
.article-content > img {
    width: 100%;
}

</style>
@endsection

@section('content')

<div class="container-fluid darken top-feature" style="overflow: hidden;">
    <div class="row py-5">
        <div class="col-12 text-center">
            <h1 class="px-2" style="display: inline-block; margin-top: 0px;">
                {{ $article_type }}
            </h1>
            <div class="row justify-content-center">
                <div class="col-lg-4 col-md-6 col-sm-7 col-10">
                <h2 style="font-size: 1.5rem; font-weight: normal;">
                    {{ $article_type_tagline }}
                </h2>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container" id="main-container">


    <div class="row article-header mt-5">
        <div class="col-lg-10 col-md-9 col-12">
            <h2>{{ $article->title }}</h2>
        </div>
        <div class="col-lg-2 col-md-3 col-12">
            <i class="fa fa-calendar mr-1" aria-hidden="true"></i>
            <span class="badge badge-secondary">
                {{ \Carbon\Carbon::parse($article->release_at)->format('D jS M Y') }}
            </span>
        </div>
    </div>

    <div class="pagebreak"></div>

    <div class="row mt-2">
    @foreach($article->articleContents as $ac)
        <div class="{{$ac->divClass()}}">
            {!! $ac->display() !!}
        </div>
    @endforeach
    </div>

    <div class="row article-header my-1">
        <div class="col-12 text-left">
            <hr />
        </div>
    </div>

    @if($more->count() > 0)
    <div class="row article-header my-1">
        <div class="col-12 text-left">
            <h3>Recent articles</h3>
        </div>
    </div>

    <div class="row mt-2">
        @foreach($more as $a)
                <div class="col-xl-4 col-md-6 d-md-block col-12 {{ $cl }}">
            <div class="card">
                <div class="card-img" style="background-image: url('/uploads/articles/{!!$a->getImage()!!}');"></div>
                <div class="card-body">
                    <h5 class="card-title">{!! \Illuminate\Support\Str::limit($a->title, 68, $end='&hellip;')
                    !!}</h5>
                    <a href="/articles/{{urlencode($a->title)}}" class="btn btn-primary">
                        Read
                    </a>
                </div>
            </div>
        </div>
    @endforeach
    </div>
    @endif

    @if(auth()->user() && auth()->user()->isPermitted("director"))
    <div class="row mt-2">
        <div class="col-12">
            <a href="/article/{{$article->id}}/edit" class="btn btn-info">Edit this article</a>
        </div>
    </div>
    @endif
</div>

<div class="container-fluid light-bg mt-5 pt-5 pb-5" style="overflow: hidden;">
    <x-section_heading title="Ask us anything" subtitle="We're here for you." rowclass="mt-1"/>
     <x-contact />

</div>
@endsection