From 8171943b8ebdc7546aba50c4c1325c729d02ada9 Mon Sep 17 00:00:00 2001
From: Jonathan Rehm <jonathan@rehm.me>
Date: Sat, 12 Aug 2017 22:24:56 -0700
Subject: [PATCH] Update to ES5 standards

Also fix ESLint issues
---
 .eslintrc                    |   3 +-
 cps/static/js/details.js     |  79 ++++++++++++--------
 cps/static/js/edit_books.js  | 136 ++++++++++++++++++-----------------
 cps/static/js/get_meta.js    |  36 ++++------
 cps/static/js/main.js        | 112 +++++++++++++++--------------
 cps/static/js/shelforder.js  |  30 ++++----
 cps/templates/book_edit.html |   2 +-
 cps/templates/detail.html    |  12 ++++
 8 files changed, 220 insertions(+), 190 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 17ae1f3f..eb405572 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,7 +1,6 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
     "jquery": true
   },
   "globals": {
@@ -83,6 +82,8 @@
       2,
       "always"
     ],
+    "space-before-blocks": 2,
+    "space-infix-ops": 2,
     "space-unary-ops": 2,
     "use-isnan": 2,
     "valid-typeof": 2,
diff --git a/cps/static/js/details.js b/cps/static/js/details.js
index 74dbb08e..33335339 100644
--- a/cps/static/js/details.js
+++ b/cps/static/js/details.js
@@ -1,4 +1,6 @@
-$( document ).ready(function() {
+/* global _ */
+
+$(function() {
     $("#have_read_form").ajaxForm();
 });
 
@@ -6,34 +8,51 @@ $("#have_read_cb").on("change", function() {
     $(this).closest("form").submit();
 });
 
-$("#shelf-actions").on("click", "[data-shelf-action]", function (e) {
-    e.preventDefault();
+(function() {
+    var templates = {
+        add: _.template(
+            $("#template-shelf-add").html()
+        ),
+        remove: _.template(
+            $("#template-shelf-remove").html()
+        )
+    };
 
-    $.get(this.href)
-        .done(() => {
-            const $this = $(this);
-            switch ($this.data("shelf-action")) {
-                case "add":
-                    $("#remove-from-shelves").append(`<a href="${$this.data("remove-href")}"
-                       data-add-href="${this.href}"
-                       class="btn btn-sm btn-default" data-shelf-action="remove"
-                    ><span class="glyphicon glyphicon-remove"></span> ${this.textContent}</a>`);
-                    break;
-                case "remove":
-                    $("#add-to-shelves").append(`<li><a href="${$this.data("add-href")}"
-                      data-remove-href="${this.href}"
-                      data-shelf-action="add"
-                    >${this.textContent}</a></li>`);
-                    break;
-            }
-            this.parentNode.removeChild(this);
-        })
-        .fail((xhr) => {
-            const $msg = $("<span/>", { "class": "text-danger"}).text(xhr.responseText);
-            $("#shelf-action-status").html($msg);
+    $("#shelf-actions").on("click", "[data-shelf-action]", function (e) {
+        e.preventDefault();
 
-            setTimeout(() => {
-                $msg.remove();
-            }, 10000);
-        });
-});
\ No newline at end of file
+        $.get(this.href)
+            .done(function() {
+                var $this = $(this);
+                switch ($this.data("shelf-action")) {
+                    case "add":
+                        $("#remove-from-shelves").append(
+                            templates.remove({
+                                add: this.href,
+                                remove: $this.data("remove-href"),
+                                content: this.textContent
+                            })
+                        );
+                        break;
+                    case "remove":
+                        $("#add-to-shelves").append(
+                            templates.add({
+                                add: $this.data("add-href"),
+                                remove: this.href,
+                                content: this.textContent
+                            })
+                        );
+                        break;
+                }
+                this.parentNode.removeChild(this);
+            }.bind(this))
+            .fail(function(xhr) {
+                var $msg = $("<span/>", { "class": "text-danger"}).text(xhr.responseText);
+                $("#shelf-action-status").html($msg);
+
+                setTimeout(function() {
+                    $msg.remove();
+                }, 10000);
+            });
+    });
+})();
diff --git a/cps/static/js/edit_books.js b/cps/static/js/edit_books.js
index 5438e7b0..bb9e1040 100644
--- a/cps/static/js/edit_books.js
+++ b/cps/static/js/edit_books.js
@@ -32,7 +32,7 @@ Takes a prefix, query typeahead callback, Bloodhound typeahead adapter
  and returns the completions it gets from the bloodhound engine prefixed.
  */
 function prefixedSource(prefix, query, cb, bhAdapter) {
-    bhAdapter(query, function(retArray){
+    bhAdapter(query, function(retArray) {
         var matches = [];
         for (var i = 0; i < retArray.length; i++) {
             var obj = {name : prefix + retArray[i].name};
@@ -41,7 +41,7 @@ function prefixedSource(prefix, query, cb, bhAdapter) {
         cb(matches);
     });
 }
-function getPath(){
+function getPath() {
     var jsFileLocation = $("script[src*=edit_books]").attr("src");  // the js file path
     jsFileLocation = jsFileLocation.replace("/static/js/edit_books.js", "");   // the js folder path
     return jsFileLocation;
@@ -49,7 +49,7 @@ function getPath(){
 
 var authors = new Bloodhound({
     name: "authors",
-    datumTokenizer(datum) {
+    datumTokenizer: function datumTokenizer(datum) {
         return [datum.name];
     },
     queryTokenizer: Bloodhound.tokenizers.whitespace,
@@ -60,15 +60,15 @@ var authors = new Bloodhound({
 
 var series = new Bloodhound({
     name: "series",
-    datumTokenizer(datum) {
+    datumTokenizer: function datumTokenizer(datum) {
         return [datum.name];
     },
-    queryTokenizer(query) {
+    queryTokenizer: function queryTokenizer(query) {
         return [query];
     },
     remote: {
         url: getPath()+"/get_series_json?q=",
-        replace(url, query) {
+        replace: function replace(url, query) {
             return url+encodeURIComponent(query);
         }
     }
@@ -77,10 +77,10 @@ var series = new Bloodhound({
 
 var tags = new Bloodhound({
     name: "tags",
-    datumTokenizer(datum) {
+    datumTokenizer: function datumTokenizer(datum) {
         return [datum.name];
     },
-    queryTokenizer(query) {
+    queryTokenizer: function queryTokenizer(query) {
         var tokens = query.split(",");
         tokens = [tokens[tokens.length-1].trim()];
         return tokens;
@@ -92,15 +92,15 @@ var tags = new Bloodhound({
 
 var languages = new Bloodhound({
     name: "languages",
-    datumTokenizer(datum) {
+    datumTokenizer: function datumTokenizer(datum) {
         return [datum.name];
     },
-    queryTokenizer(query) {
+    queryTokenizer: function queryTokenizer(query) {
         return [query];
     },
     remote: {
         url: getPath()+"/get_languages_json?q=",
-        replace(url, query) {
+        replace: function replace(url, query) {
             return url+encodeURIComponent(query);
         }
     }
@@ -115,9 +115,9 @@ function sourceSplit(query, cb, split, source) {
     tokens.splice(tokens.length-1, 1); // remove last element
     var prefix = "";
     var newSplit;
-    if (split === "&"){
+    if (split === "&") {
         newSplit = " " + split + " ";
-    }else{
+    } else {
         newSplit = split + " ";
     }
     for (var i = 0; i < tokens.length; i++) {
@@ -127,76 +127,78 @@ function sourceSplit(query, cb, split, source) {
 }
 
 var promiseAuthors = authors.initialize();
-    promiseAuthors.done(function(){
+promiseAuthors.done(function() {
     $("#bookAuthor").typeahead(
-            {
-                highlight: true, minLength: 1,
-                hint: true
-            }, {
-                name: "authors",
-                displayKey: "name",
-                source(query, cb){
-                    return sourceSplit(query, cb, "&", authors); //sourceSplit //("&")
+        {
+            highlight: true, minLength: 1,
+            hint: true
+        }, {
+            name: "authors",
+            displayKey: "name",
+            source: function source(query, cb) {
+                return sourceSplit(query, cb, "&", authors); //sourceSplit //("&")
             }
-    });
+        }
+    );
 });
 
 var promiseSeries = series.initialize();
-    promiseSeries.done(function(){
+promiseSeries.done(function() {
     $("#series").typeahead(
-            {
-                highlight: true, minLength: 0,
-                hint: true
-            }, {
-                name: "series",
-                displayKey: "name",
-                source: series.ttAdapter()
-            }
+        {
+            highlight: true, minLength: 0,
+            hint: true
+        }, {
+            name: "series",
+            displayKey: "name",
+            source: series.ttAdapter()
+        }
     );
 });
 
 var promiseTags = tags.initialize();
-    promiseTags.done(function(){
+promiseTags.done(function() {
     $("#tags").typeahead(
-            {
-                highlight: true, minLength: 0,
-                hint: true
-            }, {
-                name: "tags",
-                displayKey: "name",
-                source(query, cb){
-                    return sourceSplit(query, cb, ",", tags);
-                }
-            });
-    });
+        {
+            highlight: true, minLength: 0,
+            hint: true
+        }, {
+            name: "tags",
+            displayKey: "name",
+            source: function source(query, cb) {
+                return sourceSplit(query, cb, ",", tags);
+            }
+        }
+    );
+});
 
 var promiseLanguages = languages.initialize();
-    promiseLanguages.done(function(){
+promiseLanguages.done(function() {
     $("#languages").typeahead(
-            {
-                highlight: true, minLength: 0,
-                hint: true
-            }, {
-                name: "languages",
-                displayKey: "name",
-                source(query, cb){
-                    return sourceSplit(query, cb, ",", languages); //(",")
-                }
-            });
-    });
+        {
+            highlight: true, minLength: 0,
+            hint: true
+        }, {
+            name: "languages",
+            displayKey: "name",
+            source: function source(query, cb) {
+                return sourceSplit(query, cb, ",", languages); //(",")
+            }
+        }
+    );
+});
 
-$("#search").on("change input.typeahead:selected", function(){
+$("#search").on("change input.typeahead:selected", function() {
     var form = $("form").serialize();
     $.getJSON( getPath()+"/get_matching_tags", form, function( data ) {
-      $(".tags_click").each(function() {
-        if ($.inArray(parseInt($(this).children("input").first().val(), 10), data.tags) === -1 ) {
-          if (!($(this).hasClass("active"))) {
-            $(this).addClass("disabled");
-          }
-        }
-        else {
-          $(this).removeClass("disabled");
-        }
-      });
+        $(".tags_click").each(function() {
+            if ($.inArray(parseInt($(this).children("input").first().val(), 10), data.tags) === -1 ) {
+                if (!($(this).hasClass("active"))) {
+                    $(this).addClass("disabled");
+                }
+            } else {
+                $(this).removeClass("disabled");
+            }
+        });
     });
 });
diff --git a/cps/static/js/get_meta.js b/cps/static/js/get_meta.js
index 829c36b1..c4b552b3 100644
--- a/cps/static/js/get_meta.js
+++ b/cps/static/js/get_meta.js
@@ -8,7 +8,7 @@
 var dbResults = [];
 var ggResults = [];
 
-$(document).ready(function () {
+$(function () {
     var msg = i18nMsg;
     var douban = "https://api.douban.com";
     var dbSearch = "/v2/book/search";
@@ -22,9 +22,6 @@ $(document).ready(function () {
     var ggDone = false;
 
     var showFlag = 0;
-    String.prototype.replaceAll = function (s1, s2) {
-        return this.replace(new RegExp(s1, "gm"), s2);
-    };
 
     function showResult () {
         var book;
@@ -32,11 +29,11 @@ $(document).ready(function () {
         var bookHtml;
         showFlag++;
         if (showFlag === 1) {
-            $("#metaModal #meta-info").html("<ul id=\"book-list\" class=\"media-list\"></ul>");
+            $("#meta-info").html("<ul id=\"book-list\" class=\"media-list\"></ul>");
         }
         if (ggDone && dbDone) {
             if (!ggResults && !dbResults) {
-                $("#metaModal #meta-info").html("<p class=\"text-danger\">"+ msg.no_result +"</p>");
+                $("#meta-info").html("<p class=\"text-danger\">"+ msg.no_result +"</p>");
                 return;
             }
         }
@@ -62,7 +59,7 @@ $(document).ready(function () {
                     "<p>"+ msg.source + ":<a href=\"https://books.google.com\" target=\"_blank\">Google Books</a></p>" +
                     "</div>" +
                     "</li>";
-                $("#metaModal #book-list").append(bookHtml);
+                $("#book-list").append(bookHtml);
             }
             ggDone = false;
         }
@@ -82,24 +79,22 @@ $(document).ready(function () {
                     "<p>" + msg.source + ":<a href=\"https://book.douban.com\" target=\"_blank\">Douban Books</a></p>" +
                     "</div>" +
                     "</li>";
-                $("#metaModal #book-list").append(bookHtml);
+                $("#book-list").append(bookHtml);
             }
             dbDone = false;
         }
     }
 
     function ggSearchBook (title) {
-        title = title.replaceAll(/\s+/, "+");
-        var url = google + ggSearch + "?q=" + title;
         $.ajax({
-            url,
+            url: google + ggSearch + "?q=" + title.replace(/\s+/gm, "+"),
             type: "GET",
             dataType: "jsonp",
             jsonp: "callback",
-            success (data) {
+            success: function success(data) {
                 ggResults = data.items;
             },
-            complete () {
+            complete: function complete() {
                 ggDone = true;
                 showResult();
             }
@@ -107,19 +102,18 @@ $(document).ready(function () {
     }
 
     function dbSearchBook (title) {
-        var url = douban + dbSearch + "?q=" + title + "&fields=all&count=10";
         $.ajax({
-            url,
+            url: douban + dbSearch + "?q=" + title + "&fields=all&count=10",
             type: "GET",
             dataType: "jsonp",
             jsonp: "callback",
-            success (data) {
+            success: function success(data) {
                 dbResults = data.books;
             },
-            error () {
-                $("#metaModal #meta-info").html("<p class=\"text-danger\">"+ msg.search_error+"!</p>");
+            error: function error() {
+                $("#meta-info").html("<p class=\"text-danger\">"+ msg.search_error+"!</p>");
             },
-            complete () {
+            complete: function complete() {
                 dbDone = true;
                 showResult();
             }
@@ -128,7 +122,7 @@ $(document).ready(function () {
 
     function doSearch (keyword) {
         showFlag = 0;
-        $("#metaModal #meta-info").text(msg.loading);
+        $("#meta-info").text(msg.loading);
         // var keyword = $("#keyword").val();
         if (keyword) {
             dbSearchBook(keyword);
@@ -153,6 +147,7 @@ $(document).ready(function () {
 
 });
 
+// eslint-disable-next-line no-unused-vars
 function getMeta (source, id) {
     var meta;
     var tags;
@@ -181,6 +176,5 @@ function getMeta (source, id) {
         }
         $("#tags").val(tags);
         $("#rating").val(Math.round(meta.rating.average / 2));
-        return;
     }
 }
diff --git a/cps/static/js/main.js b/cps/static/js/main.js
index 7b7402b2..267c6d97 100644
--- a/cps/static/js/main.js
+++ b/cps/static/js/main.js
@@ -1,7 +1,3 @@
-var displaytext;
-var updateTimerID;
-var updateText;
-
 // Generic control/related handler to show/hide fields based on a checkbox' value
 // e.g.
 //  <input type="checkbox" data-control="stuff-to-show">
@@ -11,16 +7,18 @@ $(document).on("change", "input[type=\"checkbox\"][data-control]", function () {
     var name = $this.data("control");
     var showOrHide = $this.prop("checked");
 
-    $("[data-related=\""+name+"\"]").each(function () {
+    $("[data-related=\"" + name + "\"]").each(function () {
         $(this).toggle(showOrHide);
     });
 });
 
 $(function() {
+    var updateTimerID;
+    var updateText;
 
     // Allow ajax prefilters to be added/removed dynamically
     // eslint-disable-next-line new-cap
-    const preFilters = $.Callbacks();
+    var preFilters = $.Callbacks();
     $.ajaxPrefilter(preFilters.fire);
 
     function restartTimer() {
@@ -30,29 +28,29 @@ $(function() {
 
     function updateTimer() {
         $.ajax({
-        dataType: "json",
-        url: window.location.pathname+"/../../get_updater_status",
-        success(data) {
-            // console.log(data.status);
-            $("#UpdateprogressDialog #Updatecontent").html(updateText[data.status]);
-            if (data.status >6){
+            dataType: "json",
+            url: window.location.pathname + "/../../get_updater_status",
+            success: function success(data) {
+                // console.log(data.status);
+                $("#Updatecontent").html(updateText[data.status]);
+                if (data.status > 6) {
+                    clearInterval(updateTimerID);
+                    $("#spinner2").hide();
+                    $("#updateFinished").removeClass("hidden");
+                    $("#check_for_update").removeClass("hidden");
+                    $("#perform_update").addClass("hidden");
+                }
+            },
+            error: function error() {
+                // console.log('Done');
                 clearInterval(updateTimerID);
                 $("#spinner2").hide();
-                $("#UpdateprogressDialog #updateFinished").removeClass("hidden");
+                $("#Updatecontent").html(updateText[7]);
+                $("#updateFinished").removeClass("hidden");
                 $("#check_for_update").removeClass("hidden");
                 $("#perform_update").addClass("hidden");
-            }
-        },
-        error() {
-            // console.log('Done');
-            clearInterval(updateTimerID);
-            $("#spinner2").hide();
-            $("#UpdateprogressDialog #Updatecontent").html(updateText[7]);
-            $("#UpdateprogressDialog #updateFinished").removeClass("hidden");
-            $("#check_for_update").removeClass("hidden");
-            $("#perform_update").addClass("hidden");
             },
-        timeout:2000
+            timeout: 2000
         });
     }
 
@@ -70,13 +68,13 @@ $(function() {
                    // selector for the NEXT link (to page 2)
         itemSelector : ".load-more .book",
         animate      : true,
-        extraScrollPx: 300,
+        extraScrollPx: 300
                    // selector for all items you'll retrieve
-    }, function(data){
+    }, function(data) {
         $(".load-more .row").isotope( "appended", $(data), null );
     });
 
-    $("#sendbtn").click(function(){
+    $("#sendbtn").click(function() {
         var $this = $(this);
         $this.text("Please wait...");
         $this.addClass("disabled");
@@ -84,36 +82,39 @@ $(function() {
     $("#restart").click(function() {
         $.ajax({
             dataType: "json",
-            url: window.location.pathname+"/../../shutdown",
+            url: window.location.pathname + "/../../shutdown",
             data: {"parameter":0},
-            success(data) {
+            success: function success() {
                 $("#spinner").show();
-                displaytext=data.text;
-                setTimeout(restartTimer, 3000);}
+                setTimeout(restartTimer, 3000);
+            }
         });
     });
     $("#shutdown").click(function() {
         $.ajax({
             dataType: "json",
-            url: window.location.pathname+"/../../shutdown",
+            url: window.location.pathname + "/../../shutdown",
             data: {"parameter":1},
-            success(data) {
-                return alert(data.text);}
+            success: function success(data) {
+                return alert(data.text);
+            }
         });
     });
     $("#check_for_update").click(function() {
-        var buttonText = $("#check_for_update").html();
-        $("#check_for_update").html("...");
+        var $this = $(this);
+        var buttonText = $this.html();
+        $this.html("...");
         $.ajax({
             dataType: "json",
-            url: window.location.pathname+"/../../get_update_status",
-            success(data) {
-                $("#check_for_update").html(buttonText);
+            url: window.location.pathname + "/../../get_update_status",
+            success: function success(data) {
+                $this.html(buttonText);
                 if (data.status === true) {
                     $("#check_for_update").addClass("hidden");
                     $("#perform_update").removeClass("hidden");
-                    $("#update_info").removeClass("hidden");
-                    $("#update_info").find("span").html(data.commit);
+                    $("#update_info")
+                        .removeClass("hidden")
+                        .find("span").html(data.commit);
                 }
             }
         });
@@ -121,22 +122,23 @@ $(function() {
     $("#restart_database").click(function() {
         $.ajax({
             dataType: "json",
-            url: window.location.pathname+"/../../shutdown",
+            url: window.location.pathname + "/../../shutdown",
             data: {"parameter":2}
         });
     });
     $("#perform_update").click(function() {
         $("#spinner2").show();
         $.ajax({
-        type: "POST",
-        dataType: "json",
-        data: { start: "True"},
-        url: window.location.pathname+"/../../get_updater_status",
-        success(data) {
-            updateText=data.text;
-            $("#UpdateprogressDialog #Updatecontent").html(updateText[data.status]);
-            // console.log(data.status);
-            updateTimerID=setInterval(updateTimer, 2000);}
+            type: "POST",
+            dataType: "json",
+            data: { start: "True"},
+            url: window.location.pathname + "/../../get_updater_status",
+            success: function success(data) {
+                updateText = data.text;
+                $("#Updatecontent").html(updateText[data.status]);
+                // console.log(data.status);
+                updateTimerID = setInterval(updateTimer, 2000);
+            }
         });
     });
 
@@ -144,10 +146,10 @@ $(function() {
 
     $("#bookDetailsModal")
         .on("show.bs.modal", function(e) {
-            const $modalBody = $(this).find(".modal-body");
+            var $modalBody = $(this).find(".modal-body");
 
             // Prevent static assets from loading multiple times
-            const useCache = (options) => {
+            var useCache = function(options) {
                 options.async = true;
                 options.cache = true;
             };
@@ -162,7 +164,7 @@ $(function() {
             $(this).find(".modal-body").html("...");
         });
 
-    $(window).resize(function(event) {
+    $(window).resize(function() {
         $(".discover .row").isotope("reLayout");
     });
-});
\ No newline at end of file
+});
diff --git a/cps/static/js/shelforder.js b/cps/static/js/shelforder.js
index 5ae3acbf..36390fb3 100644
--- a/cps/static/js/shelforder.js
+++ b/cps/static/js/shelforder.js
@@ -1,31 +1,31 @@
 /* global Sortable,sortTrue */
 
-var sortable = Sortable.create(sortTrue, {
-  group: "sorting",
-  sort: true
+Sortable.create(sortTrue, {
+    group: "sorting",
+    sort: true
 });
 
-function sendData(path){
+// eslint-disable-next-line no-unused-vars
+function sendData(path) {
     var elements;
     var counter;
     var maxElements;
-    var tmp=[];
+    var tmp = [];
 
-    elements=Sortable.utils.find(sortTrue,"div");
-    maxElements=elements.length;
+    elements = Sortable.utils.find(sortTrue, "div");
+    maxElements = elements.length;
 
     var form = document.createElement("form");
     form.setAttribute("method", "post");
     form.setAttribute("action", path);
 
-
-    for(counter=0;counter<maxElements;counter++){
-      tmp[counter]=elements[counter].getAttribute("id");
-      var hiddenField = document.createElement("input");
-      hiddenField.setAttribute("type", "hidden");
-      hiddenField.setAttribute("name", elements[counter].getAttribute("id"));
-      hiddenField.setAttribute("value", counter+1);
-      form.appendChild(hiddenField);
+    for (counter = 0;counter < maxElements;counter++) {
+        tmp[counter] = elements[counter].getAttribute("id");
+        var hiddenField = document.createElement("input");
+        hiddenField.setAttribute("type", "hidden");
+        hiddenField.setAttribute("name", elements[counter].getAttribute("id"));
+        hiddenField.setAttribute("value", String(counter + 1));
+        form.appendChild(hiddenField);
     }
     document.body.appendChild(form);
     form.submit();
diff --git a/cps/templates/book_edit.html b/cps/templates/book_edit.html
index 9bd1e644..f124a988 100644
--- a/cps/templates/book_edit.html
+++ b/cps/templates/book_edit.html
@@ -139,7 +139,7 @@
       <div class="modal-header bg-danger text-center">
           <span>{{_('Are really you sure?')}}</span>
       </div>
-        <div class="modal-body text-center" id="meta-info">
+        <div class="modal-body text-center">
           <span>{{_('Book will be deleted from Calibre database')}}</span>
           <span>{{_('and from hard disk')}}</span>
         </div>
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index 500d47f1..5fa60d14 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -259,5 +259,17 @@
 {% endblock %}
 
 {% block js %}
+<script type="text/template" id="template-shelf-add">
+  <li>
+    <a href="<%= add %>" data-remove-href="<%= remove %>" data-shelf-action="add">
+      <%= content %>
+    </a>
+  </li>
+</script>
+<script type="text/template" id="template-shelf-remove">
+  <a href="<%= remove %>" data-add-href="<%= add %>" class="btn btn-sm btn-default" data-shelf-action="remove">
+    <span class="glyphicon glyphicon-remove"></span> <%= content %>
+  </a>
+</script>
 <script src="{{ url_for('static', filename='js/details.js') }}"></script>
 {% endblock %}