@extends( 'layout.base' )

@section( 'layout.base.header' )
    @parent
    @yield( 'layout.base.header.pos' )
@endsection

@section( 'layout.base.body' )
<div id="pos-app" class="h-full w-full relative">
    <div id="loader" class="top-0 anim-duration-500 fade-in-entrance left-0 absolute w-full z-50 h-full flex flex-col items-center justify-center">
        @if ( ns()->option->get( 'ns_store_square_logo', false ) )
        <img src="{{ ns()->option->get( 'ns_store_square_logo' ) }}" alt="POS">
        @else
        <img src="{{ asset( 'svg/nexopos-variant-1.svg' ) }}" class="w-32" alt="POS">
        @endif
        <p class="font-semibold py-2">{{ __( 'Loading...' ) }}</p>
    </div>
    <ns-pos></ns-pos>
</div>
@endsection

@section( 'layout.base.footer' )
    @parent
    <script src="{{ asset( ns()->isProduction() ? 'js/pos-init.min.js' : 'js/pos-init.js' ) }}"></script>
    <script>
        const nsShortcuts   =