<html style="padding: 0; margin: 0; width: 100%; height: 100%;" lang="">
    <head style="padding: 0; margin: 0; width: 100%; height: 100%;">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Menuplan_uge_{{$menuPlan->week}}</title>
    </head>
    <style>
        @page { margin: 0; }
        body { margin: 0; }
        h2 { font-size: 48px; color: #00788a; }
        p { font-size: 24px; z-index: 1; }
        img { z-index: 0; opacity: 0.7; }
    </style>
    <body style="padding: 0; width: 100%; height: 100%;">
        <div style="background-color: #00788A; width: 100%; padding: 1rem 1rem;">
            <h1 style="color: white; text-align: center">Erhverskollegiet - Odense</h1>
            <h1 style="font-size: 36px; text-align: center; color: white;">Menuplan, Uge {{$menuPlan->week}}</h1>
        </div>
        <div style="text-align: center; margin: 0 16px;">
            <h2 class="ql-align-center"><strong>Mandag:</strong></h2>
            <p class="ql-align-center">{{$menuPlan->monday}}</p>
            <p class="ql-align-center"><br></p>

            <h2 class="ql-align-center"><strong>Tirsdag:</strong></h2>
            <p class="ql-align-center">{{$menuPlan->tuesday}}</p>
            <p class="ql-align-center"><br></p>

            <h2 class="ql-align-center"><strong>Onsdag:</strong></h2>
            <p class="ql-align-center">{{$menuPlan->wednesday}}</p>
            <p class="ql-align-center"><br></p>

            <h2 class="ql-align-center"><strong>Torsdag:</strong></h2>
            <p class="ql-align-center">{{$menuPlan->thursday}}</p>
        </div>
        <img src="./images/icons/watermelon.svg" style="width: 8rem; position: absolute; right: 52px;" alt="watermelon">
        <img src="./images/icons/coconut.svg" style="width: 6rem; position: absolute; left: 45px; top: 360px; transform: scaleX(-1);" alt="coconut">
        <img src="./images/icons/dinner.svg" style="width: 6rem; position: absolute; right: 40px; top: 350px; transform: rotate(-20deg);" alt="plate">
        <img src="./images/icons/food.svg" style="fill: black; width: 7rem; position: absolute; left: 32px; bottom: 150px; transform: rotate(30deg);" alt="plate">
    </body>
</html>
