@extends('layout/main')

@section('content')
    <section class="section">
        <div class="container">
            <div class="row mb-4 align-items-center">
                <div class="col-md-6" data-aos="fade-up">
                    <h2>{{ $portofolio->title }}</h2>
                    <p>{{ $portofolio->description }}</p>
                </div>
            </div>
        </div>

        <div class="site-section pb-0">
            <div class="container">
                <div class="row align-items-stretch">
                    <div class="col-md-8" data-aos="fade-up">
                        <img src="{{ asset('assets/img/portofolio/' . $portofolio->upload->filename) }}" alt="Image" class="img-fluid">
                    </div>
                <div class="col-md-3 ml-auto" data-aos="fade-up" data-aos-delay="100">
                    <div class="sticky-content">
                        <h3 class="h3">{{ $portofolio->title }}</h3>
                        <p class="mb-4">
                            <span class="text-muted">{{ $portofolio->category->name }}</span>
                        </p>

                        <div class="mb-5">
                            <p>{{ $portofolio->description }}</p>
                        </div>

                        <h4 class="h4 mb-3">Spesifikasi</h4>
                        <ul class="list-unstyled list-line mb-5">
                            <!-- <li>Design</li>
                            <li>HTML5/CSS3</li>
                            <li>CMS</li>
                            <li>Logo</li> -->
                            @foreach (json_decode($portofolio->flag) as $value)
                                <li>{{ $value }}</li>
                            @endforeach
                        </ul>

                        <p>
                            <a href="{{ $portofolio->url }}" class="readmore" target="_blank">Url</a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection