@php use App\Models\Hodnotenie\HodnotenieEnum; @endphp

<div class="hodnotiace-tlacidla">
    <div class="d-flex align-items-center justify-content-start gap-4">
        <button wire:click="zmenitHodnotenie('{{ HodnotenieEnum::kladne()->value }}')" type="button"
                class="btn @if($this->hodnoteniePouzivatelaKladne) btn-success @else btn-outline-success @endif btn-sm hodnotenie-button"
                wire:loading.attr="disabled"
                @if($this->hodnoteniePouzivatelaKladne) title="Moje hodnotenie" @endif>
            <i class="fas fa-thumbs-up"></i>
            <span>{{ $this->pocetKladnychHodnoteni }}</span>
        </button>

        @if($this->povolitZaporneHodnotenie)
            <button wire:click="zmenitHodnotenie('{{ HodnotenieEnum::zaporne()->value }}')" type="button"
                    class="btn @if($this->hodnoteniePouzivatelaZaporne) btn-danger @else btn-outline-danger @endif btn-sm hodnotenie-button"
                    wire:loading.attr="disabled"
                    @if($this->hodnoteniePouzivatelaZaporne) title="Moje hodnotenie" @endif>
                <i class="fas fa-thumbs-down"></i>
                <span>{{ $this->pocetZapornychHodnoteni }}</span>
            </button>
        @endif
    </div>
</div>

@push('styles')
    @livewireStyles
@endpush

@push('scripts')
    @livewireScripts
@endpush

@push('styles')
    <style>
        .hodnotiace-tlacidla {
            margin: 1rem 0;
        }

        .hodnotenie-button {
            min-width: 60px;
            transition: all 0.3s ease;
        }

        .hodnotenie-button i {
            margin-right: 0.5rem;
        }

        .hodnotenie-button:hover {
            transform: scale(1.10);
        }

        .gap-4 {
            gap: 1rem;
        }
    </style>
@endpush
