<!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="../../../scripts/angular/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-class="{ 'hidden': data.content.carouselImages.length == 0 }" class="plugin-banner clearfix" ng-hide="data.design.selectedLayout == 12">
                <div id="carousel" 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 class="main">
                <style>
                    #intercom-container {
                        display: none;
                    }

                    .main {
                        float: left;
                        margin: 0;
                        padding: 5px;
                        text-align: center;
                        width: 100%;
                    }


                        .main h1 {
                        }

                        .main button {
                            background: none;
                            border: solid 2px;
                            width: 100px;
                        }

                        .main input {
                            background: none;
                            border: none;
                            border-bottom: solid 2px;
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        .main select {
                            background: none;
                            border: none;
                            border-bottom: solid 2px;
                            -webkit-appearance: none;
                            margin: 0;
                        }

                        .main option {
                        }

                    #femalebtn {
                        text-align: center;
                        margin-left: 15px;
                    }
                </style>
                <h3 style="text-align:left; padding-left:10px;">Step One: Calculate Your Calorie Requirements</h3>
                <div class="step">
                    <h4>Gender</h4>
                    <button id="malebtn" ng-init="gendershow = 1" ng-click="gendershow = 1; calculatemealplan()"><img src="male.png" /></button>
                    <button id="femalebtn" ng-click="gendershow = 2; calculatemealplan()"><img src="female.png" /> </button><br /><br />
                    <div id="height">
                        <h4>Height</h4>
                        <input id="feet" ng-change="calculate()" ng-model="feet" type="number" style="width:50px;" value="5" /><span>Feet</span><input ng-model="inches" ng-change="calculate()" type="number" id="inches" style="width:50px; margin-left:5px;" value="8" /><span>Inches</span>
                    </div>
                    <h4>Weight</h4>
                    <input id="pounds" ng-change="calculate()" ng-model="pounds" type="number" style="width:100px;" value="185" /><span>Lbs</span>
                    <div id="age">
                        <h4>Age</h4>
                        <input id="years" ng-change="calculate()" ng-model="years" type="number" style="width:100px;" value="23" /><span>Years</span>
                    </div>
                    <div id="activity">
                        <h4>How active are you?</h4>
                        <select ng-model="selectEx" ng-change="calculatetdee()" ng-init="selectEx = x[0]" ng-options="x.active for x in exLvl"></select>
                    </div>
                </div>

                <div id="maleCalcSimple" class="firstCalc" ng-show="gendershow === 1">
                    <div style="border-bottom:2px solid white; padding-bottom:5px;">

                        <span style="font-size:20px;">Your BMR is: {{malebmr}}</span><br />
                        <span style="font-size:20px;">Your TDEE is: {{maletdee}}</span>
                    </div>

                    <div class="goals">
                        <h3 style="text-align:left">Step Two: Choose Goal</h3>
                        <button id="maleloss" ng-click="goal = 1">Fat Loss</button>
                        <button id="malemain" ng-click="goal = 2; calculatemealplan();">Maintain</button>
                        <button id="malegain" ng-click="goal = 3">Weight Gain</button>
                        <div class="loss" ng-show="goal === 1">

                            <h3>Choose Intensity</h3>
                            <button id="litlossclac" ng-click="lowlossCalc()"> Moderate   15%</button>
                            <button id="medlossclac" ng-click="medlossCalc()">Standard  20%</button>
                            <button id="biglossclac" ng-click="highlossCalc()">Intensive 25%</button>
                        </div>
                        <div class="gain" ng-show="goal === 3">

                            <h3>Choose Intensity</h3>
                            <button id="litgainclac" ng-click="lowgainCalc()">Moderate 5%</button>
                            <button id="medgainclac" ng-click="medgainCalc()">Standard 10%</button>
                            <button id="biggainclac" ng-click="highgainCalc()">Intensive 15%</button>
                        </div>
                        <p style="font-size:20px;">Daily Goal: {{dailyCal}} Calories</p>
                    </div>

                </div>
                <div id="femaleCalcSimple" class="firstCalc" ng-show="gendershow === 2">
                    <div style="border-bottom:2px solid white; padding-bottom:5px;">

                        <span style="font-size:20px;">Your BMR is: {{femalebmr}}</span><br />
                        <span style="font-size:20px;">Your TDEE is: {{femaletdee}}</span>
                    </div>
                    <div class="goals">
                        <h3 style="text-align:left">Step Two: Choose Goal</h3>
                        <button id="femaleloss" ng-click="goal = 1">Fat Loss</button>
                        <button id="femalemain" ng-click="goal = 2; calculatemealplan()">Maintain</button>
                        <button id="femalegain" ng-click="goal = 3">Weight Gain</button>
                        <div class="loss" ng-show="goal === 1">

                            <h3>Choose Intensity</h3>
                            <button id="felitlossclac" ng-click="lowlossCalc()">  Moderate  15%</button>
                            <button id="femedlossclac" ng-click="medlossCalc()">  Standard  20%</button>
                            <button id="febiglossclac" ng-click="highlossCalc()"> Intensive 25%</button>
                        </div>
                        <div class="gain" ng-show="goal === 3">

                            <h3>Choose Intensity</h3>
                            <button id="felitgainclac" ng-click="lowgainCalc()">  Moderate  5%</button>
                            <button id="femedgainclac" ng-click="medgainCalc()">  Standard  10%</button>
                            <button id="febiggainclac" ng-click="highgainCalc()"> Intensive 15%</button>
                        </div>
                        <p style="font-size:20px;">Daily Goal: {{dailyCal}} Calories</p>
                    </div>

                    <style>
                        .firstCalc {
                            float: left;
                            width: 100%;
                            margin-top: 20px;
                        }

                            .firstCalc table {
                                width: 100%;
                            }

                        .goals {
                            width: 100%;
                            float: left;
                            text-align: center;
                            border-bottom: 2px solid white;
                            padding-bottom: 5px;
                        }

                            .goals button {
                                width: 30%;
                                text-align: center;
                                margin: .75%;
                            }
                    </style>
                </div>
                <div class="dailyMeals">
                    <h3 style="text-align:left">Step Three: Macronutrient Breakdown</h3>
                    <div class="protiens">
                        <h3>Protein - 4 Calories per Gram</h3>
                        <button id="lowprotienmod" ng-click="protienmod = 0.7; finalCalc()">.7 g/lb</button>
                        <button id="medprotienmod" ng-click="protienmod = 0.8; finalCalc()">.8 g/lb</button>
                        <button id="higprotienmod" ng-click="protienmod = 0.9; finalCalc()">.9 g/lb</button>
                        <label>Set Custom: </label><input id="inputprotienmod" type="number" style="width:20%" ng-model="protienmod" ng-change=" finalCalc();" />

                    </div>
                    <div class="fats">
                        <h3>Fats - 9 Calories per Gram</h3>
                        <button id="lowfatmod" ng-click="fatmod = 0.30; finalCalc()">.30 g/lb</button>
                        <button id="medfatmod" ng-click="fatmod = 0.35; finalCalc()">.35 g/lb</button>
                        <button id="higfatmod" ng-click="fatmod = 0.40; finalCalc()">.40 g/lb</button>
                        <label>Set Custom: </label><input type="number" id="inputfatmod" style="width:20%" ng-model="fatmod" ng-change=" finalCalc();" />
                    </div>
                    <div class="carbs">
                        <h3>Carbohydrates - 4 Calories per Gram</h3>
                        <p>Carbs are calculated from the remaining calories after protiens and fats are subtracted from your TDEE.</p>
                    </div>
                    <div>
                        <h3>Daily Macronutrient Goals</h3>
                        <h4>{{dailyCal}} Calories</h4>
                        <h4>{{fats}}g Fats</h4>
                        <h4>{{carbs}}g Carbohydrates</h4>
                        <h4>{{protiens}}g Protien</h4>
                    </div>

                </div>
                <div class="meals">
                    <h3>How many meals per day?</h3>
                    <input style="margin-bottom:10px;" type="number" ng-change=" finalCalc()" ng-model="meals" /><br />

                    <table>
                        <thead>{{mealPlan}}</thead>
                        <tbody>
                            <tr>
                                <th></th>
                                <th>Carbs</th>
                                <th>Fats</th>
                                <th>Protiens</th>
                                <th>Calories</th>
                            </tr>
                            <tr>
                                <td>Daily</td>
                                <td>{{carbs}}</td>
                                <td>{{fats}}</td>
                                <td>{{protiens}}</td>
                                <td>{{dailyCal}}</td>
                            </tr>
                            <tr>
                                <td>Per Meal</td>
                                <td>{{mcarbs}}</td>
                                <td>{{mfats}}</td>
                                <td>{{mprotiens}}</td>
                                <td>{{mdailyCal}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <style>
                    .dailyMeals {
                        float: left;
                        text-align: center;
                        width: 100%;
                        border-bottom: 2px solid white;
                        padding-bottom: 5px;
                        margin-bottom: 5px;
                    }

                        .dailyMeals button {
                            width: 31%;
                            text-align: center;
                            margin: .75%;
                        }

                    .meals table {
                        width: 100%;
                    }
                </style>
            </div>
            <!--
        This is where the tabata ends

    -->

            <div 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-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>