dumbo2/resources/views/film.blade.php

<x-app-layout>
    <x-slot name="header">
        <div class="float-right flex space-x-2">
            <a href="https://themoviedb.org/movie/{{ $tmdb->getId() }}"><img src="/img/tmdb.svg" class="max-h-7 w-8"></a>
            <a href="https://imdb.com/title/{{ $tmdb->getImdbId() }}"><img src="/img/IMDb_Logo_Square.svg" class="max-h-7"></a>
        </div>
        <h2 class="font-semibold text-xl text-burnt leading-tight">
            {{ $tmdb->getTitle() }}
        </h2>
        <div class="text-burnt italic mt-2 text-lg">{{ $tmdb->getTagline() }}</div>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 text-crayola" x-data="{ tab: 'fact' }">
             <!-- Session Status -->
            <x-auth-session-status class="mb-4 border border-burnt p-2 rounded-lg bg-coal mx-auto max-w-xs" :status="session('status')" />
            @if (!is_null($film->seen))
            <div id="gesehen" class="border border-burnt p-2 rounded-lg flex mb-6 bg-coal mx-auto max-w-xs sm:ml-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
                Gesehen am {{ \Carbon\Carbon::parse($film->seen)->format('d.m.Y') }}
            </div>
            @elseif (!is_null($film->rejected))
            <div id="gesehen" class="border border-burnt p-2 rounded-lg flex mb-6 bg-coal mx-auto max-w-xs sm:ml-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                  </svg>
                Abgelehnt am {{ \Carbon\Carbon::parse($film->rejected)->format('d.m.Y') }}
            </div>
            @elseif(!is_null(auth()->user()) && auth()->user()->isAdmin())
            <div class="flex content-start" x-data="{confseen: false, confdel: false, confnext: false}">
                @if(!$film->isNext())
                <div
                class="border p-2 rounded-lg flex mb-6 bg-coal max-w-xs mr-2 ml-2 sm:ml-0 cursor-pointer hover:text-coal border-burnt"
                :class="confnext ? 'bg-burnt text-coal hover:bg-crayola' : 'hover:bg-burnt'"
                @click="confnext ? location.href='/film/mark/{{ $film->id }}/next' : confnext = true"
                @click.outside="confnext = false"
            >
                <span x-text="confnext ? 'Als nächstes sehen?' : ''"></span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mx-1" viewBox="0 0 640 512" stroke="currentColor">
                    <path fill="currentColor" d="M592 0H48A48 48 0 0 0 0 48v320a48 48 0 0 0 48 48h240v32H112a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16H352v-32h240a48 48 0 0 0 48-48V48a48 48 0 0 0-48-48zm-16 352H64V64h512z"/>
                </svg>
            </div>
            @endif
            <div
                class="border p-2 rounded-lg flex mb-6 bg-coal max-w-xs mr-2  ml-2 sm:ml-0 cursor-pointer hover:text-coal border-burnt"
                :class="confseen ? 'bg-burnt text-coal hover:bg-crayola' : 'hover:bg-burnt'"
                @click="confseen ? location.href='/film/mark/{{ $film->id }}/seen' : confseen = true"
                @click.outside="confseen = false"
            >
                <span x-text="confseen ? 'Wirklich gesehen?' : ''"></span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                </svg>
            </div>
            <div
                class="border p-2 rounded-lg flex mb-6 bg-coal max-w-xs mr-2 cursor-pointer hover:text-coal border-burnt"
                :class="confdel ? 'bg-burnt text-coal hover:bg-crayola' : 'hover:bg-burnt'"
                @click="confdel ? location.href='/film/mark/{{ $film->id }}/deny' : confdel = true"
                @click.outside="confdel = false">
                <span x-text="confdel ? 'Wirklich ablehnen?' : ''"></span>
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                  </svg>
            </div>
            </div>
            @endif

            <img src="{{ $image->getUrl($tmdb->getPosterImage(), 'w342') }}" alt="{{ $tmdb->getTitle() }} Poster" class="rounded-lg mx-auto mb-6 lg:float-right lg:mx-0 lg:ml-6 shadow-md shadow-burnt">

            <div class="sm:rounded-lg bg-coal flex mb-6 px-4">
                <a class="p-6 hover:text-yelmax cursor-pointer" x-bind:class="tab == 'fact' ? 'border-b-2 border-yelmax' : ''" @@click="tab = 'fact'">Allgemein</a>
                <a class="p-6 hover:text-yelmax cursor-pointer" x-bind:class="tab == 'cast' ? 'border-b-2 border-yelmax' : ''" @@click="tab = 'cast'">Schauspieler</a>
                <a class="p-6 hover:text-yelmax cursor-pointer" x-bind:class="tab == 'vids' ? 'border-b-2 border-yelmax' : ''" @@click="tab = 'vids'">Trailer</a>
            </div>

            <div id="#allgemein" class="px-4 grid grid-cols-2 gap-2" x-show="tab == 'fact'" x-transition>
                <div class="font-bold">Vorgeschlagen von</div>
                <div class="flex"><img src="/avatar/{{$film->suggester->getAvatar() }}" class="max-h-7 rounded-lg mr-2"> {{ $film->suggester->name }}</div>

                <div class="font-bold">Originaltitel</div>
                <div>„{{ $tmdb->getOriginalTitle() }}“ ({{ $tmdb->getOriginalLanguage() }})</div>

                <div class="font-bold">Laufzeit</div>
                <div>{{ $tmdb->getRuntime() }} Minuten</div>

                <div class="font-bold">Erschienen</div>
                <div>{{ $tmdb->getReleaseDate()->format('d.m.Y') }} -
                    @foreach ($tmdb->getProductionCountries() as $co)
                    <abbr title="{{$co->getName()}}">{{$co->getIso31661()}}</abbr>
                    @endforeach
                </div>

                <div class="font-bold">Genre</div>
                <div class="flex flex-wrap space-x-1">
                    @foreach ($tmdb->getGenres() as $genre)
                        <div class="bg-coal rounded-lg p-1">{{ $genre->getName() }}</div>
                    @endforeach
                </div>

                <div class="font-bold">TMDB Bewertung</div>
                <div class="">{{ $tmdb->getVoteAverage() }} von 10</div>

                @if($film->getBewertung() > 0)
                <div class="font-bold">Dumbo Bewertung</div>
                <div class="">{{ number_format($film->getBewertung(), 2, '.', '')}} von 10</div>
                @endif

                <div class="font-bold">Flatrate Stream</div>
                <div class="flex flex-wrap space-x-1">
                    @forelse($tmdb->getWatchProviders()->filter(
                        function($key, $value) {
                            return $value->getIso31661() == 'DE' && count($value->getFlatrate()) > 0;
                        }
                    ) as $wp)
                    @foreach($wp->getFlatrate() as $p)
                        <img src="{{ $image->getUrl($p->getLogoPath(), 'w45') }}" title="{{ $p->getName() }}" class="rounded-lg max-h-8">
                    @endforeach
                    @empty
                        <div class="italic">Keine</div>
                    @endforelse
                </div>


                <div class="font-bold">Kaufen / Leihen</div>
                <div class="flex flex-wrap space-x-1">
                    @foreach($tmdb->getWatchProviders()->filter(
                        function($key, $value) {
                            return $value->getIso31661() == 'DE' && (count($value->getRent()) > 0 || count($value->getBuy()) > 0);
                        }
                    ) as $wp)
                        @foreach($wp->getRent() as $p)
                            <img src="{{ $image->getUrl($p->getLogoPath(), 'w45') }}" title="{{ $p->getName() }}" class="rounded-lg max-h-8">
                        @endforeach
                    @endforeach
                </div>

                <div class="col-span-2 font-bold">Handlung</div>
                <div class="col-span-2 font-serif border-l-4 border-burnt pl-6">{{ $tmdb->getOverview() }}</div>


            </div>

            <div id="#schauspieler" class="px-4 grid grid-cols-4 gap-2" x-show="tab == 'cast'" x-transition>
                @foreach($tmdb->getCredits()->getCast() as $role)
                    @if ($loop->index > 11)
                        @break
                    @endif
                    <div class="pb-2">
                        @if ($role->getProfileImage() != "")
                        <img src="{{ $image->getUrl($role->getProfileImage() , "w185") }}" class="rounded-lg mb-1">
                        @else
                        <img src="/img/no-portrait.png" class="rounded-lg mb-1">
                        @endif
                        <div class="font-bold">{{ $role->getName() }}</div>
                        <div class="text-burnt">{{ $role->getCharacter() }}</div>
                    </div>
                @endforeach
            </div>

            <div id="trailer" class="px-4" x-show="tab == 'vids'" x-transition>
                @foreach ($tmdb->getVideos()->filter(
                    function($key, $value) {
                        return $value->getType() == "Trailer";
                    }
                ) as $vid)
                    <div class="font-bold">{{ $vid->getName() }}</div>
                    <div class="relative overflow-hidden w-full sm:w-[calc(100%-384px)] after:block after:pt-[56.25%]">
                    <iframe class="absolute top-0 left-0 w-full h-full" src="//www.youtube.com/embed/{{ $vid->getKey() }}" frameborder="0" allowfullscreen></iframe>
                    </div>
                @endforeach
            </div>
        </div>
    </div>

    @php
        $votes = $film->votes()->count();
        if(!is_null(auth()->user()))
            $uvote = $film->votes()->where('user', auth()->id())->first();
    @endphp
    @if( $votes > 0 || (is_null($film->seen) && is_null($film->rejected)))
    <div class="py-6 " id="voting">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 text-crayola ">
            <h2 class="font-semibold text-xl text-crayola leading-tight sm:rounded-lg bg-coal mb-6 p-4">
                Abstimmung
            </h2>

            @if($votes > 0)
            <div class="px-2">
                <p>
                    Insgesamt haben <b>{{ $votes }}</b> Personen abgestimmt.
                    <b>{{ $film->votes->where('vote', 1)->count() }}</b> waren <i>dafür</i>.
                    @if(!is_null(auth()->user()))
                    Du hast {!! is_null($uvote) ? '<i>nicht</i> ab' : ($uvote->vote == 0 ? '<i>nicht dafür</i> ' : '<i>dafür</i> ') !!}gestimmt.
                    @endif
                </p>
                <div class="grid grid-cols-2 gap-2">
                    <div class="text-burnt">Dafür</div>
                    <div class="text-burnt">Nicht dafür</div>

                    <div class="flex flex-col sm:flex-row flex-wrap">
                        @foreach($film->votes->reject( function ($v) { return $v->vote == 0; }) as $vote)
                        <div class="flex mb-1 mr-1 p-2 border border-burnt rounded-lg {{ $vote->voter->isActive() ? '' : 'italic border-coal text-field' }}"><img src="/avatar/{{$vote->voter->getAvatar() }}" class="max-h-6 rounded-lg mr-1"> {{ $vote->voter->name }}</div>
                        @endforeach
                    </div>

                    <div class="flex flex-col sm:flex-row flex-wrap">
                        @foreach($film->votes->reject( function ($v) { return $v->vote == 1; }) as $vote)
                        <div class="flex mb-1 mr-1 p-2 border border-burnt rounded-lg {{ $vote->voter->isActive() ? '' : 'italic border-coal text-field' }}"><img src="/avatar/{{$vote->voter->getAvatar() }}" class="max-h-6 rounded-lg mr-1"> {{ $vote->voter->name }}</div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif
            @if(is_null($film->seen) && is_null($film->rejected) && !is_null(auth()->user()))
                <div class="py-6">
                    <div class="flex mx-auto w-80">
                        <a href="/film/vote/{{ $film->id }}/1" class="flex rounded-l-lg border-2 border-r-0 border-burnt p-4 w-40">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" />
                                <path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm9.707 5.707a1 1 0 00-1.414-1.414L9 12.586l-1.293-1.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                            </svg>
                            Dafür
                        </a>
                        <a href="/film/vote/{{ $film->id }}/0"  class="flex rounded-r-lg border-2 border-l-1 border-burnt p-4 w-40">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
                                <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
                            </svg>
                            Nicht dafür
                        </a>
                    </div>
                </div>
            @endif
        </div>
    </div>
    @endif

    <div class="py-6 ">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-crayola">
            <h2 class="font-semibold text-xl text-crayola leading-tight  sm:rounded-lg bg-coal mb-6 p-4">
                Kommentare
            </h2>

            <div class="px-2">
            @if (is_null(auth()->user()))
                <p>Melde Dich an, um diesen Film zu kommentieren.</p>
            @else
                <div>
                    <img src="/avatar/{{ auth()->user()->getAvatar() }}" alt="User Avatar" class="rounded-lg w-16 float-left mr-2">
                    <div class="">
                        <h4 class="font-semibold">Neuer Kommentar</h4>
                        <div class="flex" x-data="{ stars: 0 }">
                            <input type="hidden" name="vote" id="vote" x-bind:value="stars">
                            <p @@click="stars = 0">Bewerten: </p>
                            <div @@click="stars = 1">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 1 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 2 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 3">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 3 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 4">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 4 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 5">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 5 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 6">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 6 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 7">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 7 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 8">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 8 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 9">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 9 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                            <div @@click="stars = 10">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 10 ? 'text-burnt' : ''">
                                    <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                  </svg>
                            </div>
                        </div>
                        <textarea class="block w-[calc(100%-4.5rem)] my-1 rounded-lg border-1 border-field bg-coal"></textarea>
                        <x-button class="ml-[4.5rem]">Absenden</x-button>
                    </div>
                </div>
            @endif
            @foreach ($film->comments()->orderBy('created_at', 'DESC')->get() as $comment)
                <div class="clear-left my-2 min-h-[4rem]" x-data="{edit: false}">
                    <img src="/avatar/{{ $comment->author->getAvatar() }}" alt="{{ $comment->author->name }} Avatar" class="rounded-lg w-16 float-left mr-2">
                    <h4 class="font-bold">
                        {{ $comment->author->name }}
                        <span class="text-sm font-light">
                            {{ \Carbon\Carbon::parse($comment->created_at)->format('d.m.Y H:i') }}
                            @if ($comment->updated_at != $comment->created_at)
                                &mdash; Zuletzt bearbeitet: {{ \Carbon\Carbon::parse($comment->updated_at)->format('d.m.Y H:i') }}
                            @endif
                        </span>
                    </h4>
                    @if($comment->evaluation > 0)
                    <div class="flex" title="{{ $comment->evaluation }}" x-show="!edit">
                        @for ($i = 0; $i < $comment->evaluation; $i++)
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-burnt" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                        @endfor
                    <span>({{$comment->evaluation}})</span>
                    </div>
                    @endif
                    @if(!is_null(auth()->user()) && auth()->user()->id == $comment->author->id)
                        <button class="text-yelmax float-right" @@click="edit = !edit" x-text="edit ? 'Abbrechen' : 'Bearbeiten'"></button>
                        <p x-show="!edit" x-transition>{{ $comment->body }}</p>
                        <div x-show="edit" x-transition>
                            @if($comment->evaluation > 0)
                            <div class="flex" x-data="{ stars: {{ $comment->evaluation }} }">
                                <input type="hidden" name="vote" id="vote" x-bind:value="stars">
                                <p @@click="stars = 0">Bewerten: </p>
                                <div @@click="stars = 1">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 1 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 2">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 2 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 3">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 3 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 4">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 4 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 5">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 5 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 6">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 6 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 7">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 7 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 8">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 8 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 9">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 9 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                                <div @@click="stars = 10">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" x-bind:class="stars >= 10 ? 'text-burnt' : ''">
                                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                                      </svg>
                                </div>
                            </div>
                            @endif
                            <textarea class="block w-[calc(100%-4.5rem)] my-1 rounded-lg border-1 border-field bg-coal">{{ $comment->body }}</textarea>
                            <x-button class="ml-[4.5rem]">Speichern</x-button>
                        </div>
                    @else
                        <p>{{ $comment->body }}</p>
                    @endif

                </div>
            @endforeach
            </div>
        </div>
    </div>
</x-app-layout>