@extends('layouts.app')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <!-- Hero -->
{{--        <div class="bg-image" style="background-image: url('{{asset($data->image)}}');">--}}
        <div class="bg-image" >
            <div class="bg-black-75">
                <div class="content content-top content-full text-center">
                    <h1 class="h1 font-w700 text-black mt-5 mb-3 invisible   rounded p-2 d-inline-block" data-toggle="appear">
                        {{$data->title}}
                    </h1><br>
                    <h2 class="h3 font-w400 text-black-75 mb-5 invisible  rounded p-2 d-inline-block" data-toggle="appear" data-timeout="400">
                        {{$data->sub_title}}</h2>
                    <p class="invisible" data-toggle="appear" data-timeout="400">
                        <a class="badge badge-pill badge-primary font-size-base px-3 py-2 mr-2 m-1" href="javascript:void(0)">
                            <i class="fa fa-user-circle mr-1"></i> {{trans('web.by')}} {{$data->by}}
                        </a>
                        <span class="badge badge-pill badge-primary font-size-base px-3 py-2 m-1">
                                    <i class="fa fa-clock mr-1"></i> {{$data->read_time}} read
                                </span>
                    </p>
                    <a href="{{asset($data->pdf)}}" type="button" data-toggle="appear" data-timeout="400" class="btn btn-rounded btn-danger invisible mr-1 mb-3">
                        <i class="fa fa-fw fa-download mr-1"></i> Download PDF
                    </a>
                </div>
            </div>
        </div>
        <!-- END Hero -->

        <!-- Page Content -->
        <div class="content content-full">
            <div class="row justify-content-center">
                <div class="col-sm-8 py-5">
                    <!-- Story -->
                    <!-- Magnific Popup (.js-gallery class is initialized in Helpers.magnific()) -->
                    <!-- For more info and examples you can check out http://dimsemenov.com/plugins/magnific-popup/ -->
                    <article class="js-gallery story">
                        {!! $data->body !!}
                    </article>
                    <!-- END Story -->

                </div>
            </div>
        </div>
        <!-- END Page Content -->
    </main>
    <!-- END Main Container -->
@endsection