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

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

        <!-- ====== start about ====== -->
        <section class="about-app style-5">
            <div class="container">

                <div class="section-head text-center style-4 mb-40">
                    <h1 class="mb-20 h2">{{$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">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class=""> Beschreibung </h2>
                        </div>
                    </div>
                    <div class="col-lg-8">
                        <div class="inf">
                            <div class="text color-666 mb-20">
                                {{$content->beschreibung}}
                            </div>

                        </div>
                    </div>
                </div>
                <div class="imgs mt-60 mb-100 d-none">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="img img-cover rounded-3 overflow-hidden mb-30 mb-lg-0">
                                <img src="assets/img/single_project/ch_1.png" alt="">
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="img img-cover rounded-3 overflow-hidden">
                                <img src="assets/img/single_project/ch_2.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row gx-5">
                    <div class="col-lg-4">
                        <div class="section-head style-4">
                            <h2 class=""> 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="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