@extends('template.'.config('settings.template').'.content.master')
@section('head')
    <title>{{$content->title}}</title>

    <meta name="product-id" content="{{$content->id}}">
@stop
@section('content')
    <div class="pt-3 pb-2 mb-5" style="background-color: {{$_primary_ci_color}}">
        <div class="container">


            <nav style="--bs-breadcrumb-divider: '›';" aria-label="breadcrumb">
                <ol class="breadcrumb text-decoration-none">
                    <li class="breadcrumb-item"><a href="{{url('/')}}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{url('/karriere')}}">Job</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{$content->title}}</li>
                </ol>
            </nav>
        </div>
    </div>

    <div class="container">

        <div class="row">
            <div class="col-12 col-lg-7">
                <div class="row">
                    <div class="col-12">
                        <h1 class="mt-3 mb-2 ">{{$content->title}}</h1>

                    </div>
                    <div class="col-12">
                        <div class="fw-bolder my-4">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias architecto assumenda dolor enim excepturi, fuga fugit iste labore, laborum magnam nemo neque odit optio porro quae quis reiciendis totam voluptates.
                        </div>
                    </div>

                    <div class="col-12 col-lg-9 mb-5">
                        <x-img src="{{ $content->image() }}" sizes="(max-width: 330px) 330px, (max-width: 540px) 540px, 720px," class="img-fluid card-img-top"/>
                        <br>
                    </div>


                    <div class="col-12 mb-5">
                        <h2 class="h3">Stellenbeschreibung</h2>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem dolorem ducimus molestiae molestias nisi, nulla officia officiis, quo sint ut voluptatum. Expedita maxime nihil nisi numquam perspiciatis rerum voluptate!
                        </p>
                    </div>

                    <div class="col-12 mb-5">
                        <h2 class="h3">Bewerberqualifikationen</h2>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem dolorem ducimus molestiae molestias nisi, nulla officia officiis, quo sint ut voluptatum. Expedita maxime nihil nisi numquam perspiciatis rerum voluptate!
                        </p>
                    </div>


                    <div class="col-12 mb-5">
                        <h2 class="h3">Wir als Arbeitgeber</h2>

                        <p>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem dolorem ducimus molestiae molestias nisi, nulla officia officiis, quo sint ut voluptatum. Expedita maxime nihil nisi numquam perspiciatis rerum voluptate!
                        </p>
                    </div>
                </div>









            </div>

            <div class="col-12 col-lg-4 offset-lg-1">

                <div class="card mb-5 position-sticky mt-4" style="top:5rem;">
                    <div class="card-header">
                        <h3 class="fs-5 fw-bold">Jetzt bewerben</h3>

                    </div>

                    <div class="card-body">

                        <form>
                            <div class="mb-4">
                                <label for="exampleInputEmail1" class="form-label">Name:</label>
                                <input type="name" name="name" class="form-control" id="name" aria-describedby="emailHelp" placeholder="Max Mustermann" autocomplete="on">
                            </div>

                            <div class="mb-4">
                                <label for="exampleInputEmail1" class="form-label">Telefonnummer:</label>
                                <input type="tel" name="tel" class="form-control" id="tel" aria-describedby="emailHelp" placeholder="0170 1234 56478" autocomplete="on">
                            </div>

                            <div class="mb-4">
                                <label for="exampleInputEmail1" class="form-label">E-Mail:</label>
                                <input type="name" name="email"class="form-control" id="email" aria-describedby="emailHelp" placeholder="beispiel@areya.de" autocomplete="on">
                            </div>


                            <div class="form-floating mb-4">
                                <textarea style="height: 80px;" class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
                                <label for="floatingTextarea">Nachricht</label>
                            </div>


                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-block">Bewerbung unverbindlich absenden
                                    <svg style="fill: currentColor;width: 17px;margin-left: 6px;margin-bottom: 4px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z"/></svg>
                                </button>

                            </div>


                        </form>
                    </div>

                </div>



            </div>

        </div>




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

        @if($otherContents->isNotEmpty())

            <div class="row mb-5">


                <div class="col-12">
                    <hr class="pb-5 mt-5">
                    <h2 class="mb-4 mt-5 h3">Weitere Stellenangebote</h2>
                </div>

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

                    <div class="col-12 col-md-6 col-lg-4 mb-3">

                        <a href="{{$otherContent->path}}" class="text-decoration-none">
                            <div class="card shadow-sm h-100">

                                <div class="card-body">
                                    <h3 class="h5 mb-2">
                                        {{$otherContent->title}}
                                    </h3>

                                    <div class="text-muted small my-3">
                                <span title="{{$otherContent->created_at}}">
                                    <svg style="fill: currentColor;width:15px;margin-bottom: 5px;margin-right: 3px;}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M112 0c8.8 0 16 7.2 16 16V64H320V16c0-8.8 7.2-16 16-16s16 7.2 16 16V64h32c35.3 0 64 28.7 64 64v32 32V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192 160 128C0 92.7 28.7 64 64 64H96V16c0-8.8 7.2-16 16-16zM416 192H32V448c0 17.7 14.3 32 32 32H384c17.7 0 32-14.3 32-32V192zM384 96H64c-17.7 0-32 14.3-32 32v32H416V128c0-17.7-14.3-32-32-32z"/></svg>
                                    {{ $otherContent->updated_at->diffForHumans() }}

                                </span>
                                    </div>
                                    {!! Str::limit($otherContent->title, 280) !!}
                                </div>


                            </div>
                        </a>

                    </div>

                @endforeach

            </div>

        @endif

    </div>


@stop