<?php
/**
 * @author Amasty Team
 * @copyright Copyright (c) Amasty (https://www.amasty.com)
 * @package Blog Pro for Magento 2
 */
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
?>

<?php /** @var \Magento\PageCache\Block\System\Config\Form\Field\Export $block */
?>
<script>
    require(['jquery'], function($){

        var mpCommonAngular = angular.module('com.magpleasure.common', ["ngDraggable","mp.blog.layout"], function ($httpProvider) {
            $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
            $httpProvider.defaults.transformRequest = [function (data) {
                return Object.toQueryString(data);
            }];
        });

        mpCommonAngular
            .config(function($interpolateProvider){
                    $interpolateProvider.startSymbol('{{{').endSymbol('}}}');
                }
            );
        angular.element(document).ready(function () {
            var doc = document.body;
            //if (doc && !$(doc).hasClassName('ng-scope')) {
            if (doc) {
                angular.bootstrap(doc, ['com.magpleasure.common']);
            }
        });
    });
</script>
<script type="text/ng-template" id="layout/element.html">

    <div class="layout-selector">
        <ul>
            <li ng-repeat="layout in config.layouts">
                <a class="layout-btn {{layout.value}}"
                   ng-class="{'active':isActive(layout.value)}"
                   title="{{layout.label}}"
                   ng-click="setLayout(layout.value)">{{layout.label}}</a>
            </li>
        </ul>
        <span class="title">{{getSelectedLabel()}}</span>
        <div class="fixed"></div>
    </div>
    <div class="layout-columns">

        <div class="blog-left-sidebar" ng-if="displayLeftSidebar()">
            <div class="column mp-layout-column" ng-init="type='sidebar'; subtype='left_side';"></div>
        </div>
        <div class="blog-content">
            <div class="column mp-layout-column" ng-init="type='content'; subtype='content';" ></div>
        </div>
        <div class="blog-right-sidebar"  ng-if="displayRightSidebar()">
            <div class="column mp-layout-column" ng-init="type='sidebar'; subtype='right_side';"></div>
        </div>

        <div class="fixed"></div>
    </div>
    <input name="{{name}}" type="hidden" value="{{value | json}}" /></script><script type="text/ng-template" id="layout/column.html">
    <div class="enabled-blocks">

        <div ng-if="isMyDrag(type)"
             ng-drop="true"
             ng-drop-success="onDropSuccess($data, $attrs, $oAttrs)"
             ng-type="{{type}}"
             ng-sub-type="{{subtype}}"
             class="drop-place">
            Drop here    </div>
        <div
            ng-drag="true"
            ng-drag-data="block"
            ng-drag-begin="onDragBegin($data, $attrs)"
            ng-drag-cancel="onDragCancel($data, $attrs)"
            class="block {{block}} {{type}}"
            ng-type="{{type}}"
            ng-sub-type="{{subtype}}"
            ng-repeat-start="block in value[subtype]">

            <div
                class="block-title">
                {{getBlockLabel(type, block)}}
                <a ng-prevent-drag="true"
                   class="remove-block"
                   ng-click="removeBlock(subtype, $index)"
                   title="Remove Block">
                    <i class="glyphicons bin"></i>
                </a>
            </div>
            <div class="block-content"
                 ng-style="{'background-image': 'url('+ getBackendImage(type, block) + ')'}"
                 ng-prevent-drag="true"></div>

            <div class="fixed"></div>
        </div>

        <div ng-if="isMyDrag(type, block)"
             ng-drop="true"
             ng-drop-success="onDropSuccess($data, $attrs, $oAttrs)"
             ng-drop-data="{{block}}"
             class="drop-place"
             ng-type="{{type}}"
             ng-sub-type="{{subtype}}"
             ng-repeat-end  >
            Drop here    </div>
    </div>

    <div class="available-blocks" ng-if="!displayAddButton(type, subtype)">
        <a ng-click="addToColumn(subtype, block.value)"
           class="block-to-add"
           ng-repeat="block in available[type]"
           title="{{block.label}}" >
            {{block.label}}
        </a>
    </div>

    <a ng-click="showVariantsForColumn(subtype)"
       class="add"
       title="Add Block to Column"
       ng-if="displayAddButton(type, subtype)">+</a></script>