<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>@lang($pageTitle)</title>
    <link type="text/css" rel="stylesheet" media="all" href="{{ asset('css/main.css') }}">

    <style>
        @page {
            margin: 120px 50px 80px 50px; /* Adjust page margins */
        }

        /* Define header and footer that repeat on each page */
        @page {
            header: page-header;
            footer: page-footer;
        }

        body {
            padding: 0;
            margin: 0;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }

        /* Header styling */
        .header {
            position: fixed;
            top: -80px; /* Adjust position */
            left: 0;
            width: 100%;
            text-align: center;
        }

        /* Footer styling */
        .footer {
            position: fixed;
            bottom: 0px;
            left: 0;
            width: 100%;
            text-align: center;
            font-size: 12px;
            color: gray;
        }

        /* Ensures content starts below the letterhead */
        .content {
            margin-top: 0px;
        }

        /* Force page breaks for long content */
        .page-break {
            page-break-before: always;
        }
    </style>
</head>
<body class="text-wrap ql-editor">

    <!-- Letterhead (Header) -->
    <htmlpageheader name="page-header">
        <div class="header">
            <img src="{{ $headerBase64 }}" width="100%" alt="Letterhead">
        </div>
    </htmlpageheader>

    <!-- Footer -->
    <htmlpagefooter name="page-footer">
        <div class="footer">
            <div class="header">
                <img src="{{ $footerBase64 }}" width="100%" alt="Footer">
            </div>
        </div>
    </htmlpagefooter>

    <!-- PDF Content -->
    <div class="content">
        {!! $letter !!}
    </div>

</body>
</html>
