schedule.html

---
layout: default
title: Schedule
---
<div class="container mx-auto px-6 py-12">
    <h1 class="text-4xl font-bold mb-8 dark:text-white">Event Schedule</h1>
    <div class="overflow-x-auto">
        <table class="min-w-full bg-white dark:bg-gray-800 rounded-lg overflow-hidden">
            <thead class="bg-gray-100 dark:bg-gray-900 transition-colors duration-200 text-lg text-gray-700 dark:text-gray-100">
                <tr>
                    <th class="px-6 py-3 text-left">Event Name</th>
                    <th class="px-6 py-3 text-left">Date</th>
                    <th class="px-6 py-3 text-left">Start Time</th>
                    <th class="px-6 py-3 text-left">End Time</th>
                    <th class="px-6 py-3 text-left">Location</th>
                </tr>
            </thead>
            
            <tbody class="divide-y divide-gray-200 dark:divide-gray-600">
                {% for event in site.data.events %}
                <tr class="text-sm sm:text-base text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-600 bg-white dark:bg-gray-700 transition-colors duration-150">
                    <td class="px-6 py-4">{{ event.name }}</td>
                    {% if event.date %}
                        <td class="px-6 py-4">{{ event.date | date: "%B %d, %Y" }}</td>
                    {% else %}
                        <td class="px-6 py-4">TBD</td>
                    {% endif %}
                    
                    {% if event.start_time %}
                        <td class="px-6 py-4">{{ event.start_time | date: "%I:%M %p" }}</td>
                    {% else %}
                        <td class="px-6 py-4">TBD</td>{% endif }
                    {% endif %}
                    
                    {% if event.end_time %}
                        <td class="px-6 py-4">{{ event.end_time | date: "%I:%M %p" }}</td>
                    {% else %}
                        <td class="px-6 py-4">TBD</td>
                    {% endif %}
                    
                    {% if event.location %}
                        <td class="px-6 py-4">{{ event.location }}</td>
                    {% else %}
                        <td class="px-6 py-4">TBD</td>
                    {% endif %}
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>