@props([
    'pdfRoute' => '',
    'csvRoute' => '',
])
<div id="div-btn-group-output" class="d-print-none position-fixed top-0 start-0 w-100 z-10" style="transition: top 0.3s; padding: 0.75rem 0 0.25rem 0;">
    <div class="d-flex flex-wrap justify-content-center align-items-center gap-2">
        <button type="button" class="btn btn-sm btn-primary d-flex align-items-center gap-1" data-ripple-color="primary" onclick="window.print()">
            <i class="fas fa-print"></i>
            <span>{{ __('general.print') }}</span>
        </button>
        @if(!empty($pdfRoute))
            <a href="{{ $pdfRoute }}" class="btn btn-sm btn-info d-flex align-items-center gap-1">
                <i class="fas fa-file-pdf"></i>
                <span>PDF</span>
            </a>
        @endif
        @if(!empty($csvRoute))
            <a href="{{ $csvRoute }}" class="btn btn-sm btn-secondary d-flex align-items-center gap-1">
                <i class="fas fa-file-csv"></i>
                <span>CSV</span>
            </a>
        @endif
    </div>
</div>
@push('scripts')
    <script type="module">
        let prevScrollpos = window.pageYOffset;
        window.onscroll = function () {
            const currentScrollPos = window.pageYOffset;
            if (prevScrollpos > currentScrollPos) {
                document.getElementById("div-btn-group-output").style.top = "0";
            } else {
                document.getElementById("div-btn-group-output").style.top = "-50px";
            }
            prevScrollpos = currentScrollPos;
        }
    </script>
@endpush