Add statement summary to details page

nummi/main/static/main/css/main.css

@@ -426,3 +426,34 @@ a,
     content: "\2002";
   }
 }
+
+.statement-details {
+  display: grid;
+  grid-template-columns: repeat(4, min-content);
+  grid-gap: var(--gap);
+  align-items: center;
+
+  > span:nth-child(2) {
+    display: grid;
+    grid-auto-rows: min-content;
+    > span[class^="ri-"] {
+      font-size: 2rem;
+    }
+    > span.value {
+      text-align: right;
+    }
+  }
+  > span:first-child,
+  > span:nth-child(3) {
+    display: grid;
+    border: var(--gray) 1px solid;
+    padding: 0.75rem;
+
+    > .date {
+      text-align: right;
+    }
+    > .value {
+      font-size: 2rem;
+    }
+  }
+}

nummi/statement/templates/statement/statement_detail.html

@@ -18,6 +18,22 @@
     <p>
         <a href="{% url "edit_statement" statement.id %}">{{ "file-edit"|remix }}{% translate "Edit statement" %}</a>
     </p>
+    <div class="statement-details">
+        <span>
+            <span class="date">{{ statement.start_date|date:"Y-m-d" }}</span>
+            <span class="value">{{ statement.start_value|value }}</span>
+        </span>
+        <span>
+            <span class="value">{{ statement.sum|pmvalue }}</span>
+            {{ "arrow-right"|remix }}
+            {% if statement.diff != statement.sum %}<span class="value">{{ statement.diff|pmvalue }}</span>{% endif %}
+        </span>
+        <span>
+            <span class="date">{{ statement.date|date:"Y-m-d" }}</span>
+            <span class="value">{{ statement.value|value }}</span>
+        </span>
+        {{ statement.sum|check:statement.diff }}
+    </div>
     <section>
         <h3>{% translate "Transactions" %}</h3>
         {% include "transaction/transaction_table.html" %}