{% set button_class = button_class|default('btn-outline btn-primary btn-xs') %}
{% set button_icon = button_icon|default({ size: 'h-4 w-4' }) %}
<div class="navbar pdf-view-navbar {{ navbar_class|default('bg-stone-100') }}"> 
    <div class="flex-grow pdf-view-title">
        <div class="text-sm font-semibold">
            {{ title }}
            <span id="pdf_view_file">{{ file_name }}</span>
        </div>              
    </div>
    <div class="place-content-end text-sm" id="pdf_view_page">
        <span class="font-bold">{{ labels.page }}</span>      
        <div classs="page-panel hidden">
            <span class="pdf-view-page pl-1"></span>
            {{ labels.of }}
            <span class="pdf-view-total-pages"></span>
        </div>
    </div>    
</div>
<div id="pdf_view_content" class="relative {{ class|default('p-1 w-full h-full') }}">
    <canvas 
        id="pdf_view_canvas" 
        class="pdf-view-canvas {{ canvas_class|default('h-full w-full') }}">
    </canvas>
    <div class="w-full h-full pdf-view-loader hidden">
        <div class="animate-spin absolute top-1/2 right-1/2 left-1/2 border-top rounded-full border-0 border-t-4 border-blue-500 border-solid h-4 w-4">
        </div>
    </div>
</div>
<div class="pdf-footer mt-1 flex flex-row items-center">     
    <div class="btn-group">
        <button class="btn {{ button_class }} pdf-view-first-page tooltip" data-tip="{{ labels.first }}">
            {{ component('icons~chevron.double.left',button_icon,'svg') }}  
        </button>         
        <button class="btn {{ button_class }} pdf-view-prev-page tooltip" data-tip="{{ labels.prev }}">
            {{ component('icons~chevron.left',button_icon,'svg') }}  
        </button>
        <button class="btn {{ button_class }} pdf-view-next-page tooltip" data-tip="{{ labels.next }}">
            {{ component('icons~chevron.right',button_icon,'svg') }}  
        </button>
        <button class="btn {{ button_class }} pdf-view-last-page tooltip" data-tip="{{ labels.last }}">
            {{ component('icons~chevron.double.right',button_icon,'svg') }}  
        </button>  
    </div> 
    <div class="px-2 flex flex-row items-center flex-grow place-content-end">
        <div>
            <span class="font-bold text-sm">{{ labels.zoom }}</span>
            <span class="pdf-view-page-zoom text-sm pl-2 pr-2"></span>
        </div>
        <div class="btn-group">
            <button class="btn {{ button_class }} pdf-view-zoom-plus" data-tip="{{ labels.plus }}">
                {{ component('icons~zoom.in',button_icon,'svg') }}      
            </button>         
            <button class="btn {{ button_class }} pdf-view-zoom-minus" data-tip="{{ labels.minus }}">            
                {{ component('icons~zoom.out',button_icon,'svg') }} 
            </button>
        </div>
    </div>    
</div>