<!DOCTYPE html>
<html ng-app="folderPluginWidget">
<head lang="en">
    <title>widget</title>
    <meta charset="UTF-8">
    <!-- CSS -->
    <script type="text/javascript">
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
      analytics.load("J1oyXILpnXqpbf1dnVSnxscVDzL4MqKh");
  analytics.page();
  }}();
    </script>
    <link href="../../../scripts/owlCarousel/owlCarousel.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../../styles/helper.css">
    <link rel="stylesheet" href="../../../styles/siteIcons.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- JS -->
    <script src="../../../scripts/jquery/jquery-1.11.2.min.js"></script>
    <script src="../../../scripts/smartcrop.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="js/angular-owl-carousel.js"></script>
    <script type="text/javascript" src="../../../scripts/buildfire.js"></script>
    <script type="text/javascript" src="../../../scripts/owlCarousel/owlCarousel.js"></script>
    <script src="../../../scripts/buildfire/components/carousel/carousel.js"></script>
    <script src="../../../scripts/buildfire/components/pluginInstance/sortableList.js"></script>
    <script src="../../../scripts/angular/ng-infinite-scroll.custom.js " type="application/javascript"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="app.services.js"></script>
    <script type="text/javascript" src="directives.js"></script>
    <script type="text/javascript" src="widget.controller.js"></script>
