<!DOCTYPE html>
<html lang="en"{{& html_style_attr}}>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="margin:0;{{& style}}">
<div style="position:absolute; width: 336px; height: 600px; border-color: rgb(211, 211, 211); background-image: url(https://yastatic.net/s3/front-maps-static/front-pins-agency-cabinet/0.0.769/out/assets/_/d23ddfd51ff511a29464ad68ef139d3c.jpg); background-size: cover;">
    <div style="top: 190px; left: 85px; position:absolute;">
        <div id="logo" style="left: -14px; width: 36px; height: 36px; position: absolute; border-radius: 50%; z-index: 1; background-size: cover; top: 0; bottom: 0; margin: auto 0; cursor: pointer; user-select: none;" onclick="changeBannerVisibility()">
        </div>
        <div style="height: 30px; min-width: 141px; max-width: 180px; border-radius: 22px; background-color: #FFF; padding: 7px 7px 7px 0; font-family: 'Yandex Sans Text',Arial,sans-serif; opacity: .9; display: flex; flex-direction: column;">
            <span id="headline" style="color: #000000; font-size: 14px; font-weight: 500; line-height: 1.29; margin-left: 28px; white-space: nowrap; overflow: hidden;">Заголовок</span>
            <span id="description" style="color: rgba(0, 0, 0, .6); font-size: 12px; margin-left: 28px; line-height: 1.29;">Категория</span>
        </div>
    </div>
    <div id="banner" style="bottom: 0px; position:absolute; background-color: #FFFFFF">
        <div id="image" style="width: 336px; height: 112px; background-size: contain; border-radius: 8px 8px 0 0;">
        </div>
        <div style="right: 16px; top: 120px; width: 24px; height: 24px; position: absolute; border-radius: 50%; background-color: rgba(0,0,0,0.1); cursor: pointer;" onclick="changeBannerVisibility()">
            <span style="left: 11px; top: 5px; width: 1px; height: 14px; position: absolute; background-color: #030303; border-radius: 10px; transform: rotate(45deg);"></span>
            <span style="left: 11px; top: 5px; width: 1px; height: 14px; position: absolute; background-color: #030303; border-radius: 10px; transform: rotate(-45deg);"></span>
        </div>
        <div style="display: grid; padding: 10px; grid-row-gap: 10px;">
            <div>
                <h3 id="headline_2" style="font-family: 'YS Text', Arial; font-size: 18px; margin: 0; line-height: 1.29; overflow: hidden; max-width: 90%; text-overflow: clip; white-space: nowrap;"></h3>
                <div id="description_2" style="font-family: 'Yandex Sans Text',Arial,sans-serif; font-size: 14px; color: rgba(0,0,0,.6); margin: 0; line-height: 1.5;"> • Адрес из организации в Яндекс.Справочнике</div>
                <div id="legal" style="font-family: 'Yandex Sans Text',Arial,sans-serif; font-size: 12px; color: rgba(0,0,0,.3); line-height: 1;">Реклама.</div>
            </div>
            <div style="display: flex; margin-top: 6px; justify-content: space-between;">
                <div id="domain" style="background-color: #e0e6e9; height: 40px; line-height: 40px; border-radius: 8px; text-align: center; color: rgba(0,0,0,0.8); font-size: 16px; font-family: 'YS Text', Arial; font-weight: 500; flex: 1 1; margin-right: 8px; display: none; cursor: pointer;">На сайт</div>
                <div id="phone" style="background-color: #e0e6e9; height: 40px; line-height: 40px; border-radius: 8px; text-align: center; color: rgba(0,0,0,0.8); font-size: 16px; font-family: 'YS Text', Arial; font-weight: 500; flex: 1 1; margin-right: 8px; display: none; cursor: pointer;">Позвонить</div>
                <div id="path" style="background-color: #fedd60; height: 40px; line-height: 40px; border-radius: 8px; text-align: center; color: rgba(0,0,0,0.8); font-size: 16px; font-family: 'YS Text', Arial; font-weight: 500; flex: 1 1; cursor: pointer;">Заехать</div>
            </div>
        </div>
    </div>
</div>
<script>
    var data = {{& any}};

    try {
        var elements = data["elements"];
        var mediaSets = data["mediaSets"];
        for (var i=0; i<elements.length; i=i+1) {
            var e = elements[i];
            if (e["available"] == false) {
                continue;
            }
            var type = e["type"];
            if (type=="logo" || type=="image") {
                var img = mediaSets[e["mediaSet"]]["items"][0]["items"][0]["url"];
                document.getElementById(type).style.backgroundImage = 'url('+img+')';
            } else if (type=="headline" || type=="description") {
                var text = e["options"]["content"];
                document.getElementById(type).innerHTML = text;
                var el = document.getElementById(type+"_2");
                el.innerHTML = text + el.innerHTML;
            } else if (type=="domain" || type=="phone") {
                var n = document.getElementById(type);
                n.style.display = "";
                document.getElementById("path").style.width = n.style.width;
                if (type=="domain") {
                    var domain = e["options"]["content"];
                    n.title = domain;
                    n.onclick = function() {window.open(domain, '_blank')};
                } else if (type=="phone") {
                    var phone = e["options"]["content"];
                    n.title = phone;
                    n.onclick = function() {window.open("tel:" + phone, '_blank')};
                }
            }  else if (type=="legal") {
                var n = document.getElementById(type);
                var text = n.innerHTML + " " + e["options"]["content"];
                n.innerHTML = text;
            }
        }
    } catch (e) {}

    function changeBannerVisibility() {
        var n = document.getElementById("banner");
        if (n.style.display == "none") {
            n.style.display = "";
        } else {
            n.style.display = "none";
        }
    }
</script>
</body>
</html>
