@extends('layouts.app')

@push('css')
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'posm-warning': '#f7b84b',
                    }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="{{ asset('assets/css/posm_custom.css') }}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="posm-layout-container">
        @if(View::hasSection('posm_breadcrumbs') || View::hasSection('posm_back_link'))
            <div class="px-4 pt-4">
                @if(View::hasSection('posm_breadcrumbs'))
                    <div class="posm-breadcrumb">
                        @yield('posm_breadcrumbs')
                    </div>
                @endif

                @if(View::hasSection('posm_back_link'))
                    <a href="@yield('posm_back_link')" class="posm-back-link">
                        <i class="fa-solid fa-arrow-left me-2"></i> Back to @yield('posm_back_title', 'Products')
                    </a>
                @endif
            </div>
        @endif

        @yield('posm_content')
    </div>
@endsection