</head>
<body ng-controller="folderPluginCtrl" ng-cloak data-back-img="{{ data.design.backgroundImage}}" class="infinite-scroll-parent">
    <style>
        
        #intercom-container{
            display:none;
        }
        .layout-6 .list-item-media {
            background-color: transparent !important;
        }

        .folder-plugin-text:empty + div .layout3 .list-layout {
            border-top: 0;
        }

        #mainContainer {
            position: relative;
        }

        .icon3, .icon4 {
            font-size: 140px;
        }

        .icon5 {
            font-size: 130px;
            position: relative;
            top: 22px;
        }

        .icon6 {
            font-size: 120px;
            position: relative;
            top: 15px;
        }

        .fullHeight {
            height: 100%;
        }

        .marginTop {
            margin-top: 1px;
        }

        .owl-dots {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var slides = $('.plugin-slider .plugin-slide').length;

            // Slider needs at least 2 slides or you'll get an error.
            if (slides > 1) {
                $('.plugin-slider').owlCarousel({
                    loop: false,
                    nav: false,
                    items: 1
                });
            }
        }

    </script>
    <div data-ng-init="setWidth()" class="holder padding-zero hasBackground fullHeight" id="mainContainer">
        <div class="folder-plugin list-layout fullHeight">
            <div ng-show="displayTable" ng-class="{ 'hidden': data.content.carouselImages.length == 0 }" class="plugin-banner clearfix" ng-hide="data.design.selectedLayout == 12">
                <div id="carousel" ng-show="displayTable" class="plugin-slider text-center" ng-style="data.content.carouselImages.length > 0 ? {'min-height': (9 * deviceWidth / 16) + 'px' } : {}"></div>
            </div>
            <div class="text-left padded padding-bottom-zero clearfix folder-plugin-text hide-empty " ng-bind-html="safeHtml(data.content.text1)" ng-hide="data.design.selectedLayout == 12"></div>

            <!--
        This is where the tabata starts

    -->
            <div ng-init="displayEx = false">

                <!-- Starts Search -->
                <div class="searchDrops" ng-show="displayTable">

                    <b>Search by Meal Type:</b><select ng-model="mainSearch">
                        <option ng-repeat="m in groups" value="{{m.second}}">{{m.main}}</option>
                    </select>
                    <br />
                    <input ng-model="search" placeholder="What Meal are you looking for?" style="width:100%; height:25px; font-size:20px;" />


                </div>

                <style>
                    .searchDrops {
                        text-align: center;
                    }

                        .searchDrops select {
                            width: auto;
                            font-size: 15px;
                            margin-bottom: 10px;
                        }
                </style>


                <!-- Ends Search// Starts Table of exercises -->
                <table id="loaded" ng-show="displayTable">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Meal</th>
                            <th>Meal Type</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr ng-repeat="x in exLib | filter : {title:search}| filter:{type:mainSearch}" ng-show="displayTable" ng-click="activeEx(x)">
                            <td class="tableIMG"><img style="width:200px;" ng-src="{{x.pic}}" /></td>
                            <td class="tableSmall"><strong>{{x.title}}</strong></td>
                            <td class="tableSmall"><strong>{{x.type}}</strong></td>
                        </tr>
                    </tbody>
                </table>
                <!-- Ends Table// Starts Exercise Pop Ups -->
                <div class="exerciseCard" id="exCard" ng-repeat="meals in exLib| filter:{title:exCardFilter}" ng-show="displayEx">
                    <h2 text-align:center;"><strong>{{meals.title}}</strong></h2>
                    <img style="width:100%;" ng-src="{{meals.pic}}" />
                    <div style="text-align:left;">
                        <h3 font-weight:bolder;"><strong>Steps to Cook Meal</strong></h3>
                        <p>{{meals.step1}}</p>
                        <p>{{meals.step2}}</p>
                        <p>{{meals.step3}}</p>
                        <p>{{meals.step4}}</p>
                        <p>{{meals.step5}}</p>
                        <p>{{meals.step6}}</p>
                        <p>{{meals.step7}}</p>
                        <p>{{meals.step8}}</p>
                        <p>{{meals.step9}}</p>
                    </div>
                    <div style="text-align:left;">
                        <div ng-show="{{meals.onecalShow}}">
                            <h4 font-weight:bolder;"><strong>100 Calorie</strong></h4>
                            <h5 font-weight:bolder;"><strong>Ingredient List</strong></h5>

                            <p>{{meals.onecal1}}</p>
                            <p>{{meals.onecal2}}</p>
                            <p>{{meals.onecal3}}</p>
                            <p>{{meals.onecal4}}</p>
                            <p>{{meals.onecal5}}</p>
                            <p>{{meals.onecal6}}</p>
                            <p>{{meals.onecal7}}</p>
                            <p>{{meals.onecal8}}</p>
                            <p>{{meals.onecal9}}</p>
                        </div>
                        <div ng-show="{{meals.threecalShow}}">
                            <h4 font-weight:bolder;"><strong>300 Calorie</strong></h4>
                            <h5 font-weight:bolder;"><strong>Ingredient List</strong></h5>

                            <p>{{meals.threecal1}}</p>
                            <p>{{meals.threecal2}}</p>
                            <p>{{meals.threecal3}}</p>
                            <p>{{meals.threecal4}}</p>
                            <p>{{meals.threecal5}}</p>
                            <p>{{meals.threecal6}}</p>
                            <p>{{meals.threecal7}}</p>
                            <p>{{meals.threecal8}}</p>
                            <p>{{meals.threecal9}}</p>
                        </div>
                        <div ng-show="{{meals.sixcalShow}}">

                            <h4 font-weight:bolder;"><strong>600 Calorie</strong></h4>
                            <h5 font-weight:bolder;"><strong>Ingredient List</strong></h5>

                            <p>{{meals.sixcal1}}</p>
                            <p>{{meals.sixcal2}}</p>
                            <p>{{meals.sixcal3}}</p>
                            <p>{{meals.sixcal4}}</p>
                            <p>{{meals.sixcal5}}</p>
                            <p>{{meals.sixcal6}}</p>
                            <p>{{meals.sixcal7}}</p>
                            <p>{{meals.sixcal8}}</p>
                            <p>{{meals.sixcal9}}</p>
                        </div>
                        <div ng-show="{{meals.ninecalShow}}">

                            <h4 font-weight:bolder;"><strong>900 Calorie</strong></h4>
                            <h5 font-weight:bolder;"><strong>Ingredient List</strong></h5>

                            <p>{{meals.ninecal1}}</p>
                            <p>{{meals.ninecal2}}</p>
                            <p>{{meals.ninecal3}}</p>
                            <p>{{meals.ninecal4}}</p>
                            <p>{{meals.ninecal5}}</p>
                            <p>{{meals.ninecal6}}</p>
                            <p>{{meals.ninecal7}}</p>
                            <p>{{meals.ninecal8}}</p>
                            <p>{{meals.ninecal9}}</p>
                        </div>
                    </div>
                </div>
                <!-- Ends Pop Ups// Starts Scripts -->
                <style>
                    body {
                    }

                        body input {
                            background: none;
                        }

                    #loaded {
                        width: 100%;
                        margin-top: 10px;
                        border: none;
                        font-size: 12px;
                        text-align: center;
                    }

                        #loaded tr {
                            border-bottom: 1px solid;
                        }

                        #loaded td {
                            border-right: 1px dashed;
                            padding: 3px;
                        }

                        #loaded th {
                            font-size: 16px;
                            font: bold;
                            text-align: center;
                            padding: 2px;
                        }

                    .exerciseCard {
                        position: absolute;
                        margin: 0;
                        top: 0;
                        left: 0;
                        width: 100%;
                        padding: 5px;
                    }

                        .exerciseCard button {
                        }

                    .tableSmall {
                        width: 50px;
                    }

                    .tableIMG {
                        width: 200px;
                    }
                </style>
            </div>
            <!--
        This is where the tabata ends

    -->

            <div ng-show="displayTable" class="text-left padded padding-bottom-zero clearfix folder-plugin-text hide-empty " ng-bind-html="safeHtml(data.content.text)" ng-hide="data.design.selectedLayout == 12"></div>
            <div ng-show="displayTable" ng-if="data.design.selectedLayout && data.plugins.length > 0" ng-class="{'marginTop': data.design.selectedLayout == 11, 'fullHeight': data.design.selectedLayout == 12}" infinite-scroll="paging()"
                 data-infinite-container=".infinite-scroll-parent">
                <!-- Layout 1 -->
                <div class="media-center-plugin layout3" ng-if="data.design.selectedLayout == 1">
                    <div class=" list-layout">
                        <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                            <div class="list-item-media text-left overflow-hidden">
                                <div class="list-media-holder square-icon pull-left">
                                    <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="180" crop-height="180" crop-type="crop" ng-if="plugin.iconUrl">
                                    <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                </div>
                                <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                    <p class="ellipsis margin-zero margin-top-twenty">{{ plugin.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End layout 1 -->
                <!-- Layout 2 -->
                <div class="holder padding-zero" ng-if="data.design.selectedLayout == 2">
                    <div class="media-center-plugin layout3">
                        <div class="list-layout">
                            <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                                <div class="list-item-media text-left overflow-hidden">
                                    <div class="list-media-holder pull-left">
                                        <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="220" crop-height="120" crop-type="crop" ng-if="plugin.iconUrl">
                                        <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                    </div>
                                    <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                        <p class="ellipsis margin-zero bodyTextTheme margin-top-twenty">{{ plugin.title }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End layout 2 -->
                <!-- Layout 3 -->
                <div>
                    <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 3">
                        <div class="plugin-banner clearfix border-bottom-grey">
                            <div class="plugin-slide text-center">
                                <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-16x9.png', {width: 450, height: 254}) }}');"></div>
                                <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="450" crop-height="254" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                                <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                            </div>
                        </div>
                        <div class="padded text-left">
                            <a class="text-primary" ng-if="data.design.hideText!==undefined? !data.design.hideText : '' ">{{ plugin.title }}</a>
                            <a class="text-primary" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</a>
                        </div>
                    </div>
                </div>
                <!-- End layout 3 -->
                <!-- Layout 4 -->
                <div>
                    <div class="plugin-banner has-info-bar clearfix" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 4">
                        <div class="plugin-slide text-center">
                            <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="450" crop-height="254" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                            <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                        </div>
                        <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                            <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">{{ plugin.title }}</p>
                        </div>
                        <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                            <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">{{ plugin.title }}</p>
                        </div>
                    </div>
                </div>
                <!-- End layout 4 -->
                <!-- Layout 5 -->
                <div class="padded padding-top-zero padding-bottom-zero" ng-if="data.design.selectedLayout == 5">
                    <div class="list-layout layout5">
                        <div ng-repeat="pluginRow in data.plugins" class="row">
                            <div class="list-item col-xs-6 padding-zero has-info-bar pull-left" ng-repeat="plugin in pluginRow" ng-click="navigateToPlugin(plugin)">
                                <div class="list-item-media text-center">
                                    <div class="list-media-holder">
                                        <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="320" crop-height="320" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-12 + 'px' }" />
                                        <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                                    </div>
                                    <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                                        <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">
                                            {{ plugin.title }}
                                        </p>
                                    </div>
                                    <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                                        <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">
                                            {{ plugin.title }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End layout 5 -->
                <!-- Layout 6 -->
                <div class="padded padding-top-zero padding-bottom-zero" ng-if="data.design.selectedLayout == 6" style=" padding-top: 10px; ">
                    <div class="list-layout layout-6" ng-class="data.content.text?'':'margin-top-fifteen'">
                        <div ng-repeat="pluginRow in data.plugins" class="row">
                            <div class="list-item col-xs-6 pull-left" ng-repeat="plugin in pluginRow" ng-click="navigateToPlugin(plugin)">
                                <div class="list-item-media text-center overflow-hidden">
                                    <div class="list-media-holder">
                                        <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="200" crop-height="200" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-45 + 'px' }" />
                                        <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                                    </div>
                                    <div class="list-item-copy text-center" ng-class="data.design.hideText==false?'with-text':'without-text'">
                                        <p class="ellipsis margin-zero text-primary">
                                            <a class="text-primary" ng-show="data.design.hideText==false">
                                                {{ plugin.title }}
                                            </a>
                                            <a class="text-primary" ng-if="data.design.hideText===undefined ? true : false ">
                                                {{ plugin.title }}
                                            </a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End layout 6 -->
                <!-- Layout 7 -->
                <div>
                    <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 7">
                        <div class="plugin-banner clearfix">
                            <div class="plugin-slide text-center">
                                <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-239x1.png', {width: 512, height: 210}) }}');"></div>
                                <img load-image="239x1" data-final-src="{{plugin.iconUrl}}" crop-width="512" crop-height="210" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (1 * deviceWidth / 4)-12 + 'px' }">
                                <img load-image="239x1" data-final-src="../../../styles/media/holder-239x1.png" ng-if="plugin.iconClassName" />
                            </div>
                            <div class="info-bar blackBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                                <p class="margin-bottom-zero col-md-12 ellipsis whiteTheme">{{ plugin.title }}</p>
                            </div>
                            <div class="info-bar blackBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                                <p class="margin-bottom-zero col-md-12 ellipsis whiteTheme">{{ plugin.title }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Layout 7 -->
                <!-- Layout 8 -->
                <div class="media-center-plugin layout3" ng-if="data.design.selectedLayout == 8">
                    <div class=" list-layout">
                        <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                            <div class="list-item-media text-left overflow-hidden">
                                <div class="list-media-holder square-icon pull-left">
                                    <img load-image="1x1" data-final-src="{{plugin.iconUrl}}" crop-width="180" crop-height="180" crop-type="crop" ng-if="plugin.iconUrl" style="border-radius:50%;">
                                    <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                </div>
                                <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                    <p class="ellipsis margin-zero margin-top-twenty">{{ plugin.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Layout 8 -->
                <!-- Layout 9 -->
                <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 9">
                    <div class="plugin-banner clearfix">
                        <div class="plugin-banner clearfix">
                            <div class="plugin-slide text-center">
                                <div class="blackLayer"></div>
                                <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-16x9.png', {width: 640, height: 360}) }}');"></div>
                                <img load-image="16x9" data-final-src="{{plugin.iconUrl}}" crop-width="640" crop-height="360" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                                <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                                <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                                <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Layout 9 -->
                <!-- Layout 10 -->
                <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 10" style="margin-top:2px;">
                    <div class="plugin-banner clearfix">
                        <div class="plugin-slide text-center">
                            <div class="blackLayer"></div>
                            <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-4x1.png', {width: 640, height: 160}) }}');"></div>
                            <img load-image="4x1" data-final-src="{{plugin.iconUrl }}" crop-width="640" crop-height="160" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (1 * deviceWidth / 4)-12 + 'px' }" />
                            <img load-image="4x1" data-final-src="../../../styles/media/holder-4x1.png" ng-if="plugin.iconClassName" ng-style="{'min-height': (1 * deviceWidth / 4) + 'px' }" />
                            <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                            <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                        </div>
                    </div>
                </div>
                <!--End Layout 10 -->
                <!-- Layout 11 -->
                <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 11" class="col-md-4 col-sm-6 col-xs-6" style="padding:1px;">
                    <div class="item-block clearfix pull-left" style="padding:0 !important;">
                        <div class="text-center">
                            <div class="blackLayer"></div>
                            <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="400" crop-height="400" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-12 + 'px' }" />
                            <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                            <div class="text-holder">
                                <p class="item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                                <p class="item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Layout 11 -->
                <!-- Layout 12 -->
                <div class="holder padding-zero" style="height:100%;" ng-if="data.design.selectedLayout == 12">
                    <div class="folder-plugin layout12" style="height:100%;">
                        <div class="plugin-banner clearfix">
                            <div class="plugin-slider text-center" image-carousel="{{ layout12TotalItem}}">
                                <div class="plugin-slide" ng-repeat="rows in data.plugins">
                                    <div class="link-holder" ng-style="data.plugins.length>1 ? {'height': layout12Height}  : {} ">
                                        <p ng-repeat="plugin in rows" ng-click="navigateToPlugin(plugin)" class="ellipsis whiteTheme" emit-last-repeater-element>
                                            <a class="whiteTheme ellipsis">{{ plugin.title }}</a>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--End Layout 12 -->
            </div>
        </div>
    </div>
</body>
</html>