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

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

        <!-- ====== start about ====== -->
        <section class="about-app style-5 pt-80 pb-80" style="background-color: rgb(235, 218, 240)">
            <div class="container">



                <div class="content">
                    <div class="row">
                        <div class="col-12 col-md-6 section-head">

                            <div class="section-head style-4 mb-40">
                                <small class="title_small">Lumino CMS Theme</small>
                                <h1 class="mb-20 h2" style="font-size: 30px;">{{$content->title}} </h1>
                                <a href="{{ $content->user->path }}">
                                    <img src="{{ $content->user->image }}" width="20" height="20" class="rounded-circle border img-fluid me-2 mb-20">{{ $content->user->name }}
                                </a>
                                <p>{{$content->short_description}}

                                </p>
                                <h5 class="lh-4">

                                </h5>

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











                        </div>
                        <div class="col-12 col-md-6 text-end">

                            <img src="{{$content->image}}" alt="" class="main-img rounded">


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




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



        @isset($content->screenshots)

            <section class="pt-50 pb-50">
                <div class="container">
                    <div class="row">
                        <div class="col-12">
                            <div class="section-head style-4 mb-60">
                                <h2 class="h3"> Screenshots </h2>
                            </div>
                        </div>


                        @foreach($content->screenshots as $screenshot)
                            <div class="col-12 col-md-6 col-lg-3 text-center">
                                <x-img src="{{$screenshot}}" sizes="500px" class="rounded img-fluid border mb-60"/>
                            </div>
                        @endforeach

                    </div>
                </div>
            </section>

        @endisset









    <!-- ====== start projects ====== -->
        <section class="projects style-6 p-0">
            <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> Lumino CMS </span> Templates</h2>
                        <p>We have an experienced team of production and inspection personnel to ensure quality.</p>
                    </div>

                    @php($otherContents = filterByContentType("Themes")->filter(function ($item) use ($content) { return $item->id != $content->id; }))

                    @if($otherContents->isNotEmpty())
                        <div class="row mb-5">

                            @foreach($otherContents->take(3) as $otherContent)

                                <div class="col-12 col-md-4 mb-3">
                                    <a href="{{ $otherContent->path }}">
                                        <div class="portfolio-card mb-50" style="background-color: rgba(235,218,240,0.38);">
                                            <div class="img">
                                                <img src="{{$otherContent->image}}" class="rounded-top" alt="">
                                            </div>
                                            <div class="info" style="padding:30px;">
                                                <h5 class="mb-2" style="color: #6c23d7">
                                                    {{$otherContent->title}}
                                                </h5>
                                                <img src="{{ $otherContent->user->image }}" width="20" height="20" class="rounded-circle border img-fluid me-2">{{ $otherContent->user->name }}
                                                <div class="text">
                                                    {{$otherContent->short_description}}
                                                </div>

                                            </div>
                                        </div>
                                    </a>

                                </div>


                            @endforeach

                        </div>
                    @endif


                </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