From 72fd38bef7b1b1bad4af15ff0a185f332e9a2dd5 Mon Sep 17 00:00:00 2001
From: Jens Pelzetter <jens@jp-digital.de>
Date: Sun, 15 Nov 2020 14:36:02 +0100
Subject: [PATCH] Composite components for UI

---
 .../categories/CategorySystemsController.java |  30 +-
 .../components/bootstrap/svgIcon.xhtml        |  18 +
 .../libreccm/localizedStringEditor.xhtml      | 504 ++++++++++++++++++
 .../categories/categorysystem-details.xhtml   | 371 +++----------
 .../org/libreccm/ui/AdminBundle.properties    |   4 +-
 .../org/libreccm/ui/AdminBundle_de.properties |   2 +-
 6 files changed, 614 insertions(+), 315 deletions(-)
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/bootstrap/svgIcon.xhtml
 create mode 100644 ccm-core/src/main/resources/META-INF/resources/components/libreccm/localizedStringEditor.xhtml

diff --git a/ccm-core/src/main/java/org/libreccm/ui/admin/categories/CategorySystemsController.java b/ccm-core/src/main/java/org/libreccm/ui/admin/categories/CategorySystemsController.java
index 960982742..866b47262 100644
--- a/ccm-core/src/main/java/org/libreccm/ui/admin/categories/CategorySystemsController.java
+++ b/ccm-core/src/main/java/org/libreccm/ui/admin/categories/CategorySystemsController.java
@@ -252,12 +252,11 @@ public class CategorySystemsController {
     }
 
     @POST
