@extends('layouts.front')
@section('title')
    @lang('models/blogs.singular')  @lang('crud.details')
@endsection
@section('content')

    <!--== Start Page Title Area ==-->
    <section class="page-title-area" data-bg-img="{{ asset($blog->image) }}">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="page-title-content text-center">
                        <h2 class="title text-white">Blog Details</h2>
                        <div class="bread-crumbs"><a href="index.html">Home<span class="breadcrumb-sep">//</span></a><span class="active">Blog</span></div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--== End Page Title Area ==-->

    <!--== Start Blog Area Wrapper ==-->
    <section class="blog-details-area">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="blog-details-column">
                        <div class="post-details-content">
                            <div class="post-details-body">
                                <div class="thumb">
                                    <img class="w-100" src="{{ $blog->image }}" alt="Givest-HasTech">
                                </div>
                                <div class="content">
                                    <div class="meta">
                                        <a class="post-author" href="blog.html"><span class="icon"><img class="icon-img" src="{{ asset('front/assets/img/icons/admin1.png') }}" alt="Icon-Image"></span>Par: {{ $blog->user->name }}</a>
                                    </div>
                                    <h2 class="title">{{ $blog->name }}</h2>

                                    {{ $blog->description }}

                                </div>
                            </div>
                        </div>
                        <div class="sidebar-area">
                            <div class="widget">
                                <h3 class="widget-title">Search Here</h3>
                                <div class="separator-line">
                                    <img class="me-1" src="assets/img/shape/line-t2.png" alt="Image-Givest">
                                </div>
                                <div class="widget-search-box">
                                    <form action="#" method="post">
                                        <div class="form-input-item">
                                            <label for="search2" class="sr-only">Search Here</label>
                                            <input type="text" id="search2" placeholder="Search here">
                                            <button type="submit" class="btn-src">
                                                <i class="icofont-search-1"></i>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <div class="widget">
                                <h3 class="widget-title">Urgent Causes</h3>
                                <div class="separator-line">
                                    <img class="me-1" src="assets/img/shape/line-t2.png" alt="Image-Givest">
                                </div>
                                <div class="widget-causes-item">
                                    <div class="thumb">
                                        <img src="assets/img/causes/w1.jpg" alt="Givest-HasTech">
                                    </div>
                                    <div class="content">
                                        <h4 class="title"><a href="causes-details.html">Need School For Uganda Poor Children.</a></h4>
                                        <ul class="donate-info">
                                            <li class="info-item">
                                                <span class="info-title">Goal:</span>
                                                <span class="amount">$ 5,000</span>
                                            </li>
                                            <li class="info-item">
                                                <span class="info-title">Raised:</span>
                                                <span class="amount">$ 2,000</span>
                                            </li>
                                        </ul>
                                        <!-- Start Progress Item -->
                                        <div class="progress-item">
                                            <div class="progress-line">
                                                <div class="progress-bar-line" data-percent="75%"><span class="percent"></span></div>
                                            </div>
                                        </div>
                                        <form action="#">
                                            <div class="amount-info">
                                                <div class="donate-amount">$20</div>
                                                <div class="donate-amount">$35</div>
                                                <div class="donate-amount">$48</div>
                                                <div class="donate-amount me-0">$90</div>
                                                <div class="donate-amount donate-custom-amount">
                                                    <input class="form-control" type="text" placeholder="Custome Amount">
                                                </div>
                                            </div>
                                            <a class="btn-theme btn-gradient btn-slide" href="#"><span>Donate Now <img class="icon icon-img" src="assets/img/icons/arrow-line-right2.png" alt="Icon"></span></a>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--== End Blog Area Wrapper ==-->

@endsection