Merge branch 'jon/design2' into oauth3

css/styles.css

@@ -632,3 +632,88 @@ h2.ssb-title {
 .folder-actions-list li {
   padding: 5px 0px;
 }
+
+
+
+multiselect {
+    display:block;
+}
+multiselect .btn {
+    width: 100%;
+    background-color: #FFF;
+}
+multiselect .btn.error{
+    border: 1px solid #da4f49 !important;
+}
+multiselect .dropdown-menu {
+    max-height: 300px;
+    overflow-y: auto;
+}
+multiselect .dropdown-menu {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 2px;
+}
+multiselect .dropdown-menu > li > a {
+    padding: 3px 10px;
+    cursor:pointer;
+}
+.icon-ok:before {
+  content: "\f00c";
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: inherit;
+  color: #000;
+  font-size: 14px;
+}
+.icon-remove:before {
+  content: "\f00d";
+  font-family: FontAwesome;
+  font-style: normal;
+  font-weight: normal;
+  text-decoration: inherit;
+  color: #000;
+  font-size: 14px;
+}
+
+.error-notice .oaerror {
+  width: 95%; /* Configure it fit in your design  */
+  margin: 0 auto; /* Centering Stuff */
+  background-color: #FFFFFF; /* Default background */
+  padding: 20px;
+  border: 1px solid #eee;
+  border-left-width: 5px;
+  border-radius: 3px;
+  margin: 0 auto;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 16px;
+}
+.error-notice .danger {
+  border-left-color: #d9534f; /* Left side border color */
+  background-color: rgba(217, 83, 79, 0.1); /* Same color as the left border with reduced alpha to 0.1 */
+}
+.error-notice .danger strong {
+  color:  #d9534f;
+}
+.error-notice .warning {
+  border-left-color: #f0ad4e;
+  background-color: rgba(240, 173, 78, 0.1);
+}
+.error-notice .warning strong {
+  color: #f0ad4e;
+}
+.error-notice .info {
+  border-left-color: #5bc0de;
+  background-color: rgba(91, 192, 222, 0.1);
+}
+.error-notice .info strong {
+  color: #5bc0de;
+}
+.error-notice .success {
+  border-left-color: #3c763d;
+  background-color: rgba(43, 84, 44, 0.1);
+}
+.error-notice .success strong {
+  color: #3c763d;
+}

index.html

@@ -34,6 +34,7 @@
     <script src="/js/lib/angular/angular-local-storage.js" charset="utf-8"></script>
     <script src="/js/lib/angular/angular-ui-router.min.js" charset="utf-8"></script>
     <script src="/js/lib/angular/angucomplete-alt.min.js" charset="utf-8"></script>
+    <script src="/js/lib/angular/multiselect-dropdown.js" charset="utf-8"></script>
     <script src="/js/lib/ez-file-tree/ez-file-tree.min.js" charset="utf-8"></script>
     <script src="/js/lib/ez-file-tree/ez-object2array.min.js" charset="utf-8"></script>
 

js/app.js

@@ -4,7 +4,7 @@
 var angular = window.angular;
 var OAUTH3 = window.OAUTH3;
 
-var app = window.app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule', 'angucomplete-alt', 'ez.fileTree']);
+var app = window.app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule', 'angucomplete-alt', 'ez.fileTree', 'ui.multiselect']);
 
 app.directive('daplieFileChange', function () {
   return {

js/controllers/website-controller.js

@@ -58,6 +58,14 @@ app.directive('fileTree', [function () {
   };
 }]);
 
+app.directive('notificationBar', [function () {
+  return {
+    restrict: 'EA',
+    templateUrl: '/templates/widgets/website-notification-bar.html',
+    controller: 'websiteCtrl as vm'
+  };
+}]);
+
 app.controller('websiteCtrl', [
   '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout', '$sce'
 , function ($scope, $q, Auth, Oauth3, $timeout, $sce) {
@@ -65,6 +73,10 @@ app.controller('websiteCtrl', [
   var vm = this;
   var angular = window.angular;
   vm.domains = [];
+  vm.displaySpinner = '';
+  vm.alertNotification = {
+    hidden: 'hidden'
+  };
   //vm.unzipPath = '/';
   vm.uploadPath = '/';
 
@@ -191,6 +203,8 @@ app.controller('websiteCtrl', [
     });
   };
   vm._uploadFile = function (pkg, opts) {
+    debugger;
+    vm.newFileUploaded = opts.newFile.name;
     opts.progress = opts.progress || opts;
     return pkg.add({
       hostname: opts.domain
@@ -210,8 +224,10 @@ app.controller('websiteCtrl', [
     , strip: opts.stripZip
     , path: opts.uploadPath
     }).then(function (result) {
+      var msg = vm.newFileUploaded + " has been uploaded"
       opts.progress.uploadTotal = 0;
-      window.alert(JSON.stringify(result));
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result));
     });
   };
 
@@ -355,7 +371,7 @@ app.controller('websiteCtrl', [
 
   vm.Sites.remove = function (r, opts) {
     var pkg = Auth.oauth3.pkg('www@daplie.com');
-
+    vm.pathRemoved = r.path || opts.path;
     return pkg.remove({
       hostname: r.domain
     , domain: r.domain
@@ -365,13 +381,15 @@ app.controller('websiteCtrl', [
     , path: opts.path || r.path
     , confirm: opts.confirm || r.confirm
     }).then(function (result) {
-      window.alert(JSON.stringify(result));
+      var msg = "'"+ vm.pathRemoved + "'" + ' has been removed';
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result));
     });
   };
 
   vm.deleteFilesFrom = function (r, path, opts) {
     var confirmMessage;
-    vm.autoPopulateWebPath;
+    // vm.autoPopulateWebPath;
     opts = {};
 
     if (path === undefined) {
@@ -424,7 +442,7 @@ app.controller('websiteCtrl', [
           vm.autoPopulateWebPath.push('/');
           vm.autoPopulateWebPath = vm.autoPopulateWebPath.join('');
         } else {
-          vm.currentFolder = "hidden"
+          vm.currentFolder = "hidden";
         }
         if (vm.breadcrumbPathClicked) {
           if (path === 'root') {
@@ -455,6 +473,7 @@ app.controller('websiteCtrl', [
         //, sub: r.sub,
         path: vm.breadcrumbsPath.join('/')
       }).then(function (result) {
+        vm.displaySpinner = 'hidden';
         vm.folderStructure = result;
         result.data.forEach(function(file) {
           if (file.directory) {
@@ -471,7 +490,7 @@ app.controller('websiteCtrl', [
   vm.cleanPath = function () {
     vm.savedPath = vm.autoPopulateWebPath;
     vm.autoPopulateWebPath = '';
-  }
+  };
 
   vm.showUploadButton = true;
   vm.showFolderAction = true;
@@ -479,20 +498,20 @@ app.controller('websiteCtrl', [
     if (vm.savedPath === undefined) {
       vm.savedPath = '/';
     }
-    vm.savedPath;
+    // vm.savedPath;
     vm.hideFolderInput = 'hidden';
     vm.showFileUploadBtn = true;
     r.uploadPath = vm.savedPath + vm.autoPopulateWebPath;
   };
 
   vm.autoPopulateFolderName = function () {
-    console.log('blah', vm.currentFolder);
     if (vm.currentFolder === 'hidden') {
-      vm.autoPopulateWebPath = '/'
+      vm.autoPopulateWebPath = '/';
-    }
     }
+  };
 
   vm.getDirectories = function (path) {
+    vm.displaySpinner = '';
     vm.siteDirectories = [];
     vm.siteFiles = [];
     var site = vm.siteResults;
@@ -518,11 +537,17 @@ app.controller('websiteCtrl', [
 
   vm.triggerDeleteFolder = function (folder, r) {
     console.log('DELETE FOLDER ->', folder);
-    vm.deleteFilesFrom(r, folder)
+    vm.deleteFilesFrom(r, folder);
-  }
+  };
 
   vm.Shares = {};
   vm.Shares.invite = function (r) {
+    if (vm.copiedShareMode === undefined) {
+      r.shareMode = '';
+    } else {
+      r.shareMode = vm.copiedShareMode;
+    }
+    r.sharePath = vm.autoPopulateWebPath;
     var pkg = Auth.oauth3.pkg('www@daplie.com');
     return pkg.invite({
       comment: r.shareEmail
@@ -537,7 +562,15 @@ app.controller('websiteCtrl', [
       var arr = r.sharedWith || [];
       arr.push(result.data);
       r.sharedWith = arr;
-      window.alert(JSON.stringify(result.data));
+      var msg;
+      var person = result.data.comment;
+      if (result.data.error) {
+        msg = result.data.error.message;
+      } else {
+        msg = 'shared with ' + person;
+      }
+      vm.buildNotification(result, msg);
+      // window.alert(JSON.stringify(result.data));
     });
   };
   vm.Shares.accept = function () {
@@ -559,6 +592,7 @@ app.controller('websiteCtrl', [
     //, sub: r.sub
     , path: r.sharePath
     }).then(function (result) {
+      vm.displaySpinner = 'hidden';
       console.log('list shares result:');
       console.log(result);
       r.sharedWith = result.data;
@@ -577,6 +611,9 @@ app.controller('websiteCtrl', [
     , path: s.sharePath
     , challenge: s.challenge
     }).then(function (result) {
+      var person = result.data.comment;
+      var msg = "revoked access from " + person;
+      vm.buildNotification(result, msg);
       console.log('remove share result:');
       console.log(result);
       var index;
@@ -652,6 +689,22 @@ app.controller('websiteCtrl', [
     }
   });
 
+  $scope.$watch('selectedAccess', function (selectedAccess) {
+    if (selectedAccess.length !== 0) {
+      vm.accessLevelArry = [];
+      vm.prettyAccessArray = [];
+      selectedAccess.forEach(function(letter) {
+        vm.prettyAccessArray.push(letter.name);
+        vm.accessLevelArry.push(letter.value);
+      });
+      vm.prettyShareMode = vm.prettyAccessArray.join(", ");
+      vm.copiedShareMode = vm.accessLevelArry.join(",");
+    }
+  });
+
+  $scope.selectedAccess = [];
+  $scope.accessLevel = [{ name: 'Read', value: 'r' }, { name: 'Write', value: 'w' }, { name: 'Invite', value: 'x' }];
+
   $scope.localDomainSearch = function(str, domain) {
     var matches = [];
     domain.forEach(function(domain) {
@@ -687,6 +740,26 @@ app.controller('websiteCtrl', [
     }
   };
 
+  vm.buildNotification = function (result, msg) {
+    console.log('THE RESULT ->', result);
+    console.log('THE MSG', msg);
+    if (result.data.error) {
+      vm.alertNotification = {
+        className: 'danger',
+        title: 'Error',
+        hidden: '',
+        message: msg
+      };
+    } else {
+      vm.alertNotification = {
+        className: 'success',
+        title: 'Success',
+        hidden: '',
+        message: msg
+      };
+    }
+  };
+
   vm.closeAllOpenActions = function () {
     $timeout(function() {
       vm.showInviteContainer = false;
@@ -695,6 +768,7 @@ app.controller('websiteCtrl', [
       vm.displayFileTree = false;
       vm.websiteTiles = false;
       vm.showBackBtn = false;
+      vm.autoPopulateWebPath = '';
     }, 150);
   };
 }]);
@@ -744,5 +818,5 @@ app.filter('stringify', function() {
 app.filter('capitalize', function() {
     return function(input) {
       return (!!input) ? input.charAt(0).toUpperCase() + input.substr(1).toLowerCase() : '';
-    }
+    };
 });

js/lib/angular/multiselect-dropdown.js

@@ -0,0 +1,262 @@
+angular.module('ui.multiselect', [])
+
+//from bootstrap-ui typeahead parser
+.factory('optionParser', ['$parse', function ($parse) {
+
+  var TYPEAHEAD_REGEXP = /^\s*(.*?)(?:\s+as\s+(.*?))?\s+for\s+(?:([\$\w][\$\w\d]*))\s+in\s+(.*)$/;
+
+  return {
+    parse: function (input) {
+
+      var match = input.match(TYPEAHEAD_REGEXP), modelMapper, viewMapper, source;
+      if (!match) {
+        throw new Error(
+          "Expected typeahead specification in form of '_modelValue_ (as _label_)? for _item_ in _collection_'" +
+          " but got '" + input + "'.");
+        }
+
+        return {
+          itemName: match[3],
+          source: $parse(match[4]),
+          viewMapper: $parse(match[2] || match[1]),
+          modelMapper: $parse(match[1])
+        };
+      }
+    };
+  }])
+
+  .directive('multiselect', ['$parse', '$document', '$compile', 'optionParser',
+
+  function ($parse, $document, $compile, optionParser) {
+    return {
+      restrict: 'E',
+      require: 'ngModel',
+      link: function (originalScope, element, attrs, modelCtrl) {
+
+        var exp = attrs.options,
+        parsedResult = optionParser.parse(exp),
+        isMultiple = attrs.multiple ? true : false,
+        required = false,
+        scope = originalScope.$new(),
+        changeHandler = attrs.change || anguler.noop;
+
+        scope.items = [];
+        scope.header = 'Select';
+        scope.multiple = isMultiple;
+        scope.disabled = false;
+
+        originalScope.$on('$destroy', function () {
+          scope.$destroy();
+        });
+
+        var popUpEl = angular.element('<multiselect-popup></multiselect-popup>');
+
+        //required validator
+        if (attrs.required || attrs.ngRequired) {
+          required = true;
+        }
+        attrs.$observe('required', function(newVal) {
+          required = newVal;
+        });
+
+        //watch disabled state
+        scope.$watch(function () {
+          return $parse(attrs.disabled)(originalScope);
+        }, function (newVal) {
+          scope.disabled = newVal;
+        });
+
+        //watch single/multiple state for dynamically change single to multiple
+        scope.$watch(function () {
+          return $parse(attrs.multiple)(originalScope);
+        }, function (newVal) {
+          isMultiple = newVal || false;
+        });
+
+        //watch option changes for options that are populated dynamically
+        scope.$watch(function () {
+          return parsedResult.source(originalScope);
+        }, function (newVal) {
+          if (angular.isDefined(newVal))
+          parseModel();
+        });
+
+        //watch model change
+        scope.$watch(function () {
+          return modelCtrl.$modelValue;
+        }, function (newVal, oldVal) {
+          //when directive initialize, newVal usually undefined. Also, if model value already set in the controller
+          //for preselected list then we need to mark checked in our scope item. But we don't want to do this every time
+          //model changes. We need to do this only if it is done outside directive scope, from controller, for example.
+          if (angular.isDefined(newVal)) {
+            markChecked(newVal);
+            scope.$eval(changeHandler);
+          }
+          getHeaderText();
+          modelCtrl.$setValidity('required', scope.valid());
+        }, true);
+
+        function parseModel() {
+          scope.items.length = 0;
+          var model = parsedResult.source(originalScope);
+          for (var i = 0; i < model.length; i++) {
+            var local = {};
+            local[parsedResult.itemName] = model[i];
+            scope.items.push({
+              label: parsedResult.viewMapper(local),
+              model: model[i],
+              checked: false
+            });
+          }
+        }
+
+        parseModel();
+
+        element.append($compile(popUpEl)(scope));
+
+        function getHeaderText() {
+          var edit = "edit";
+          if (!modelCtrl.$modelValue || !modelCtrl.$modelValue.length) return scope.header = 'Can ' + edit;
+          if (isMultiple) {
+            edit = '';
+            var accessLevelArray = [];
+            modelCtrl.$modelValue.forEach(function(level) {
+              accessLevelArray.push(level.name);
+            });
+            scope.header = "Can " + accessLevelArray.join(', ');
+          } else {
+            var local = {};
+            local[parsedResult.itemName] = modelCtrl.$modelValue;
+            scope.header = parsedResult.viewMapper(local);
+          }
+        }
+
+        scope.valid = function validModel() {
+          if(!required) return true;
+          var value = modelCtrl.$modelValue;
+          return (angular.isArray(value) && value.length > 0) || (!angular.isArray(value) && value != null);
+        };
+
+        function selectSingle(item) {
+          if (item.checked) {
+            scope.uncheckAll();
+          } else {
+            scope.uncheckAll();
+            item.checked = !item.checked;
+          }
+          setModelValue(false);
+        }
+
+        function selectMultiple(item) {
+          item.checked = !item.checked;
+          setModelValue(true);
+        }
+
+        function setModelValue(isMultiple) {
+          var value;
+
+          if (isMultiple) {
+            value = [];
+            angular.forEach(scope.items, function (item) {
+              if (item.checked) value.push(item.model);
+            });
+          } else {
+            angular.forEach(scope.items, function (item) {
+              if (item.checked) {
+                value = item.model;
+                return false;
+              }
+            });
+          }
+          modelCtrl.$setViewValue(value);
+        }
+
+        function markChecked(newVal) {
+          if (!angular.isArray(newVal)) {
+            angular.forEach(scope.items, function (item) {
+              if (angular.equals(item.model, newVal)) {
+                item.checked = true;
+                return false;
+              }
+            });
+          } else {
+            angular.forEach(newVal, function (i) {
+              angular.forEach(scope.items, function (item) {
+                if (angular.equals(item.model, i)) {
+                  item.checked = true;
+                }
+              });
+            });
+          }
+        }
+
+        scope.checkAll = function () {
+          if (!isMultiple) return;
+          angular.forEach(scope.items, function (item) {
+            item.checked = true;
+          });
+          setModelValue(true);
+        };
+
+        scope.uncheckAll = function () {
+          angular.forEach(scope.items, function (item) {
+            item.checked = false;
+          });
+          setModelValue(true);
+        };
+
+        scope.select = function (item) {
+          if (isMultiple === false) {
+            selectSingle(item);
+            scope.toggleSelect();
+          } else {
+            selectMultiple(item);
+          }
+        };
+      }
+    };
+  }])
+
+  .directive('multiselectPopup', ['$document', function ($document) {
+    return {
+      restrict: 'E',
+      scope: false,
+      replace: true,
+      templateUrl: 'templates/widgets/share-access-multiselect.html',
+      link: function (scope, element, attrs) {
+
+        scope.isVisible = false;
+
+        scope.toggleSelect = function () {
+          if (element.hasClass('open')) {
+            element.removeClass('open');
+            $document.unbind('click', clickHandler);
+          } else {
+            element.addClass('open');
+            scope.focus();
+            $document.bind('click', clickHandler);
+          }
+        };
+
+        function clickHandler(event) {
+          if (elementMatchesAnyInArray(event.target, element.find(event.target.tagName)))
+          return;
+          element.removeClass('open');
+          $document.unbind('click', clickHandler);
+          scope.$digest();
+        }
+
+        scope.focus = function focus(){
+          var searchBox = element.find('input')[0];
+          searchBox.focus();
+        };
+
+        var elementMatchesAnyInArray = function (element, elementArray) {
+          for (var i = 0; i < elementArray.length; i++)
+          if (element == elementArray[i])
+          return true;
+          return false;
+        };
+      }
+    };
+  }]);

templates/website.html

@@ -135,6 +135,7 @@
           <h4 class="modal-title"><a ng-href="https://{{ r.domain }}" target="_blank" ng-bind="r.urlSafeDomain">example.com</a></h4>
         </div>
         <div class="modal-body">
+          <notification-bar></notification-bar>
           <div class="website-menu container" ng-hide="vm.websiteTiles">
             <div class="row">
               <div class="col-md-3">
@@ -191,22 +192,27 @@
           </div>
           <div ng-show="vm.showInviteContainer">
             <h1><i class="fa fa-folder"></i> Name</h1>
-            <form class="">
+            <form class="form-horizontal">
+
               <div class="form-group">
-                <label for="">To:</label>
+                <label class="col-md-1 control-label" for="">To:</label>
+                <div class="col-md-10">
                   <input type="text" ng-model="r.shareEmail" class="form-control" placeholder="ex: john@example.com" />
+                  <input type="hidden" ng-model="vm.autoPopulateWebPath" class="form-control" placeholder="/" disabled />
                 </div>
-              <div class="form-group">
-                <!-- WORKING <input type="text" ng-model="r.sharePath" class="form-control" placeholder="/" /> -->
-                <input type="text" ng-model="vm.autoPopulateWebPath" class="form-control" placeholder="/" />
-              </div>
-              <div class="form-group">
-                <input type="text" ng-model="r.shareMode" class="form-control" placeholder="rwx (read, write, invite)" />
               </div>
+              <multiselect class="input-xlarge" multiple="true"
+                  ng-model="selectedAccess"
+                  options="c.name for c in accessLevel"
+                  change="selected()">
+              </multiselect>
               <button type="submit" class="btn btn-success" ng-click="vm.Shares.invite(r)">Invite</button>
             </form>
           </div>
           <div ng-show="vm.showSharesContainer">
+            <div class="text-center {{ vm.displaySpinner }}">
+              <i class="fa fa-spinner fa-spin fa-5x"></i>
+            </div>
             <span class="text-muted" ng-if="r.sharedWith.length === 1">Currently not shared with anyone...</span>
             <ul class="shares-container" ng-repeat="share in r.sharedWith" ng-if="!share.me">
               <li>
@@ -217,7 +223,7 @@
                   <div class="media-body">
                     <h4 ng-bind="share.comment">friend@email.com</h4>
                     <p><b>Share Path:</b> <span ng-bind="share.path" class="text-muted">/</span></p>
-                    <p><b>Actions Allowed:</b> <span ng-bind="share.mode" class="text-muted">rwx</span></p>
+                    <p><b>Actions Allowed:</b> <span class="text-muted">{{ vm.prettyShareMode }}</span></p>
                     <p><b>Invite:</b> <em ng-if="share.pending" class="text-muted">pending</em></p>
                   </div>
                   <div class="media-right align-self-center">

templates/widgets/filetree.html

@@ -8,6 +8,9 @@
   </div>
   <div class="row">
     <div class="col-lg-6">
+      <div class="text-center {{ vm.displaySpinner }}">
+        <i class="fa fa-spinner fa-spin fa-5x"></i>
+      </div>
       <ul class="tree ls-none">
         <li class="directories-go-here" ng-repeat="directory in vm.siteDirectories track by $index">
           <input type="checkbox" id="{{ r.challenge }}{{ $index }}" />
@@ -68,7 +71,12 @@
       </div>
     </div>
     <div class="col-lg-6">
-      <pre style="font-size: 10px;">{{ vm.folderStructure | stringify }}</pre>
+      <pre style="font-size: 10px;">
+        <div class="text-center {{ vm.displaySpinner }}">
+          <i class="fa fa-spinner fa-spin fa-5x"></i>
+        </div>
+        {{ vm.folderStructure | stringify }}
+      </pre>
     </div>
   </div>
   <div class="row">

templates/widgets/share-access-multiselect.html

@@ -0,0 +1,20 @@
+<div class="dropdown">
+  <button class="btn" ng-click="toggleSelect()" ng-disabled="disabled" ng-class="{ 'error': !valid() }">
+    <span class="pull-left">{{ header }}</span>
+    <span class="caret pull-right"></span>
+  </button>
+  <ul class="dropdown-menu">
+    <li class="hidden">
+      <input class="input-block-level" type="text" ng-model="searchText.label" autofocus="autofocus" placeholder="Filter" />
+    </li>
+    <li ng-show="multiple" class="">
+      <button class="btn-link btn-small" ng-click="checkAll()"><i class="icon-ok"></i> Check all</button>
+      <button class="btn-link btn-small" ng-click="uncheckAll()"><i class="icon-remove"></i> Uncheck all</button>
+    </li>
+    <li role="separator" class="divider"></li>
+    <li ng-repeat="i in items | filter:searchText">
+      <a ng-click="select(i); focus()">
+        <i ng-class="{ 'icon-ok': i.checked, 'icon-empty': !i.checked }"></i> {{ i.label }}</a>
+    </li>
+  </ul>
+</div>

templates/widgets/website-notification-bar.html

@@ -0,0 +1,6 @@
+<div class="error-notice">
+  <div class="oaerror {{ vm.alertNotification.className }} {{ vm.alertNotification.hidden }}">
+    <strong>{{ vm.alertNotification.title }}</strong> - {{ vm.alertNotification.message }}
+    <button type="button" class="close" ng-click="vm.alertNotification.hidden = 'hidden'"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+  </div>
+</div>