{% extends 'layout.twig' %}
{% block body %}
    {% include 'nav.twig' %}
    <img class="bannerimage" src="images/events.png">

    {% if events|length != 0 %}
        <div id="event_page" class="container">
            {% for event in events %}
            <div class="row">
                
                    <div class="col">
                        <div class="events_icon">
                            <strong>{{ event.month }}</strong>
                            <span>{{ event.daynumber }}</span>
                            <em>{{ event.dayword }}</em>
                        </div></div>
                    <div class="col">
                        <h1>{{ event.title }}</h1>
                        <h2>{{ event.month }} {{ event.daynumber }}, {{ event.fullyear }}</h2>
                        <h2>{{ event.time }} {{ event.ampm }}</h2>
                        <p> Symphony Center<br>220 S. Michigan Ave.<br>Chicago, Illinois</p>
                    </div>
                    <div class="col">
                        <div class="events_icon">
                            <strong> Time </strong>
                            <span>{{ event.time }}</span>
                            <em>{{ event.ampm }}</em>
                        </div>
                    </div>
                
            </div>
            {% endfor %}
        </div>
    {% endif %}
{% endblock %}