enhanced worship edit page

src/content/admin/WorshipManagement.vue

@@ -47,7 +47,7 @@
     </form>
 
     <ul>
-      <li v-for="worship in worships" :key="worship.id">
+      <li v-for="worship in worships" :key="worship.id" :class="dateIsLowerCurrentDate(worship.date) ? 'old-items' : ''">
         <span>{{ worship.title }} - {{ formatDate(worship.date) }}, {{ formatTime(worship.time) }}</span>
         <button @click="editWorship(worship)">Bearbeiten</button>
         <button @click="deleteWorship(worship.id)">Löschen</button>
@@ -169,6 +169,11 @@ export default {
     getEventPlaceName(eventPlaceId) {
       const place = this.eventPlaces.find(place => place.id === eventPlaceId);
       return place ? place.name : 'Unbekannter Ort';
+    },
+    dateIsLowerCurrentDate(date) {
+      const currentDate = new Date();
+      const inputDate = new Date(date);
+      return inputDate < currentDate;
     }
   }
 };
@@ -236,4 +241,12 @@ li:hover .tooltip {
   visibility: visible;
   opacity: 1;
 }
+
+li > span {
+  flex: 1;
+}
+
+.old-items {
+  color: #aaa;
+}
 </style>