{% if site.events.size > 0 %}
<div class="card sidebar mb-3">
    <header class="card-header">
        Events
    </header>
    <ul class="list-group list-group-flush">
        {% capture now-unix %}{{ 'now' | date: '%s' | divided_by: 86400 }}{% endcapture %}
        {% assign events = site.events | sort:'start_date' %}
        {% assign offset_var = 0 %}
        {% for event in events %}
            {% capture event-time %}{{ event.end_date | date: '%s' | divided_by: 86400 }}{% endcapture %}
            {% if now-unix > event-time %}
                {% assign offset_var = offset_var|plus:1 %}
            {% endif %}
        {% endfor %}
        {% for event in events offset:offset_var limit:3 %}
            {% capture event-time %}{{ event.start_date | date: '%s' | divided_by: 86400 }}{% endcapture %}
            {% if now-unix <= event-time %}
            <li class="list-group-item" itemscope itemtype="http://schema.org/Event">
                <div class="card-body">
                    <header>
                        <h6 itemprop="name about"><a href="{{ event.url | relative_url }}">{{ event.title }}</a></h6>
                        <ul class="list-unstyled">
                            <li><span class="far fa-map-marker"></span>
                                <div class="d-inline" itemprop="location" itemscope itemtype="http://schema.org/Place">
                                    <span itemprop="name">{{ event.location }}</span>
                                    <span class="d-none" itemprop="address">{{ event.location }}</span>
                                </div>
                            </li>
                            <li>
                                <span class="far fa-calendar-alt"></span>
                                <time datetime="{{ event.start_date | date_to_xmlschema }}" itemprop="startDate">
                                    {% if event.end_date %}Start: {% else %}Date: {% endif %}{{ event.start_date | date: "%b %-d, %Y %H:%M" }}
                                </time>
                            </li>
                            {% if event.end_date %}
                            <li>
                                <span class="far fa-calendar-alt"></span>
                                <time datetime="{{ event.end_date | date_to_xmlschema }}" itemprop="endDate">
                                    End: {{ event.end_date | date: "%b %-d, %Y %H:%M" }}
                                </time>
                            </li>
                            {% endif %}
                        </ul>
                    </header>
                    <div class="card-text text-justify" itemprop="description">
                        {{ event.content }}
                    </div>
                </div>
            </li>
            {% endif %}
        {% endfor %}
    </ul>
</div>
{% endif %}