<div class="card card-sm shadow">
    <div class="card-header bg-secondary d-flex justify-content-between">
        <a href="{{ route('portal.sprava.informacie.create') }}" class="btn btn-primary">
            <span class="icon-plus"></span>
            Vytvoriť novú informáciu
        </a>
        <form class="d-flex align-items-center">
            <span class="mr-2 text-muted text-small text-nowrap">Zoradiť:</span>
            <select class="custom-select" wire:model="sort">
                <option value="1">od najstarších</option>
                <option value="0">od najnovších</option>
            </select>
        </form>
    </div>

    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table align-items-center mb-0">
                <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">Titulok</th>
                    <th scope="col">Stav</th>
                    <th scope="col" class="text-center">Zverejnené</th>
                    <th scope="col" class="text-center">Upravené</th>
                </tr>
                </thead>
                <tbody>
                @forelse($informacie as $informacia)
                    <tr class="bg-white">
                        <td>{{ ($informacie->currentPage() * $informacie->perPage()) - $informacie->perPage() + $loop->index + 1 }}
                            .
                        </td>
                        <th scope="row">
                            <a href="{{ route('portal.sprava.informacie.edit', $informacia) }}">
                                <div class="media align-items-center">
                                    <div class="media-body">
                                        <span class="h6 font-weight-bolder mb-0 text-truncate d-inline-block"
                                              style="max-width: 300px;">{{ $informacia->titulok }}</span>
                                        <div class="text-black-50"><span class="icon-user"></span>
                                            {{ $informacia->vytvoril->cele_meno }}</div>
                                    </div>
                                </div>
                            </a>
                        </th>
                        <td class="text-left">
                            <div class="badge badge-info text-uppercase"
                                 style="background-color: {{$informacia->stav->color()}}">
                                {{ ucfirst($informacia->stav->label) }}
                            </div>
                            @if($informacia->trashed())
                                <div class="badge badge-danger text-uppercase">Zneplatnená</div>
                            @endif
                            @if($informacia->jeOdoslana)
                                <div class="badge badge-success text-uppercase">Odoslaná</div>
                            @endif
                            @if($informacia->odporucane)
                                <div class="badge badge-success text-uppercase">Odporúčaná</div>
                            @endif
                        </td>
                        <td class="text-center">
                            @if(is_null($informacia->cas_zverejnenia))
                                <span>-</span>
                            @else
                                <span title="{{ $informacia->cas_zverejnenia->format('d.m.Y \o H:i:s') }}">
                                    {{ $informacia->cas_zverejnenia->longRelativeDiffForHumans() }}
                                </span>
                            @endif
                        </td>
                        <td class="text-center">
                            <span title="{{ $informacia->updated_at->format('d.m.Y \o H:i:s') }}">
                                {{ $informacia->updated_at->longRelativeDiffForHumans() }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr class="bg-light text-center disabled">
                        <td colspan="5">
                            <span class="text-muted h5">Zatiaľ neexistujú žiadne informácie pre používateľov...</span>
                        </td>
                    </tr>
                @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <div class="card-footer bg-secondary d-flex justify-content-between align-items-center">
        @if(!$informacie->isEmpty() && $informacie->hasPages())
            {{ $informacie->onEachSide(5)->links() }}
        @endif
        <div>
            <span class="text-muted text-small">Počet položiek {{ ($informacie->currentPage() * $informacie->perPage()) - $informacie->perPage() + 1 }} - @if($informacie->total() > ($informacie->currentPage() * $informacie->perPage()))
                    {{ $informacie->currentPage() * $informacie->perPage() }}
                @else
                    {{ $informacie->total() }}
                @endif z {{ $informacie->total() }}
            </span>
        </div>
    </div>
</div>