<$
var variant = article.value("variant", "image-left");

var textOffsetY = article.value("textOffsetY", "2rem"); /* How much to move the div up / down */
var textOffsetX = article.value("textOffsetX", "5rem"); /* How much to move the div left / right */
var alignment = article.value("alignment", "center");
var padding = article.value("padding", "1rem");
var minHeight = article.value("minHeight", "200");
var backgroundColor = article.value("backgroundColor", "#000");
var textColor = article.value("textColor", "#fff");
var breakpoint = article.value("breakpoint", "768");
var imgHeight = article.value("imgHeight", "100%");
var borderRadius = article.value("borderRadius", "0px");

var cssWrapperSelector = "#wzp_txtImgOverlay" + article.id + " ";

var headstyle = "";
headstyle += cssWrapperSelector + "{";
    headstyle += "display: grid;"
    headstyle += "grid-template-columns: 50% 50%;";
    if (parseInt(textOffsetY) < 0) {
        /* headstyle += "margin-bottom: " + textOffsetY + ";"; */
    } else {
        headstyle += "margin-top: " + textOffsetY + ";";
    }
headstyle += "}";

/* Image */
headstyle += cssWrapperSelector + " > img {";
    headstyle += "object-fit: cover;";
    headstyle += "border: none;";
    headstyle += "max-width: unset;";
    headstyle += "z-index: 0;";
    headstyle += "width: calc(100% + " + textOffsetX + ");";
    headstyle += "height: " + imgHeight + ";";
    headstyle += "border-radius: " + borderRadius + ";";
    if (variant === "image-left") {
        headstyle += "margin-right: calc(" + textOffsetX + " * -1);";
    } else {
        headstyle += "margin-left: calc("  + textOffsetX + " * -1);";
    }
headstyle += "}";

/* Text div */
headstyle += cssWrapperSelector + " > div {";
    headstyle += "display: flex;";
    headstyle += "flex-direction: column;";
    headstyle += "justify-content: " + alignment + ";"; /* "justiy-content" works like "align-items" here, as the flex-direction is column */
    headstyle += "height: max-content;";
    headstyle += "z-index: 1;";
    if (variant === "image-left") {
        headstyle += "margin-left: calc(" + textOffsetX + " * -1);";
    } else {
        headstyle += "margin-right: calc("  + textOffsetX + " * -1);";
    }
    headstyle += "margin-top: calc(" + textOffsetY + " * -1);";
    headstyle += "padding: " + padding + ";";
    headstyle += "min-height: " + minHeight + "px;";
    headstyle += "background-color: " + backgroundColor + ";";
    headstyle += "color: " + textColor + ";";
    headstyle += "border-radius: " + borderRadius + ";";
headstyle += "}";

/* Text */
headstyle += cssWrapperSelector + " h1," + cssWrapperSelector + " h2," + cssWrapperSelector + " h3 {";
    /* Remove margin-top from h1-h3, as it influences vertical alignment */
    headstyle += "margin-top: 0;";
    headstyle += "color: " + textColor + ";";
headstyle += "}";

headstyle += cssWrapperSelector + " > div > :last-of-type {";
    /* Remove margin-bottom from the last element, as it influences vertical alignment */
    headstyle += "margin-bottom: 0;";
headstyle += "}";

/* Mobile */
headstyle += " @media (max-width: " + breakpoint + "px) {"
    headstyle += "#wzp_txtImgOverlay" + article.id + " {";
        headstyle += "grid-template-columns: 1fr;";
        headstyle += "margin-top: unset;";
        headstyle += "margin-bottom: unset;";
    headstyle += "}";

    headstyle += "#wzp_txtImgOverlay" + article.id + " > img {";
        headstyle += "width: 100%;";
        headstyle += "height: auto;";
    headstyle += "}";

    headstyle += "#wzp_txtImgOverlay" + article.id + " > div, #wzp_txtImgOverlay" + article.id + " > img {";
        headstyle += "margin-top: 0;";
        headstyle += "margin-left: unset;";
        headstyle += "margin-right: unset;";
        headstyle += "min-height: unset;";
    headstyle += "}";
headstyle += "}";

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial("article-begin.html")$>

<div id="wzp_txtImgOverlay<$= article.id $>">
    <$ if (variant === "image-right") { $>
    <div>
        <$= system.partial("article-headline.html") $>
        <$= article.value("text") $>
    </div>
    <$ } $>
    
    <$ 
    var image = project.getImage(article.value("image"));
    if (!isNull(image)) {
        var altText = system.htmlEncode(system.removeHtmlTags(image.altText));
        var title = system.htmlEncode(system.removeHtmlTags(image.description));
        var fullsrc = image.workingCopyPath;
    
    $>
    <img src="<$= fullsrc $>" alt="<$= altText $>">
    <$ } $>
    
    <$ if (variant === "image-left") { $>
    <div>
        <$= system.partial("article-headline.html") $>
        <$= article.value("text") $>
    </div>
    <$ } $>
</div>

<$=system.partial("article-end.html")$>