-    @Path("/{categorySystemIdentifier}/title/add")
+    @Path("/{identifier}/title/add")
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String addTitle(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @FormParam("locale") final String localeParam,
         @FormParam("value") final String value
     ) {
@@ -309,12 +308,11 @@ public class CategorySystemsController {
     }
 
     @POST
-    @Path("/{categorySystemIdentifier}/title/${locale}/edit")
+    @Path("/{identifier}/title/${locale}/edit")
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String editTitle(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @PathParam("locale") final String localeParam,
         @FormParam("value") final String value
     ) {
@@ -366,12 +364,11 @@ public class CategorySystemsController {
     }
 
     @POST
-    @Path("/{categorySystemIdentifier}/title/${locale}/remove")
+    @Path("/{identifier}/title/${locale}/remove")
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String removeTitle(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @PathParam("locale") final String localeParam,
         @FormParam("confirmed")
         final String confirmed
@@ -427,12 +424,11 @@ public class CategorySystemsController {
     }
 
     @POST
-    @Path("/{categorySystemIdentifier}/description/add")
+    @Path("/{identifier}/description/add")
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String addDescription(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @FormParam("locale") final String localeParam,
         @FormParam("value") final String value
     ) {
@@ -485,13 +481,12 @@ public class CategorySystemsController {
 
     @POST
     @Path(
-        "categorysystems/{categorySystemIdentifier}/description/${locale}/edit"
+        "categorysystems/{identifier}/description/${locale}/edit"
     )
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String editDescription(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @PathParam("locale") final String localeParam,
         @FormParam("value") final String value
     ) {
@@ -544,12 +539,11 @@ public class CategorySystemsController {
 
     @POST
     @Path(
-        "categorysystems/{categorySystemIdentifier}/description/${locale}/remove")
+        "categorysystems/{identifier}/description/${locale}/remove")
     @AuthorizationRequired
     @Transactional(Transactional.TxType.REQUIRED)
     public String removeDescription(
-        @PathParam("categorySystemIdentifier")
-        final String categorySystemIdentifier,
+        @PathParam("identifier") final String categorySystemIdentifier,
         @PathParam("locale") final String localeParam,
         @FormParam("confirmed")
         final String confirmed
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/svgIcon.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/svgIcon.xhtml
new file mode 100644
index 000000000..c8751f49e
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/bootstrap/svgIcon.xhtml
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:xlink="http://www.w3.org/1999/xlink">
+    <cc:interface shortDescription="Component for inserting Bootstrap icons">
+        <cc:attribute name="icon" 
+                      required="true" 
+                      shortDescription="The name of the Icon to insert" />
+    </cc:interface>
+    <cc:implementation>
+        <svg class="bi"
+             width="1em"
+             height="1em"
+             fill="currentColor">
+            <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg##{cc.attrs.icon}" />
+        </svg>
+    </cc:implementation>
+</html>
diff --git a/ccm-core/src/main/resources/META-INF/resources/components/libreccm/localizedStringEditor.xhtml b/ccm-core/src/main/resources/META-INF/resources/components/libreccm/localizedStringEditor.xhtml
new file mode 100644
index 000000000..c2d96cc5d
--- /dev/null
+++ b/ccm-core/src/main/resources/META-INF/resources/components/libreccm/localizedStringEditor.xhtml
@@ -0,0 +1,504 @@
+<!DOCTYPE html [<!ENTITY times '&#215;'>]>
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
+      xmlns:cc="http://xmlns.jcp.org/jsf/composite"
+      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
+    <cc:interface shortDescription="A editor component for localized strings.">
+        <cc:attribute name="addMethod"
+                      required="true"
+                      shortDescription="Name of the endpoiint to which the POST request from the add form is send. The URL must contain a path parameter named identifier. Two values are submitted: locale and value."
+                      type="String" />
+        <cc:attribute name="addButtonLabel" 
+                      default="Add" 
+                      required="false" 
+                      shortDescription="Label for the add button." 
+                      type="String" />
+        <cc:attribute name="addDialogCancelLabel" 
+                      default="Cancel" 
+                      required="false"
+                      shortDescription="Label for the cancel and close buttons." 
+                      type="String" />
+        <cc:attribute name="addDialogLocaleSelectHelp" 
+                      default="The locale of the value of add" 
+                      required="false" 
+                      shortDescription="Help text for the locale select field"
+                      type="String" />
+        <cc:attribute name="addDialogLocaleSelectLabel" 
+                      default="Locale" 
+                      required="false" 
+                      shortDescription="Label for the locale select field"
+                      type="String" />
+        <cc:attribute name="addDialogSubmitLabel"
+                      default="Add"
+                      required="false"
+                      shortDescription="Label for the submit button"
+                      type="String" />
+        <cc:attribute name="addDialogTitle" 
+                      default="Add localization" 
+                      required="false" 
+                      shortDescription="Title for the dialog." 
+                      type="String" />
+        <cc:attribute name="addDialogValueHelp"
+                      required="false"
+                      shortDescription="The value to add"
+                      type="String" />
+        <cc:attribute name="addDialogValueLabel"
+                      required="false"
+                      shortDescription="Value"
+                      type="String" />
+        <cc:attribute name="editButtonLabel" 
+                      default="Edit" 
+                      required="false" 
+                      shortDescription="Label for the edit button" 
+                      type="String" />
+        <cc:attribute name="editDialogCancelLabel"
+                      required="false"
+                      shortDescription="Label for the cancel and close button of the edit dialog"
+                      type="String" />
+        <cc:attribute name="editDialogSubmitLabel"
+                      required="false"
+                      shortDescription="Label for the submit button of the edit dialog"
+                      type="String" />
+        <cc:attribute name="editDialogValueHelp"
+                      default="Value to update"
+                      required="false"
+                      shortDescription="Help text for the value field"
+                      type="String" />
+        <cc:attribute name="editDialogValueLabel"
+                      default="Value"
+                      required="false"
+                      shortDescription="Label for the value field"
+                      type="String" />
+        <cc:attribute name="editDialogTitle"
+                      default="Edit localized value"
+                      required="false"
+                      shortDescription="Title for the edit dialog"
+                      type="String" />
+        <cc:attribute name="editMethod"
+                      required="true"
+                      shortDescription="Name of the endpoiint to which the POST request from the edit form is send. The URL must contain a path parameter named identifier, and a path parameter named locale. The new value is submitted as form parameter with the name value."
+                      type="String" />
+        <cc:attribute name="hasUnusedLocales" 
+                      required="true" 
+                      shortDescription="Are there unused locales? This will usually be an expression pointing to some method. The result must resolve to boolean." 
+                      type="boolean" />
+        <cc:attribute name="headingLevel" 
+                      default="2" 
+                      required="false" 
+                      shortDescription="Level of the heading used for the component. Also determines the heading levels used for other parts of the component." 
+                      type="int" />
+        <cc:attribute name="editorId" 
+                      required="true" 
+                      shortDescription="ID for the editor. Also used as prefix to generate IDs for some subcomponents" 
+                      type="String" />
+        <cc:attribute name="emptyText"
+                      default="No localized values"
+                      required="false"
+                      shortDescription="Text shown if the localized has no values yet."
+                      type="String" />
+        <cc:attribute name="objectIdentifier"
+                      required="true"
+                      shortDescription="Identifier of the object to which the localized string belongs"
+                      type="String" />
+        <cc:attribute name="removeButtonLabel" 
+                      default="Edit" 
+                      required="false" 
+                      shortDescription="Label for the remove button" 
+                      type="String" />
+        <cc:attribute name="removeDialogCancelLabel" 
+                      default="Cancel" 
+                      required="false" 
+                      shortDescription="Label for the cancel and close buttons of the remove dialog" 
+                      type="String" />
+        <cc:attribute name="removeDialogSubmitLabel" 
+                      default="Remove localized value" 
+                      required="false" 
+                      shortDescription="Label for the submit button of the remove dialog (removes the localized value)" 
+                      type="String" />
+        <cc:attribute name="removeDialogText" 
+                      default="Are you sure to remove the following localized value?" 
+                      required="false" 
+                      shortDescription="Text for the remove dialog" 
+                      type="String" />
+        <cc:attribute name="removeDialogTitle" 
+                      default="Remove localized value" 
+                      required="false" 
+                      shortDescription="The title of the remove dialog" 
+                      type="String" />
+        <cc:attribute name="removeMethod"
+                      required="true"
+                      shortDescription="Name of the endpoint to which the POST request from the remove form is send. The URL must contain a path parameter named identifier, and a path parameter named locale."
+                      type="String" />
+        <cc:attribute name="tableActionsHeading"
+                      default="Actions"
+                      required="false"
+                      shortDescription="Heading for the action columns"
+                      type="String" />
+        <cc:attribute name="tableLocaleHeading"
+                      default="Locale"
+                      required="false"
+                      shortDescription="Heading for the locale column"
+                      type="String" />
+        <cc:attribute name="tableValueHeading"
+                      default="Value"
+                      required="false"
+                      shortDescription="Heading for the value column"
+                      type="String" />
+        <cc:attribute name="title" 
+                      required="true" 
+                      shortDescription="Title/Heading of the editor widget" 
+                      type="String" />
+        <cc:attribute name="unusedLocales"
+                      required="true"
+                      shortDescription="A collection of the unused locales of the edited localized string"
+                      type="java.util.Collection" />
+        <cc:attribute name="useTextarea"
+                      default="false"
+                      required="false"
+                      shortDescription="Use a textarea for the value field?"
+                      type="boolean" />
+        <cc:attribute name="values"
+                      required="true"
+                      shortDescription="The localized values"
+                      type="java.util.Map" />
+    </cc:interface>
+    <cc:implementation>
+        <div class="libreccm-localized-string-editor" 
+             id="#{cc.attrs.editorId}">
+            <c:choose>
+                <c:when test="#{cc.attrs.headingLevel == 1}">
+                    <h1>#{cc.attrs.title}</h1>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 2}">
+                    <h2>#{cc.attrs.title}</h2>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 3}">
+                    <h3>#{cc.attrs.title}</h3>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 4}">
+                    <h4>#{cc.attrs.title}</h4>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 5}">
+                    <h5>#{cc.attrs.title}</h5>
+                </c:when>
+                <c:when test="#{cc.attrs.headingLevel == 6}">
+                    <h6>#{cc.attrs.title}</h6>
+                </c:when>
+                <c:otherwise>
+                    <div>#{cc.attrs.title}</div>
+                </c:otherwise>
+            </c:choose>
+            <c:if test="#{cc.attrs.hasUnusedLocales}">
+                <div class="mb-2">
+                    <div class="text-right">
+                        <button class="btn btn-secondary"
+                                data-target="##{cc.attrs.editorId}-dialog"
+                                data-toggle="modal"
+                                type="button">
+                            <bootstrap:svgIcon icon="plus-circle" />
+                            <span>
+                                #{cc.attrs.addButtonLabel}
+                            </span>
+                        </button>
+                    </div>
+                    <div aria-labelledby="#{cc.attrs.editorId}-dialog-title"
+                         aria-hidden="true" 
+                         class="modal fade"
+                         id="#{cc.attrs.editorId}-dialog"
+                         tabindex="-1">
+                        <div class="modal-dialog">
+                            <form action="#{mvc.uri(cc.attrs.addMethod, { 'identifier': cc.attrs.objectIdentifier})}"
+                                  class="modal-content"
+                                  method="post">
+                                <div class="modal-header">
+                                    <c:choose>
+                                        <c:when test="#{cc.attrs.headingLevel == 1}">
+                                            <h2>#{cc.attrs.addDialogTitle}</h2>
+                                        </c:when>
+                                        <c:when test="#{cc.attrs.headingLevel == 2}">
+                                            <h3>#{cc.attrs.addDialogTitle}</h3>
+                                        </c:when>
+                                        <c:when test="#{cc.attrs.headingLevel == 3}">
+                                            <h4>#{cc.attrs.addDialogTitle}</h4>
+                                        </c:when>
+                                        <c:when test="#{cc.attrs.headingLevel == 4}">
+                                            <h5>#{cc.attrs.addDialogTitle}</h5>
+                                        </c:when>
+                                        <c:when test="#{cc.attrs.headingLevel == 5}">
+                                            <h6>#{cc.attrs.addDialogTitle}</h6>
+                                        </c:when>
+                                        <c:otherwise>
+                                            <div>#{cc.attrs.addDialogTitle}</div>
+                                        </c:otherwise>
+                                    </c:choose>
+                                    <button aria-label="#{cc.attrs.addDialogCancelLabel}"
+                                            class="close" 
+                                            data-dismiss="modal" 
+                                            type="button"   >
+                                        <span aria-hidden="true">&times;</span>
+                                    </button>
+                                </div>
+                                <div class="modal-body">
+                                    <div class="form-group">
+                                        <label for="#{cc.attrs.editorId}-form-locale-select">
+                                            #{cc.attrs.addDialogLocaleSelectLabel}
+                                        </label>
+                                        <select aria-describedby="#{cc.attrs.editorId}-form-locale-select-help"
+                                                id="#{cc.attrs.editorId}-form-locale-select"
+                                                name="locale"
+                                                required="true">
+                                            <c:forEach items="#{cc.attrs.unusedLocales}" 
+                                                       var="locale">
+                                                <option value="#{locale}">#{locale}</option>
+                                            </c:forEach>
+                                        </select>
+                                        <small class="form-text text-muted"
+                                               id="#{cc.attrs.editorId}-form-locale-select-help">
+                                            #{cc.attrs.addDialogLocaleSelectHelp}
+                                        </small>
+                                    </div>
+                                    <div class="form-group">
+                                        <label for="#{cc.attrs.editorId}-form-value">
+                                            #{cc.attrs.addDialogValueLabel}
+                                        </label>
+                                        <c:choose>
+                                            <c:when test="#{cc.attrs.useTextarea}">
+                                                <textarea aria-describedby="#{cc.attrs.editorId}-form-value-help"
+                                                          class="form-control"
+                                                          cols="80"
+                                                          id="#{cc.attrs.editorId}-form-value"
+                                                          name="value"
+                                                          required="true"
+                                                          rows="10"></textarea>
+                                            </c:when>
+                                            <c:otherwise>
+                                                <input aria-describedby="#{cc.attrs.editorId}-form-value-help"
+                                                       class="form-control"
+                                                       id="#{cc.attrs.editorId}-form-value"
+                                                       name="value"
+                                                       required="true"
+                                                       type="text" />
+                                            </c:otherwise>
+                                        </c:choose>
+                                        <small class="form-text text-muted"
+                                               id="#{cc.attrs.editorId}-form-value-help">
+                                            #{cc.attrs.addDialogValueHelp}
+                                        </small>
+                                    </div>
+                                </div>
+                                <div class="modal-footer">
+                                    <button class="btn btn-secondary" 
+                                            data-dismiss="modal"
+                                            type="button" >
+                                        #{cc.attrs.addDialogCancelLabel}
+                                    </button>
+                                    <button type="submit" class="btn btn-primary">
+                                        #{cc.attrs.addDialogSubmitLabel}
+                                    </button>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </c:if>
+            <c:choose>
+                <c:when test="#{cc.attrs.values.isEmpty()}">
+                    <p>
+                        #{cc.attrs.emptyText}
+                    </p>
+                </c:when>
+                <c:otherwise>
+                    <table class="table table-hover">
+                        <thead class="thead-light">
+                            <tr>
+                                <th scope="col">#{cc.attrs.tableLocaleHeading}</th>
+                                <th scope="col">#{cc.attrs.tableValueHeading}</th>
+                                <th class="text-center" 
+                                    colspan="2"
+                                    scope="col">#{cc.attrs.tableActionsHeading}</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <c:forEach items="#{cc.attrs.values}" var="entry">
+                                <tr>
+                                    <td>#{entry.key}</td>
+                                    <td>#{entry.value}</td>
+                                    <td>
+                                        <div class="text-center">
+                                            <button class="btn btn-info"
+                                                    data-target="##{cc.attrs.editorId}-#{entry.key}-edit-dialog"
+                                                    data-toggle="modal"
+                                                    type="button">
+                                                <bootstrap:svgIcon icon="pen" />
+                                                <span>#{cc.attrs.editButtonLabel}</span>
+                                            </button>
+                                        </div>
+                                        <div aria-labelledby="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-title"
+                                             aria-hidden="true"
+                                             class="modal fade"
+                                             data-backdrop="static"
+                                             id="#{cc.attrs.editorId}-#{entry.key}-edit-dialog"
+                                             tabindex="-1">
+                                            <div class="modal-dialog">
+                                                <form action="#{mvc.uri(cc.attrs.addMethod, { 'identifier': cc.attrs.objectIdentifier, 'locale': entry.key })}"
+                                                      class="modal-content"
+                                                      method="post">
+                                                    <div class="modal-header">
+                                                        <c:choose>
+                                                            <c:when test="#{cc.attrs.headingLevel == 1}">
+                                                                <h2>#{cc.attrs.editDialogTitle}</h2>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 2}">
+                                                                <h3>#{cc.attrs.editDialogTitle}</h3>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 3}">
+                                                                <h4>#{cc.attrs.editDialogTitle}</h4>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 4}">
+                                                                <h5>#{cc.attrs.editDialogTitle}</h5>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 5}">
+                                                                <h6>#{cc.attrs.editDialogTitle}</h6>
+                                                            </c:when>
+                                                            <c:otherwise>
+                                                                <div>#{cc.attrs.editDialogTitle}</div>
+                                                            </c:otherwise>
+                                                        </c:choose>
+                                                        <button aria-label="#{cc.attrs.editDialogCancelLabel}"
+                                                                class="close" 
+                                                                data-dismiss="modal" 
+                                                                type="button"   >
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <input name="locale"
+                                                               value="#{entry.key}"
+                                                               type="hidden" />
+                                                        <div class="form-group">
+                                                            <label for="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value}">
+                                                                #{cc.attrs.editDialogValueLabel}
+                                                            </label>
+                                                            <c:choose>
+                                                                <c:when test="#{cc.attrs.useTextarea}">
+                                                                    <textarea aria-describedby="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value-help"
+                                                                              class="form-control"
+                                                                              cols="80"
+                                                                              id="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value"
+                                                                              name="value"
+                                                                              required="true"
+                                                                              rows="10">#{entry.value}</textarea>
+                                                                </c:when>
+                                                                <c:otherwise>
+                                                                    <input aria-describedby="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value-help"
+                                                                           class="form-control"
+                                                                           id="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value"
+                                                                           name="value"
+                                                                           required="true"
+                                                                           type="text" 
+                                                                           value="#{entry.value}" />
+                                                                </c:otherwise>
+                                                            </c:choose>
+                                                            <small class="form-text text-muted"
+                                                                   id="#{cc.attrs.editorId}-#{entry.key}-edit-dialog-value-help">
+                                                                #{cc.attrs.addDialogValueHelp}
+                                                            </small>
+                                                        </div>
+                                                    </div>
+                                                    <div class="modal-footer">
+                                                        <div class="modal-footer">
+                                                            <button class="btn btn-secondary" 
+                                                                    data-dismiss="modal"
+                                                                    type="button" >
+                                                                #{cc.attrs.editDialogCancelLabel}
+                                                            </button>
+                                                            <button type="submit" class="btn btn-primary">
+                                                                #{cc.attrs.editDialogSubmitLabel}
+                                                            </button>
+                                                        </div>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </td>
+                                    <td>
+                                        <div class="text-center">
+                                            <button class="btn btn-danger"
+                                                    data-target="##{cc.attrs.editorId}-#{entry.key}-remove-dialog"
+                                                    data-toggle="modal"
+                                                    type="button">
+                                                <bootstrap:svgIcon icon="x-circle" />
+                                                <span>#{cc.attrs.removeButtonLabel}</span>
+                                            </button>
+                                        </div>
+                                        <div aria-describedby="#{cc.attrs.editorId}-#{entry.key}-remove-dialog-title"
+                                             aria-hidden="true"
+                                             class="modal fade"
+                                             data-backdrop="static"
+                                             id="#{cc.attrs.editorId}-#{entry.key}-remove-dialog"
+                                             tabindex="-1">
+                                            <div class="modal-dialog">
+                                                <form action="#{mvc.uri(cc.attrs.removeMethod, {'identifier': cc.attrs.objectIdentifier, 'locale': entry.key})}"
+                                                      class="modal-content"
+                                                      method="post">
+                                                    <div class="modal-header">
+                                                        <c:choose>
+                                                            <c:when test="#{cc.attrs.headingLevel == 1}">
+                                                                <h2>#{cc.attrs.removeDialogTitle}</h2>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 2}">
+                                                                <h3>#{cc.attrs.removeDialogTitle}</h3>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 3}">
+                                                                <h4>#{cc.attrs.removeDialogTitle}</h4>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 4}">
+                                                                <h5>#{cc.attrs.removeDialogTitle}</h5>
+                                                            </c:when>
+                                                            <c:when test="#{cc.attrs.headingLevel == 5}">
+                                                                <h6>#{cc.attrs.removeDialogTitle}</h6>
+                                                            </c:when>
+                                                            <c:otherwise>
+                                                                <div>#{cc.attrs.removeDialogTitle}</div>
+                                                            </c:otherwise>
+                                                        </c:choose>
+                                                        <button aria-label="#{cc.attrs.removeDialogCancelLabel}"
+                                                                class="close" 
+                                                                data-dismiss="modal" 
+                                                                type="button"   >
+                                                            <span aria-hidden="true">&times;</span>
+                                                        </button>
+                                                    </div>
+                                                    <div class="modal-body">
+                                                        <p>
+                                                            #{cc.attrs.removeDialogText}
+                                                        </p>
+                                                        <pre>#{entry.key}: #{entry.value}</pre>
+                                                        <input name="confirmed"
+                                                               type="hidden"
+                                                               value="true" />
+                                                    </div>
+                                                    <div class="modal-footer">
+                                                        <button class="btn btn-secondary" 
+                                                                data-dismiss="modal"
+                                                                type="button" >
+                                                            #{cc.attrs.removeDialogCancelLabel}
+                                                        </button>
+                                                        <button type="submit" class="btn btn-danger">
+                                                            #{cc.attrs.removeDialogSubmitLabel}
+                                                        </button>
+                                                    </div>
+                                                </form>
+                                            </div>
+                                        </div>
+                                    </td>
+                                </tr>
+                            </c:forEach>
+                        </tbody>
+                    </table>
+                </c:otherwise>
+            </c:choose>
+        </div>
+    </cc:implementation>
+</html>
+
diff --git a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/categorysystem-details.xhtml b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/categorysystem-details.xhtml
index 9687a8c00..1597d3401 100644
--- a/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/categorysystem-details.xhtml
+++ b/ccm-core/src/main/resources/WEB-INF/views/org/libreccm/ui/admin/categories/categorysystem-details.xhtml
@@ -1,9 +1,10 @@
 <!DOCTYPE html [<!ENTITY times '&#215;'>]>
 <html xmlns="http://www.w3.org/1999/xhtml" 
+      xmlns:bootstrap="http://xmlns.jcp.org/jsf/composite/components/bootstrap"
       xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
       xmlns:h="http://xmlns.jcp.org/jsf/html"
-      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
-      xmlns:xlink="http://www.w3.org/1999/xlink">
+      xmlns:libreccm="http://xmlns.jcp.org/jsf/composite/components/libreccm"
+      xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
     <ui:composition template="/WEB-INF/views/org/libreccm/ui/admin/ccm-admin.xhtml">
 
         <ui:param name="activePage" value="categories" />
@@ -77,272 +78,79 @@
                 <div class="mb-4">
                     <a class="btn btn-primary"
                        href="#{mvc.uri('CategorySystemsController#editCategorySystem', {'categorySystemIdentifier': CategorySystemDetailsModel.identifier } )}">
-                        <svg class="bi"
-                             width="1em"
-                             height="1em"
-                             fill="currentColor">
-                            <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#pen" />
-                        </svg>
+                        <bootstrap:svgIcon icon="pen" />
                         <span>#{AdminMessages['categorysystems.details.edit']}</span>
                     </a>
                 </div>
 
-                <h2>
-                    #{AdminMessages['categorysystems.details.title.heading']}
-                </h2>
-                <c:if test="#{CategorySystemDetailsModel.hasUnusedTitleLocales()}">
-                    <div class="mb-2">
-                        <div class="text-right">
-                            <button class="btn btn-secondary"
-                                    data-target="#categorysystem-title-add"
-                                    data-toggle="modal"
-                                    type="button">
-                                <svg class="bi"
-                                     width="1em"
-                                     height="1em"
-                                     fill="currentColor">
-                                    <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#plus-circle" />
-                                </svg>
-                                <span>#{AdminMessages['categorysystems.details.title.add']}</span>
-                            </button>
-                        </div>
-                        <div class="modal fade"
-                             data-backdrop="static"
-                             id="categorysystem-title-add"
-                             tabindex="-1">
-                            <div class="modal-dialog">
-                                <form action="#{mvc.uri('CategorySystemsController#addTitle', {'categorySystemIdentifier': CategorySystemDetailsModel.identifier })}"
-                                      class="modal-content"
-                                      method="post">
-                                    <div class="modal-header">
-                                        <h3 class="modal-title">
-                                            #{AdminMessages['categorysystems.details.title.add.dialog.title']}
-                                        </h3>
-                                        <button aria-label="#{AdminMessages['categorysystems.details.title.add.dialog.close']}"
-                                                class="close" 
-                                                data-dismiss="modal" 
-                                                type="button">
-                                            <span aria-hidden="true">&times;</span>
-                                        </button>
-                                    </div>
-                                    <div class="modal-body">
-                                        <div class="form-group">
-                                            <label for="categorysystem-title-add-locale">
-                                                #{AdminMessages['categorysystems.details.title.add.dialog.locale.label']}
-                                            </label>
-                                            <select aria-describedby="categorysystem-title-add-locale-help"
-                                                    id="categorysystem-title-add-locale"
-                                                    name="locale"
-                                                    required="true">
-                                                <c:forEach items="#{CategorySystemDetailsModel.unusedTitleLocales}" var="locale">
-                                                    <option value="#{locale}">#{locale}</option>
-                                                </c:forEach>
-                                            </select>
-                                            <small class="form-text text-muted"
-                                                   id="categorysystem-title-add-locale-help">
-                                                #{AdminMessages['categorysystems.details.title.add.dialog.locale.help']}
-                                            </small>
+                <libreccm:localizedStringEditor addMethod="CategorySystemsController#addTitle"
+                                                addButtonLabel="#{AdminMessages['categorysystems.details.title.add']}"
+                                                addDialogCancelLabel="#{AdminMessages['categorysystems.details.title.add.dialog.close']}"
+                                                addDialogLocaleSelectHelp="#{AdminMessages['categorysystems.details.title.add.dialog.locale.help']}"
+                                                addDialogLocaleSelectLabel="#{AdminMessages['categorysystems.details.title.add.dialog.locale.label']}"
+                                                addDialogSubmitLabel="#{AdminMessages['categorysystems.details.title.add.dialog.submit']}"
+                                                addDialogTitle="#{AdminMessages['categorysystems.details.title.add.dialog.title']}"
+                                                addDialogValueHelp="#{AdminMessages['categorysystems.details.title.add.dialog.value.help']}"
+                                                addDialogValueLabel="#{AdminMessages['categorysystems.details.title.add.dialog.value.label']}"
+                                                editButtonLabel="#{AdminMessages['categorysystems.details.title.table.actions.edit']}"
+                                                editDialogCancelLabel="#{AdminMessages['categorysystems.details.title.edit.dialog.close']}"
+                                                editDialogSubmitLabel="#{AdminMessages['categorysystems.details.title.edit.dialog.submit']}"
+                                                editDialogTitle="#{AdminMessages['categorysystems.details.title.table.actions.edit.dialog.title']}"
+                                                editDialogValueHelp="#{AdminMessages['categorysystems.details.title.edit.dialog.value.help']}"
+                                                editDialogValueLabel="#{AdminMessages['categorysystems.details.title.edit.dialog.value.label']}"
+                                                editMethod="CategorySystemsController#editTitle"
+                                                editorId="categorysystem-title"
+                                                emptyText="#{AdminMessages['categorysystems.details.title.none']}"
+                                                hasUnusedLocales="#{CategorySystemDetailsModel.hasUnusedTitleLocales()}"
+                                                objectIdentifier="#{CategorySystemDetailsModel.identifier}"
+                                                removeButtonLabel="#{AdminMessages['categorysystems.details.title.table.actions.remove']}"
+                                                removeDialogCancelLabel="#{AdminMessages['categorysystems.details.title.remove.dialog.close']}"
+                                                removeDialogSubmitLabel="#{AdminMessages['categorysystems.details.title.remove.dialog.submit']}"
+                                                removeDialogText="#{AdminMessages['categorysystems.details.title.remove.dialog.message']}"
+                                                removeDialogTitle="#{AdminMessages['categorysystems.details.title.table.actions.remove.dialog.title']}"
+                                                removeMethod="CategorySystemsController#removeTitle"
+                                                tableActionsHeading="#{AdminMessages['categorysystems.details.title.table.headings.actions']}"
+                                                tableLocaleHeading="#{AdminMessages['categorysystems.details.title.table.headings.locale']}"
+                                                tableValueHeading="#{AdminMessages['categorysystems.details.title.table.headings.value']}"
+                                                title="#{AdminMessages['categorysystems.details.title.heading']}"
+                                                unusedLocales="#{CategorySystemDetailsModel.unusedTitleLocales}"
+                                                values="#{CategorySystemDetailsModel.title}" />
+                
+                <libreccm:localizedStringEditor addMethod="CategorySystemsController#addDescription"
+                                                addButtonLabel="#{AdminMessages['categorysystems.details.description.add']}"
+                                                addDialogCancelLabel="#{AdminMessages['categorysystems.details.description.add.dialog.close']}"
+                                                addDialogLocaleSelectHelp="#{AdminMessages['categorysystems.details.description.add.dialog.locale.help']}"
+                                                addDialogLocaleSelectLabel=" #{AdminMessages['categorysystems.details.description.add.dialog.locale.label']}"
+                                                addDialogSubmitLabel="#{AdminMessages['categorysystems.details.description.add.dialog.submit']}"
+                                                addDialogTitle="#{AdminMessages['categorysystems.details.description.add.dialog.title']}"
+                                                addDialogValueHelp="#{AdminMessages['categorysystems.details.description.add.dialog.value.help']}"
+                                                addDialogValueLabel="#{AdminMessages['categorysystems.details.description.add.dialog.value.label']}"
+                                                editButtonLabel="#{AdminMessages['categorysystems.details.description.table.actions.edit']}"
+                                                editDialogCancelLabel="#{AdminMessages['categorysystems.details.description.edit.dialog.close']}"
+                                                editDialogSubmitLabel="#{AdminMessages['categorysystems.details.description.edit.dialog.submit']}"
+                                                editDialogTitle="#{AdminMessages['categorysystems.details.description.table.actions.edit.dialog.title']}"
+                                                editDialogValueHelp="#{AdminMessages['categorysystems.details.description.edit.dialog.value.help']}"
+                                                editDialogValueLabel="#{AdminMessages['categorysystems.details.description.edit.dialog.value.label']}"
+                                                editMethod="CategorySystemsController#editDescription"
+                                                editorId="categorysystem-description"
+                                                emptyText="#{AdminMessages['categorysystems.details.description.none']}"
+                                                hasUnusedLocales="#{CategorySystemDetailsModel.hasUnusedDescriptionLocales()}"
+                                                objectIdentifier="#{CategorySystemDetailsModel.identifier}"
+                                                removeButtonLabel="#{AdminMessages['categorysystems.details.description.table.actions.remove']}"
+                                                removeDialogCancelLabel="#{AdminMessages['categorysystems.details.description.remove.dialog.close']}"
+                                                removeDialogSubmitLabel="#{AdminMessages['categorysystems.details.description.remove.dialog.submit']}"
+                                                removeDialogText="#{AdminMessages['categorysystems.details.description.remove.dialog.message']}"
+                                                removeDialogTitle="#{AdminMessages['categorysystems.details.description.table.actions.remove.dialog.title']}"
+                                                removeMethod="CategorySystemsController#removeDescription"
+                                                tableActionsHeading="#{AdminMessages['categorysystems.details.description.table.headings.actions']}"
+                                                tableLocaleHeading="#{AdminMessages['categorysystems.details.description.table.headings.locale']}"
+                                                tableValueHeading="#{AdminMessages['categorysystems.details.description.table.headings.value']}"
+                                                title="#{AdminMessages['categorysystems.details.description.heading']}"
+                                                unusedLocales="#{CategorySystemDetailsModel.unusedTitleLocales}"
+                                                useTextarea="true"
+                                                values="#{CategorySystemDetailsModel.description}" />
 
-                                        </div>
-                                        <div class="form-group">
-                                            <label for="categorysystem-title-add-value">
-                                                #{AdminMessages['categorysystems.details.title.add.dialog.value.label']}
-                                            </label>
-                                            <input aria-describedby="categorysystem-title-add-value-help"
-                                                   class="form-control"
-                                                   id="categorysystem-title-add-value"
-                                                   name="value"
-                                                   required="true"
-                                                   type="text" />
-                                            <small class="form-text text-muted"
-                                                   id="categorysystem-title-add-locale-help">
-                                                #{AdminMessages['categorysystems.details.title.add.dialog.value.help']}
-                                            </small>
-                                        </div>
-                                    </div>
-                                    <div class="modal-footer">
-                                        <button class="btn btn-secondary" 
-                                                data-dismiss="modal"
-                                                type="button" >
-                                            #{AdminMessages['categorysystems.details.title.add.dialog.close']}
-                                        </button>
-                                        <button type="submit" class="btn btn-primary">
-                                            #{AdminMessages['categorysystems.details.title.add.dialog.submit']}
-                                        </button>
-                                    </div>
-                                </form>
-                            </div>
-                        </div>
-                    </div>
-                </c:if>
-                <c:choose>
-                    <c:when test="#{CategorySystemDetailsModel.getTitle().isEmpty()}">
-                        <p>
-                            #{AdminMessages['categorysystems.details.title.none']}
-                        </p>
-                    </c:when>
-                    <c:otherwise>
-                        <table class="table table-hover">
-                            <thead class="thead-light">
-                                <tr>
-                                    <th scope="col">#{AdminMessages['categorysystems.details.title.table.headings.locale']}</th>
-                                    <th scope="col">#{AdminMessages['categorysystems.details.title.table.headings.value']}</th>
-                                    <th class="text-center" 
-                                        colspan="2" 
-                                        scope="col">#{AdminMessages['categorysystems.details.title.table.headings.actions']}</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <c:forEach items="#{CategorySystemDetailsModel.title}"
-                                           var="entry">
-                                    <tr>
-                                        <td>
-                                            #{entry.key}
-                                        </td>
-                                        <td>
-                                            #{entry.value}
-                                        </td>
-                                        <td>
-                                            <div class="text-center">
-                                                <button class="btn btn-info"
-                                                        data-target="#categorysystem-title-#{entry.key}-edit"
-                                                        data-toggle="modal"
-                                                        type="button">
-                                                    <svg class="bi"
-                                                         width="1em"
-                                                         height="1em"
-                                                         fill="currentColor">
-                                                        <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#pen" />
-                                                    </svg>
-                                                    <span>#{AdminMessages['categorysystems.details.title.table.actions.edit']}</span>
-                                                </button>
-                                            </div>
-                                            <div aria-describedby="categorysystem-title-#{entry.key}-edit-title"
-                                                 aria-hidden="true"
-                                                 class="modal fade"
-                                                 data-backdrop="static"
-                                                 id="categorysystem-title-#{entry.key}-edit"
-                                                 tabindex="-1">
-                                                <div class="modal-dialog">
-                                                    <form action="#{mvc.uri('CategorySystemsController#editTitle', {'categorySystemIdentifier': CategorySystemDetailsModel.identifier, 'locale': entry.key })}"
-                                                          class="modal-content"
-                                                          method="post">
-                                                        <div class="modal-header">
-                                                            <h3 class="modal-title" id="categorysystem-title-#{entry.key}-edit-title">
-                                                                #{AdminMessages['categorysystems.details.title.table.actions.edit.dialog.title']}
-                                                            </h3>
-                                                            <button aria-label="#{AdminMessages['categorysystems.details.title.edit.dialog.close']}"
-                                                                    class="close"
-                                                                    data-dismiss="modal"
-                                                                    type="button">
-                                                                <span aria-hidden="true">&times;</span>
-                                                            </button>
-                                                        </div>
-                                                        <div class="modal-body">
-                                                            <input name="locale"
-                                                                   value="#{entry.key}"
-                                                                   type="hidden" />
-                                                            <div class="form-group">
-                                                                <label for="categorysystem-title-#{entry.key}-edit-value">
-                                                                    #{AdminMessages['categorysystems.details.title.edit.dialog.value.label']}
-                                                                </label>
-                                                                <input aria-describedby="categorysystem-title-#{entry.key}-edit-value-help"
-                                                                       class="form-control"
-                                                                       id="categorysystem-title-#{entry.key}-edit-value"
-                                                                       name="value"
-                                                                       required="true"
-                                                                       type="text" 
-                                                                       value="#{entry.value}" />
-                                                                <small class="form-text text-muted"
-                                                                       id="categorysystem-title-#{entry.key}-edit-value-help">
-                                                                    #{AdminMessages['categorysystems.details.title.edit.dialog.value.help']}
-                                                                </small>
-                                                            </div>
-                                                        </div>
-                                                        <div class="modal-footer">
-                                                            <div class="modal-footer">
-                                                                <button class="btn btn-secondary" 
-                                                                        data-dismiss="modal"
-                                                                        type="button" >
-                                                                    #{AdminMessages['categorysystems.details.title.edit.dialog.close']}
-                                                                </button>
-                                                                <button type="submit" class="btn btn-primary">
-                                                                    #{AdminMessages['categorysystems.details.title.edit.dialog.submit']}
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                            </div>
-                                        </td>
-                                        <td>
-                                            <div class="text-center">
-                                                <button class="btn btn-danger"
-                                                        data-target="#categorysystem-title-#{entry.key}-remove"
-                                                        data-toggle="modal"
-                                                        type="button">
-                                                    <svg class="bi"
-                                                         width="1em"
-                                                         height="1em"
-                                                         fill="currentColor">
-                                                        <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#x-circle" />
-                                                    </svg>
-                                                    <span>#{AdminMessages['categorysystems.details.title.table.actions.remove']}</span>
-                                                </button>
-                                            </div>
-                                            <div aria-describedby="categorysystem-title-#{entry.key}-remove-title"
-                                                 aria-hidden="true"
-                                                 class="modal fade"
-                                                 data-backdrop="static"
-                                                 id="categorysystem-title-#{entry.key}-remove"
-                                                 tabindex="-1">
-                                                <div class="modal-dialog">
-                                                    <form action="#{mvc.uri('CategorySystemsController#removeTitle', {'categorySystemIdentifier': CategorySystemDetailsModel.identifier, 'locale': entry.key })}"
-                                                          class="modal-content"
-                                                          method="post">
-                                                        <div class="modal-header">
-                                                            <h3 class="modal-title" id="categorysystem-title-#{entry.key}-remove-title">
-                                                                #{AdminMessages['categorysystems.details.title.table.actions.remove.dialog.title']}
-                                                            </h3>
-                                                            <button aria-label="#{AdminMessages['categorysystems.details.title.remove.dialog.close']}"
-                                                                    class="close"
-                                                                    data-dismiss="modal"
-                                                                    type="button">
-                                                                <span aria-hidden="true">&times;</span>
-                                                            </button>
-                                                        </div>
-                                                        <div class="modal-body">
-                                                            <p>
-                                                                #{AdminMessages.getMessage('categorysystems.details.title.remove.dialog.message', [entry.key, entry.value])}
-                                                            </p>
-                                                            <input name="confirmed" 
-                                                                   type="hidden" 
-                                                                   value="true" />
-                                                        </div>
-                                                        <div class="modal-footer">
-                                                            <div class="modal-footer">
-                                                                <button class="btn btn-secondary" 
-                                                                        data-dismiss="modal"
-                                                                        type="button" >
-                                                                    #{AdminMessages['categorysystems.details.title.remove.dialog.close']}
-                                                                </button>
-                                                                <button type="submit" class="btn btn-danger">
-                                                                    #{AdminMessages['categorysystems.details.title.remove.dialog.submit']}
-                                                                </button>
-                                                            </div>
-                                                        </div>
-                                                    </form>
-                                                </div>
-                                            </div>
-                                        </td>
-                                    </tr>
-                                </c:forEach>
-                            </tbody>
-                        </table>
-                    </c:otherwise>
-                </c:choose>
-
-                <h2>
+<!--                <h2>
                     #{AdminMessages['categorysystems.details.description.heading']}
                 </h2>
                 <c:if test="#{CategorySystemDetailsModel.hasUnusedDescriptionLocales()}">
@@ -352,12 +160,7 @@
                                     data-target="#categorysystem-description-add"
                                     data-toggle="modal"
                                     type="button">
-                                <svg class="bi"
-                                     width="1em"
-                                     height="1em"
-                                     fill="currentColor">
-                                    <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#plus-circle" />
-                                </svg>
+                                <bootstrap:svgIcon icon="plus-circle" />
                                 <span>#{AdminMessages['categorysystems.details.description.add']}</span>
                             </button>
                         </div>
@@ -463,12 +266,7 @@
                                                         data-target="#categorysystem-description-#{entry.key}-edit"
                                                         data-toggle="modal"
                                                         type="button">
-                                                    <svg class="bi"
-                                                         width="1em"
-                                                         height="1em"
-                                                         fill="currentColor">
-                                                        <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#pen" />
-                                                    </svg>
+                                                    <bootstrap:svgIcon icon="pen" />
                                                     <span>#{AdminMessages['categorysystems.details.description.table.actions.edit']}</span>
                                                 </button>
                                             </div>
@@ -538,12 +336,7 @@
                                                         data-target="#categorysystem-description-#{entry.key}-remove"
                                                         data-toggle="modal"
                                                         type="button">
-                                                    <svg class="bi"
-                                                         width="1em"
-                                                         height="1em"
-                                                         fill="currentColor">
-                                                        <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#x-circle" />
-                                                    </svg>
+                                                    <bootstrap:svgIcon icon="x-circle" />
                                                     <span>#{AdminMessages['categorysystems.details.description.table.actions.remove']}</span>
                                                 </button>
                                             </div>
@@ -595,7 +388,7 @@
                             </tbody>
                         </table>
                     </c:otherwise>
-                </c:choose>
+                </c:choose>-->
 
                 <h2>
                     #{AdminMessages['categorysystems.details.owners.heading']}
@@ -606,12 +399,7 @@
                                 data-target="#categorysystem-owner-add"
                                 data-toggle="modal"
                                 type="button">
-                            <svg class="bi"
-                                 width="1em"
-                                 height="1em"
-                                 fill="currentColor">
-                                <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#plus-circle" />
-                            </svg>
+                            <bootstrap:svgIcon icon="plus-circle" />
                             <span>#{AdminMessages['categorysystems.details.owners.add']}</span>
                         </button>
                     </div>
@@ -720,12 +508,7 @@
                                                         data-target="#categorysystem-owner-#{owner.uuid}-remove"
                                                         data-toggle="modal"
                                                         type="button">
-                                                    <svg class="bi"
-                                                         width="1em"
-                                                         height="1em"
-                                                         fill="currentColor">
-                                                        <use xlink:href="#{request.contextPath}/assets/bootstrap/bootstrap-icons.svg#x-circle" />
-                                                    </svg>
+                                                    <bootstrap:svgIcon icon="x-circle" />
                                                     <span>#{AdminMessages['categorysystems.details.owners.remove']}</span>
                                                 </button>
                                             </div>
diff --git a/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle.properties b/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle.properties
index 1b6a15cbf..7def2b78c 100644
--- a/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle.properties
+++ b/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle.properties
@@ -315,7 +315,7 @@ categorysystems.details.title.edit.dialog.value.help=The new value for the title
 categorysystems.details.title.edit.dialog.submit=Save
 categorysystems.details.title.table.actions.remove.dialog.title=Remove localized title
 categorysystems.details.title.remove.dialog.close=Cancel
-categorysystems.details.title.remove.dialog.message=Are your sure to delete title "{1}" for locale?
+categorysystems.details.title.remove.dialog.message=Are your sure to remove the following localized value for the title:
 categorysystems.details.title.remove.dialog.submit=Delete title
 categorysystems.details.description.add.dialog.title=Add localized description
 categorysystems.details.description.add.dialog.locale.label=Locale
@@ -331,7 +331,7 @@ categorysystems.details.description.edit.dialog.value.help=The localized descrip
 categorysystems.details.description.edit.dialog.submit=Save
 categorysystems.details.description.table.actions.remove.dialog.title=Removed localized description
 categorysystems.details.description.remove.dialog.close=Cancel
-categorysystems.details.description.remove.dialog.message=Are your sure to delete the description for locale {0}?
+categorysystems.details.description.remove.dialog.message=Are your sure to delete the following localized value for the description:
 categorysystems.details.description.remove.dialog.submit=Remove localized description
 categorysstems.details.owner.add.dialog.title=Add Application Mapping
 categorysystems.details.owner.add.dialog.application.label=Application
diff --git a/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle_de.properties b/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle_de.properties
index 65ffc1657..8dd46c8eb 100644
--- a/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle_de.properties
+++ b/ccm-core/src/main/resources/org/libreccm/ui/AdminBundle_de.properties
@@ -315,7 +315,7 @@ categorysystems.details.title.edit.dialog.value.help=Neuer Wert f\u00fcr den Tit
 categorysystems.details.title.edit.dialog.submit=Speichern
 categorysystems.details.title.table.actions.remove.dialog.title=Lokalisierten Titel entfernen
 categorysystems.details.title.remove.dialog.close=Abbrechen
-categorysystems.details.title.remove.dialog.message=Sind Sie sicher, dass Sie den Titel "{1}" f\u00fcr die Sprache {0} entfernen wollen?
+categorysystems.details.title.remove.dialog.message=Sind Sie sicher, dass die folgende Lokalisierung f\u00fcr den Titel entfernen wollen?
 categorysystems.details.title.remove.dialog.submit=Titel entfernen
 categorysystems.details.description.add.dialog.title=Lokalisierte Beschreibung hinzuf\u00fcgen
 categorysystems.details.description.add.dialog.locale.label=Sprache