<!DOCTYPE html>
<html ng-app="folderPluginDesign">
<head lang="en">
    <title>design</title>
    <meta charset="UTF-8">
    <!-- CSS -->
    <link href="../../../../styles/helper.css" rel="stylesheet">
    <link href="../../../../styles/siteIcons.css" rel="stylesheet">
    <!-- JS -->
    <script src="../../../../scripts/buildfire.js"></script>
    <script src="../../../../scripts/angular/angular.min.js"></script>
    <script src="../app.services.js"></script>
    <script src="app.js"></script>
    <script src="design.controller.js"></script>
</head>
<body ng-controller="folderPluginCtrl" ng-cloak ng-show="datastoreInitialized">
    <div ng-form="frmMain">
        <div class="item row margin-bottom-twenty clearfix">
            <div class="labels col-md-3 padding-right-zero pull-left">
                <span>Layout Style</span>
            </div>
            <div class="main col-md-9 pull-right">
                <div class="screens clearfix">
                    <div class="screen layouticon pull-left">
                        <a class="border-radius-three default-background-hover text-center">
                            <img ng-src="{{ availableLayouts[data.design.selectedLayout - 1] }}">
                        </a>
                    </div>
                    <div class="screen layoutgrid pull-right margin-left-zero border-grey border-radius-three">
                        <a class="layouticon border-radius-three default-background-hover text-center" ng-repeat="layout in availableLayouts" data-number="{{$index + 1}}"
                           ng-click="changeLayout($index)">
                            <img ng-src="{{ layout }}">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="item clearfix row margin-bottom-twenty">
            <div class="labels col-md-3 padding-right-zero pull-left">
                <span>Background Image</span>
            </div>
            <div class="main col-md-9 pull-right">
                <div class="screens clearfix">
                    <div class="screen text-center layouticon pull-left">
                        <a class="border-grey border-radius-three default-background-hover" ng-click="changeBackground()">
                            <span class="add-icon">+</span>
                            <img ng-src="{{ resizeImage(data.design.backgroundImage) }}" alt="Background Image" ng-show="data.design.backgroundImage" />
                        </a>
                        <label class="secondary">750x1334</label>
                        <span class="icon btn-icon btn-delete-icon btn-danger transition-third" ng-click="deleteBackground()"></span>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <hr>
            <div class="item row clearfix">
                <div class="labels col-md-3 padding-right-zero pull-left">
                    <span>Hide Text</span>
                </div>
                <div class="main col-md-9 pull-right" ng-init="data.design.hideText">
                    <div class="radio radio-primary radio-inline">
                        <input ng-if="data.design.hideText" id="showText" type="radio" name="toggleText" ng-model="data.design.hideText" ng-value="false">
                        <input ng-if="!data.design.hideText" id="showText" type="radio" name="toggleText" checked="checked">
                        <label for="showText">False</label>
                    </div>
                    <div class="radio radio-primary radio-inline">
                        <input id="hideText" type="radio" name="toggleText" ng-model="data.design.hideText" ng-value="true">
                        <label for="hideText">True</label>
                    </div>
                    <p class="info margin-top-fifteen">Note: This will allow you to hide the text on specific layouts.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>