@props([
    /** A data URI for the artwork, or null when the clinic has not uploaded one. */
    'src' => null,

    /** header | footer — only the spacing differs. */
    'position' => 'header',

    /**
     * Pin the footer band to the bottom of every page.
     *
     * Off by default because a caller may already be doing its own pinning —
     * the prescription puts the band inside a positioned block of its own so
     * it can print a line of text above it.
     */
    'pinned' => false,
])

{{--
    The clinic's uploaded letterhead, on any printed document.

    One component for the prescription, the invoice, the receipt, the credit
    note and the lab report, because it is one piece of paper as far as the
    clinic is concerned — and five copies of this markup would be five places
    to fix when the sizing is wrong.

    Styled inline rather than by class: these are standalone documents with
    their own <style> block and no access to the application's stylesheet, and
    DomPDF is drawing most of them.

    Sized by width alone so the clinic's own proportions are kept. A band
    squeezed into a fixed height is a logo somebody will complain about, and
    rightly.
--}}
@if ($src)
    @if ($position === 'footer' && $pinned)
        {{--
            Pinned rather than left to follow the content.

            An invoice or a report seldom fills a sheet, and a letterhead band
            floating halfway down with white space beneath it looks like the
            document ran out rather than ended. Fixed, DomPDF repeats it at the
            foot of every page — which is what a letterhead is for.

            The padding is the room it occupies: without it a long report runs
            underneath its own footer.
        --}}
        <style>
            body { padding-bottom: 32mm; }

            /*
             | On screen the same document is a scrolling card, not a sheet.
             |
             | `position: fixed` there is measured against the browser window,
             | so the band stretched the full width of the screen and lay across
             | the results while the reader scrolled — pinned to the wrong
             | rectangle entirely.
             |
             | DomPDF does not evaluate media queries, so the paper keeps the
             | pinning it needs. Browser printing keeps it too: this block is
             | screen-only, and `@media print` never sees it.
             |
             | `!important` because the rule it has to beat is an inline style,
             | and the inline style is what DomPDF reads.
             */
            @media screen {
                body { padding-bottom: 0; }

                .px-letterhead-pinned {
                    position: static !important;
                    margin-top: 12px !important;
                }
            }
        </style>

        <img src="{{ $src }}" alt="" class="px-letterhead-pinned"
             style="position: fixed; left: 0; right: 0; bottom: 0; display: block; width: 100%; height: auto;">
    @else
        <img src="{{ $src }}" alt=""
             style="display: block; width: 100%; height: auto; {{ $position === 'footer' ? 'margin: 6px 0 0;' : 'margin: 0 0 10px;' }}">
    @endif
@endif