Update events page layout

Author: adeen-s

_layouts/events.html

@@ -7,6 +7,7 @@ <h1 class="has-text-centered">Events</h1>
   <p class="has-text-centered">Join us for community events that are focused on learning, sharing and networking</p>
     <br>
     <br>
+    <h3>Upcoming Events</h3>
     <table class="table is-fullwidth">
       <thead>
         <th class="has-text-centered">Event</th>
@@ -16,15 +17,51 @@ <h1 class="has-text-centered">Events</h1>
         <th class="has-text-centered">Description</th>
     </thead>
     <tbody>
-        <p class="has-text-centered">This page is being redesigned. <a href="mailto:info@codeindore.com">Get in touch with us</a> for any queries or details that you may have in the meantime.</p>
       {% for event in event_list %}
+        {% capture currentDate %}
+            {{ site.time | date: '%F' }}
+        {% endcapture %}
+        {%capture eventdate %}
+            {{ event.event-date | date: '%F' }}
+        {% endcapture %}
+        {% if eventdate >= currentDate %}
       <tr>
             <td class="has-text-centered"><a href="{{ event.event-url }}">{{ event.title }}</a></td>
             <td class="has-text-centered">{{ event.type }}</td>
             <td class="has-text-centered">{{ event.event-date | date:"%b %d, %Y" }}</td>
             <td class="has-text-centered">{{ event.city }}</td>
             <td class="has-text-centered">{{ event.description }}</td>
             </tr>
+      {% endif %}
+      {% endfor %}
+    </tbody>
+</table>
+    <h3>Previous Events</h3>
+    <table class="table is-fullwidth">
+      <thead>
+        <th class="has-text-centered">Event</th>
+        <th class="has-text-centered">Type</th>
+        <th class="has-text-centered">Date</th>
+        <th class="has-text-centered">Location</th>
+        <th class="has-text-centered">Description</th>
+    </thead>
+    <tbody>
+      {% for event in event_list %}
+      {% capture currentDate %}
+          {{ site.time | date: '%F' }}
+      {% endcapture %}
+      {%capture eventdate %}
+          {{ event.event-date | date: '%F' }}
+      {% endcapture %}
+      {% if eventdate < currentDate %}
+      <tr>
+            <td class="has-text-centered"><a href="{{ event.event-url }}">{{ event.title }}</a></td>
+            <td class="has-text-centered">{{ event.type }}</td>
+            <td class="has-text-centered">{{ event.event-date | date:"%b %d, %Y" }}</td>
+            <td class="has-text-centered">{{ event.city }}</td>
+            <td class="has-text-centered">{{ event.description }}</td>
+            </tr>
+      {% endif %}
       {% endfor %}
     </tbody>
 </table>