fix variant enumeration (hex!)

src/main/resources/templates/fragments/common.html

@@ -490,13 +490,28 @@ <h5 class="modal-title" id="exampleModalLongTitle" th:text="#{modal_share_title}
      <span th:if="${token.id ==null}" th:text="'&nbsp;'" class="word-id"/>
    </th:block>
 
-
     <!-- variants information -->
     <div th:fragment="variants-info" class="result-list-item-element variants-list" th:object="${obj}" th:with="vars =${obj.getContext().getVariants()}">
 		<th:block th:if="${vars > 1}">
 			(<span th:text="#{sentence_variants1}"></span> <strong th:text="${obj.getContext().getVariants()}"></strong> <strong th:text="#{sentence_variants2}"></strong>:
-			<th:block th:each="i: ${#numbers.sequence(0, obj.getContext().getVariants() - 1)}" th:with="formattedVarIndex=${#strings.substringAfter(obj.id,'-')}"><span th:unless="${i < 1}">, </span><a th:unless="${formattedVarIndex == #numbers.formatInteger(i,2)}" th:href="${'/sentence/'+#strings.substringBefore(obj.id,'-')+'-'+#numbers.formatInteger(i,2)}" th:text="${'#'+ (i +1)}" target="_blank" rel="opener"></a><strong th:if="${formattedVarIndex == #numbers.formatInteger(i,2)}" th:text="${'#'+ (i +1)}"></strong></th:block>)
-		</th:block>
+        <script th:inline="javascript">
+               var  noOfVariants = /*[[${obj.getContext().getVariants()}]]*/ 0; 
+               var  sentenceID = /*[[${#strings.substringBefore(obj.id,'-')}]]*/ '0';
+               var  varID = /*[[${#strings.substringAfter(obj.id,'-')}]]*/ '00';
+               for (var i = 0; i < noOfVariants; i++) { // iterate number variants
+                  var  iHex = i.toString(16).padStart(2, '0'); // hex string in TLA (00...0f, 10...ff, 100...)
+                  if  (iHex.localeCompare(varID)) { 
+                      document.write('<a href="/sentence/'+sentenceID+'-'+i.toString(16).padStart(2, '0')+'">#'+(i+1)+'</a>'); // link to variant
+                  } else { // the current variant 
+                      document.write('<strong>&gt;&gt; #'+(i+1)+' &lt;&lt;</strong>');  // simply in bold, w/o link
+                  }
+                  if (i < noOfVariants -1) { 
+                      document.write(', ');  // comma if non-final entry
+                   } else {
+                      document.write('.');  // period if final entry
+                   }
+               }
+         </script>
     </div>
 
     <!-- sentence dating -->

src/main/resources/templates/fragments/details.html

@@ -18,8 +18,11 @@ <h2 class="id ml-3 mt-sm-1">
     <div th:fragment="sentence-page-header" class="row mb-sm-3 d-flex justify-content-between details-header">
 		<div id="title-header">
 			<h2 class="id ml-3 mt-sm-1" th:with="isVariant=${#strings.contains(obj.id,'-')}, stableId=${isVariant ? #strings.substringBefore(obj.id,'-') : obj.id}, varNo=${isVariant ? #strings.substringAfter(obj.id,'-') : ''}">
-			  <span class="words-breakable" th:text="#{object_id_label_BTSSentence} + ' ' + ${stableId}">Sentence ID</span>
-          <span th:if="${isVariant}" th:text="'('+#{sentence_variant_label}+' '+(${varNo}+1)+')'">(Var. 00)</span>
+			  <span class="words-breakable" th:text="#{object_id_label_BTSSentence} + ' ' + ${stableId}">Sentence ID</span><span th:if="${isVariant}">(Var. 
+          <script th:inline="javascript">
+                  var  varID = /*[[${#strings.substringAfter(obj.id,'-')}]]*/ '00';
+                  document.write(parseInt(varID, 16)+1);
+            </script>)</span>
 			</h2>
 		</div>
 		<div th:replace="fragments/common :: social('sentence-page')"/>