@extends('layouts.default')

@section('content')
    @parent

    <section class="bg-white space-sm pb-4">
        <div class="container">
            <div class="row justify-content-between align-items-center">
                <div class="col-auto">
                    <h1 class="h2 text-truncate">{{ $informacia->titulok }}</h1>
                </div>
                <div class="col-auto">
                    <h4 class="h5 mr-2">
                        @if($informacia->odporucane)
                            <div>
                                <div class="badge badge-success text-uppercase">Odporúčané</div>
                            </div>
                        @endif
                    </h4>
                    <livewire:components.informacie.hodnotiace-tlacidla :hodnotenyZaznam="$informacia"
                                                                        :povolitZaporneHodnotenie="true"/>
                </div>
            </div>
        </div>
    </section>

    <section class="space-sm">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-12 col-md-8 col-lg-7 clearfix">
                    {!! $informacia->obsah !!}
                </div>

                <div class="col-12 col-md-4">
                    <div class="card">
                        <ul class="list-group list-group-flush">
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div><i class="icon-user mr-1"></i>Vytvoril</div>
                                    <span>{{ $informacia->vytvoril->cele_meno }}</span>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div><i class="icon-calendar mr-1"></i>Zverejnené</div>
                                    <span>{{ $informacia->cas_zverejnenia->format('d.m.Y \o H:i') }}</span>
                                </div>
                            </li>
                            <li class="list-group-item">
                                <div class="d-flex justify-content-between">
                                    <div><i class="fas fa-star mr-1"></i>Počet hodnotení</div>
                                    <span class="aktualny-pocet-hodnoteni">{{ $informacia->pocetHodnoteni() }}</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    <script>
        Livewire.on('aktualizovanyPocetHodnoteni', pocetHodnoteni => {
            document.querySelector('.aktualny-pocet-hodnoteni').innerHTML = pocetHodnoteni;
        })
    </script>
@endpush
