--- a/client/src/components/systemconfiguration/PDFTemplates.vue	Mon Feb 25 08:47:59 2019 +0100
+++ b/client/src/components/systemconfiguration/PDFTemplates.vue	Mon Feb 25 13:11:30 2019 +0100
@@ -3,7 +3,7 @@
     <div class="d-flex flex-row justify-content-between">
       <h5><translate>PDF-Templates</translate></h5>
       <input
-        @change="upload"
+        @change="uploadTemplate"
         id="uploadTemplate"
         ref="uploadTemplate"
         type="file"
@@ -11,35 +11,34 @@
       />
     </div>
     <div class="mt-1 border-bottom pb-4">
-      <table class="table table-sm table-hover" v-if="templates.length">
-        <thead>
-          <tr>
-            <th><translate>Name</translate></th>
-            <th><translate>Date</translate></th>
-            <th><translate>Country</translate></th>
-            <th></th>
-          </tr>
-        </thead>
-        <transition-group name="list-fade" tag="tbody">
-          <tr v-for="template in templates" :key="template.name">
-            <td>{{ template.name }}</td>
-            <td>{{ template.time }}</td>
-            <td v-if="template.country">{{ template.country }}</td>
-            <td v-else><i>global</i></td>
-            <td class="text-right">
-              <button
-                class="btn btn-sm btn-dark"
-                @click="
-                  showDeleteTemplatePrompt = true;
-                  templateToDelete = template;
-                "
-              >
-                <font-awesome-icon icon="trash" />
-              </button>
-            </td>
-          </tr>
-        </transition-group>
-      </table>
+      <transition name="fade">
+        <table class="table table-sm table-hover" v-if="templates.length">
+          <thead>
+            <tr>
+              <th><translate>Name</translate></th>
+              <th><translate>Date</translate></th>
+              <th><translate>Country</translate></th>
+              <th></th>
+            </tr>
+          </thead>
+          <transition-group name="fade" tag="tbody">
+            <tr v-for="template in templates" :key="template.name">
+              <td>{{ template.name }}</td>
+              <td>{{ template.time }}</td>
+              <td v-if="template.country">{{ template.country }}</td>
+              <td v-else><i>global</i></td>
+              <td class="text-right">
+                <button
+                  class="btn btn-sm btn-dark"
+                  @click="deleteTemplate(template)"
+                >
+                  <font-awesome-icon icon="trash" />
+                </button>
+              </td>
+            </tr>
+          </transition-group>
+        </table>
+      </transition>
       <button class="btn btn-info mt-2" @click="$refs.uploadTemplate.click()">
         <font-awesome-icon
           icon="spinner"
@@ -50,44 +49,6 @@
         <translate>Upload new template</translate>
       </button>
     </div>
-
-    <div
-      :class="[
-        'box popup ui-element rounded bg-white',
-        { show: showDeleteTemplatePrompt }
-      ]"
-    >
-      <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
-          <translate>Delete PDF Template</translate>
-          <font-awesome-icon
-            icon="times"
-            class="ml-auto text-muted"
-            @click="showDeleteTemplatePrompt = false"
-          ></font-awesome-icon>
-        </h6>
-        <div class="p-3 text-left">
-          <translate class="text-center d-block">
-            Do you really want to delete the following template:
-          </translate>
-          <h5 class="mt-3 text-center">{{ templateToDelete.name }}</h5>
-        </div>
-        <div
-          class="py-2 px-3 border-top d-flex align-items-center justify-content-between"
-        >
-          <button
-            class="btn btn-sm btn-warning"
-            @click="showDeleteTemplatePrompt = false"
-          >
-            no
-          </button>
-          <button class="btn btn-sm btn-info" @click="remove(templateToDelete)">
-            yes
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
@@ -123,13 +84,11 @@
   data() {
     return {
       templates: [],
-      uploading: false,
-      templateToDelete: "",
-      showDeleteTemplatePrompt: false
+      uploading: false
     };
   },
   methods: {
-    upload() {
+    uploadTemplate() {
       const reader = new FileReader();
       reader.onload = event => {
         let template;
@@ -201,19 +160,38 @@
           });
         });
     },
-    remove(template) {
-      this.showDeleteTemplatePrompt = false;
-      HTTP.delete("/templates/print/" + template.name, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "text/xml; charset=UTF-8"
-        }
-      }).then(() => {
-        let removeIndex = this.templates.findIndex(
-          t => t.name === template.name
-        );
-        if (removeIndex !== -1) {
-          this.templates.splice(removeIndex, 1);
+    deleteTemplate(template) {
+      this.$store.commit("application/popup", {
+        icon: "trash",
+        title: this.$gettext("Delete Template"),
+        content:
+          this.$gettext(
+            "Do you really want to delete the following template:"
+          ) +
+          `<br>
+        <b>${template.name}</b>`,
+        confirm: {
+          label: this.$gettext("Delete"),
+          icon: "trash",
+          callback: () => {
+            HTTP.delete("/templates/print/" + template.name, {
+              headers: {
+                "X-Gemma-Auth": localStorage.getItem("token"),
+                "Content-type": "text/xml; charset=UTF-8"
+              }
+            }).then(() => {
+              let removeIndex = this.templates.findIndex(
+                t => t.name === template.name
+              );
+              if (removeIndex !== -1) {
+                this.templates.splice(removeIndex, 1);
+              }
+            });
+          }
+        },
+        cancel: {
+          label: this.$gettext("Cancel"),
+          icon: "times"
         }
       });
     }