<!doctype html>
<html lang="en">
<head>
    <script{{#nonce}} nonce="{{{nonce}}}"{{/nonce}}>
            var yandexHTML5BannerApi = (function () {
            var _clickUrls = [];
            try {
                var data = {{{AUCTION_DC_PARAMS}}};
                data = data.data_params;
                function getOrderKey(str) {
                    var re = /\d+$/;
                    var match = str.match(re);
                    return match ? parseInt(match[0], 10) : 0;
                }
                for (var c in data) {
                    if (c !== "misc" && data[c] && data[c].click_url) {
                        var clickUrl = data[c].click_url;
                        var clicUrlKeys = [];
                        for (var u in clickUrl) {
                            if (/clickUrl\d+/.test(u)) {
                                clicUrlKeys.push(u);
                            }
                        }
                        clicUrlKeys.sort(function (a, b) {
                            a = getOrderKey(a);
                            b = getOrderKey(b);
                            return a - b;
                        });
                        for (var i = 0; i < clicUrlKeys.length; i++) {
                            _clickUrls.push(clickUrl[clicUrlKeys[i]]);
                        }
                        break;
                    }
                }
            } catch (e) { }
            function getClickMacro() {
                var clickMacro = '';
                var res = /click_macro=([^&$]+)/.exec(getBaseURI());
                if (res) {
                    try {
                        clickMacro = decodeURIComponent(res[1]);
                    } catch (err) { }
                }
                return clickMacro;
            }
            function getBaseURI() {
                var baseURI = document.baseURI;
                if (baseURI === null || typeof baseURI === 'undefined') {
                    var baseTag = document.querySelector('base');
                    if (baseTag) {
                        baseURI = baseTag.href;
                    } else {
                        baseURI = document.URL;
                    }
                }
                return baseURI;
            }
            var clickMacro = getClickMacro();
            return {
                getClickURLNum: function (num) {
                    var url = _clickUrls[--num];
                    if (clickMacro) {
                        return "" + clickMacro + encodeURIComponent(url);
                    }
                    return url;
                }
            };
        })();
    </script>
    <meta charset="UTF-8">
    <title>Video Ad</title>
    <style>
        html,
        body {
            width: {{& body_width}}px;
            height: {{& body_height}}px;
            padding: 0;
            margin: 0;
            display: flex;
        }
        #slot {
            width: {{& video_width}}px;
            height: {{& video_height}}px;
        }
{{#picture_is_default}}
        #default-picture {
            display: flex;
            width: {{& picture_width}}px;
            height: {{& picture_height}}px;
            background: #f2f2f2;
            align-items: center;
            justify-content: center;
        }
        .no-image {
            opacity: .3;
            width: 30px;
            height: 30px;
        }
{{/picture_is_default}}
        {{^picture_is_default}}
        #pic {
            width: {{& picture_width}}px;
            height: {{& picture_height}}px;
        }
        #click1_area {
                display: block;
                width: {{& picture_width}}px;
                height: {{& picture_height}}px;
        }
{{/picture_is_default}}
    </style>
</head>

<body>
{{#picture_is_default}}
    <div id="default-picture">
        <svg class="no-image" viewBox="0 0 41 32" xmlns="http://www.w3.org/2000/svg"><path d="M16 12c0-2.208-1.792-4-4-4s-4 1.792-4 4 1.792 4 4 4 4-1.792 4-4m20 15v-3l-10.5-9L11 27z"/><path d="M41 32V0H0v32h36v-5H5V5h31v27z"/></svg>
    </div>
{{/picture_is_default}}
{{^picture_is_default}}
    <a id="click1_area" href="#" target="_blank"> <img id="pic" src='{{& picture}}'> </a>
{{/picture_is_default}}
<div class="video-container" id="slot"></div>
<script{{#nonce}} nonce="{{{nonce}}}"{{/nonce}}>
        var script = document.createElement('script');
        script.src = 'https://an.yandex.ru/system/video-ads-sdk/adsdk.js';
        script['async'] = false;
        document.head.appendChild(script);
        function getBannerUrl() {
            return window.yandexHTML5BannerApi ? window.yandexHTML5BannerApi.getClickURLNum(1) : ''
        }
        script.onload = function () {
            var vast = '{{& vast}}';

            vast = vast.replace('%%ClickURL%%', getBannerUrl());

            ya.videoAd.loadModule('InPage')
                .then(function (module) {
                    return module.addInPageVideo(
                        document.getElementById('slot'),
                        {
                            vast: vast,
                            replayMode: 'auto',
                            controlsSettings: {
                                controlsVisibility: {
                                    timeline: false,
                                    adLabel:false
                                }
                            },
                            muted: true
                        },
                        function (publicControllerOrError) {
                            if (publicControllerOrError instanceof Error) {
                                console.error('InPage Error: ', publicControllerOrError);
                            } else {
                                window.publicController = publicControllerOrError;
                            }
                        },
                    )
                })
                .catch(function () {
                    // See error in net log
                });
        };
{{^picture_is_default}}
        document.getElementById("click1_area").href = getBannerUrl();
{{/picture_is_default}}
</script>
</body>
