@extends('template.'.config('settings.template').'.content.master')
@section('content')

    <main class="single-project style-5">

        <!-- ====== start about ====== -->
        <section class="about-app style-5 pt-50" style="background-color: rgba(255,222,218,0.38)">
            <div class="container">

                <div class="section-head text-center style-4 mb-40">
                    <h1 class="mb-20 h3">{{$content->title}}</h1>
                </div>



                <div class="content text-center">

                    <div class="img-content pt-40 pb-70 border-bottom brd-gray overflow-hidden">
                        <div class="row justify-content-center">
                            <div class="col-lg-7">
                                <div class="img text-center">
                                    <img src="{{$content->image}}" alt="" class="main-img">
                                </div>
                                <div class="info mt-30">
                                    <h5 class="lh-4">
                                        {{$content->short_description}}
                                    </h5>




                                    <a href="" data-bs-toggle="modal" data-bs-target="#install-theme" class="btn rounded-pill bg-blue4 fw-bold text-white mt-50">
                                        <small>Install Theme </small>
                                    </a>



                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== end about ====== -->


        <!-- ====== start challenge ====== -->
        <div class="challenge section-padding style-5 overflow-hidden">
            <div class="container">
                <div class="row gx-5 mb-200">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class="h3"> Beschreibung </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="inf">
                            <div class="text color-888 mb-20" style="font-size: 20px;">
                                {!! $content->beschreibung !!}

                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, culpa dolore eaque et eveniet expedita in ipsa, iure labore quisquam recusandae reiciendis, repellendus sit! Accusantium aliquam iusto minima omnis voluptatem?
                                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aut debitis harum magnam molestias nisi nostrum nulla provident, quisquam velit. Cum dignissimos enim illum nemo neque nulla quaerat tempora voluptatum?
                            </div>

                        </div>
                    </div>
                </div>
                <div class="imgs mt-60 d-none">
                    <div class="row">
                        <div class="col-lg-4">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="https://picsum.photos/400/600" alt="">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="https://picsum.photos/400/600" alt="">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="https://picsum.photos/400/600" alt="">
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="https://picsum.photos/400/600" alt="">
                            </div>
                        </div>


                    </div>
                </div>
                <div class="row gx-5 mb-200">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class="h3"> Features </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="inf">

                            <div class="color-000 mt-50">
                                <div class="row">

                                    <div class="col-lg-6">
                                        <div class="d-flex mb-0 fw-bold">
                                            <div class="icon-20 d-inline-flex justify-content-center align-items-center rounded-circle overflow-hidden bg-blue4 text-white flex-shrink-0 me-3">
                                                <i class="bi bi-check"></i>
                                            </div>
                                            Feature 1
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="screenshots style-4 d-none ">
            <div class="screenshots-slider style-4">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/1.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/2.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/3.jpg" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/4.png" alt="">
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div class="img">
                                <img src="assets/img/screenshots/5.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <img src="assets/img/screenshots/hand.png" alt="" class="mob-hand">
        </div>
        <!-- ====== end screenshots  ====== -->



        <!-- ====== start projects ====== -->
        <section class="projects style-6 p-0 d-none">
            <div class="content section-padding rounded-0">
                <div class="container">
                    <div class="section-head text-center mb-60 style-4">
                        <h2 class="mb-20"> Other <span> Projects </span> </h2>
                        <p>We have an experienced team of production and inspection personnel to ensure quality.</p>
                    </div>
                    <div class="slider-3items slider-style-6">
                        <div class="swiper-container pb-0">
                            <div class="swiper-wrapper">


                                    <div class="swiper-slide">
                                        <div class="project-card style-6">
                                            <div class="img">
                                                <img src="" alt="">
                                            </div>
                                            <div class="info">
                                                <h3 class="title"><a href="page-single-project-5.html">dfasdfa sdfa</a></h3>
                                                <small class="color-blue6"><a href="#">SEO analysis</a></small>
                                                <div class="text">
                                                    Trust our top minds to eliminate workflow pain points, implement new
                                                    tech & app.
                                                </div>
                                                <div class="tags">
                                                    <span><a href="#">SEO Analysis</a></span>
                                                    <span><a href="#">Content Strategy</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>



                                <div class="swiper-slide">
                                    <div class="project-card style-6">
                                        <div class="img">
                                            <img src="" alt="">
                                        </div>
                                        <div class="info">
                                            <h3 class="title"><a href="page-single-project-5.html">dfasdfa sdfa</a></h3>
                                            <small class="color-blue6"><a href="#">SEO analysis</a></small>
                                            <div class="text">
                                                Trust our top minds to eliminate workflow pain points, implement new
                                                tech & app.
                                            </div>
                                            <div class="tags">
                                                <span><a href="#">SEO Analysis</a></span>
                                                <span><a href="#">Content Strategy</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                <div class="swiper-slide">
                                    <div class="project-card style-6">
                                        <div class="img">
                                            <img src="" alt="">
                                        </div>
                                        <div class="info">
                                            <h3 class="title"><a href="page-single-project-5.html">dfasdfa sdfa</a></h3>
                                            <small class="color-blue6"><a href="#">SEO analysis</a></small>
                                            <div class="text">
                                                Trust our top minds to eliminate workflow pain points, implement new
                                                tech & app.
                                            </div>
                                            <div class="tags">
                                                <span><a href="#">SEO Analysis</a></span>
                                                <span><a href="#">Content Strategy</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>



                                <div class="swiper-slide">
                                    <div class="project-card style-6">
                                        <div class="img">
                                            <img src="assets/img/projects/5.png" alt="">
                                        </div>
                                        <div class="info">
                                            <h3 class="title"><a href="#">e-Commerce Dashboard</a></h3>
                                            <small class="color-blue6"><a href="#">website design</a> & <a href="#">develoment</a></small>
                                            <div class="text">
                                                Trust our top minds to eliminate workflow pain points, implement new
                                                tech & app.
                                            </div>
                                            <div class="tags">
                                                <span><a href="#">WordPress</a></span>
                                                <span><a href="#">PHP</a></span>
                                                <span><a href="#">HTML/CSS</a></span>
                                                <span><a href="#">Figma</a></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- ====== arrows ====== -->
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                    </div>
                </div>
            </div>
        </section>
        <!-- ====== end projects ====== -->

    </main>


    <!-- Modal -->
    <div class="modal fade" id="install-theme" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="background-color: #f7fafc">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Install new Lumino Theme</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="formType" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-10 offset-1 mt-4">
                                <div class="form-group input-group-lg">
                                    <input type="text" class="form-control" readonly value="{{$content->repository}}" id="cweb-directory" >
                                    <label id="lweb-directory" for="cweb-directory" class="small mt-3 text-muted">Paste this Lumino Theme URL into your Lumino Theme Installation Dialog</label>
                                </div>


                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="row" id="how-to-install">
                            <div class="col-10 offset-1">
                                <br>
                                <hr class="mt-4 mb-4">
                                <br>
                            </div>
                            <div class="col-10 offset-1">
                                <h4>How to install a new Lumino Theme</h4>
                                <br>
                            </div>
                            <div class="col-2 offset-1 mb-3">
                                <div style="background-color: #5842bc; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                    1.
                                </div>
                            </div>
                            <div class="col-9 mt-2">
                                Log in to your Lumino Admin and navigate to Configutations -> Theme
                            </div>
                            <div class="col-2 offset-1 mb-3">
                                <div style="background-color: #5842bc; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                    2.
                                </div>
                            </div>
                            <div class="col-9 mt-2">
                                Stelle sicher, dass das Theme deine Lumino Version <span class="fw-bold" style="color: #6c23d7; font-size: 15px;">{{$content->lumino_versions}}</span> unterstützt.
                            </div>
                            <div class="col-2 offset-1 mb-3">
                                <div style="background-color: #5842bc; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                    3.
                                </div>
                            </div>
                            <div class="col-9 mt-2">
                                Kopiere die Installations URL von der Seite und fühe es in die obere Maske ein.
                            </div>
                            <div class="col-2 offset-1 mb-3">
                                <div style="background-color: #5842bc; height: 50px; width: 50px;  color: white" class="p-2 rounded-circle text-center fw-bold fs-5">
                                    4.
                                </div>
                            </div>
                            <div class="col-9 mt-2">
                                After Verification Theme can be installed
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>

@stop