{% extends "layout.html" %}
{% block content %}

  <section class="hero">
    <br>
    <br>
    <section class="hero is-white">
      <div class="hero-body">
        <div class="container has-text-left">
          <h1 class="title is-1 separate">Welcome to Event Chain</h1>
          <h2 class="subtitle">Create and join events to start enjoying your day</h2>
        </div>
      </div>
    </section>
    <br>
    <br>
    <section class="section">
      <section class="container">
        {% if event_lists %}
          {% for events in event_lists %}
            <section class="section">
              <div class="columns is-multiline features">
                {% for event in events %}
                  <div class="column is-4">
                    <div class="card is-shady">
                      <div class="card-image">
                        <figure class="image is-16by9">
                          <a href={{ url_for('event_detail',address=event.address) }}>
                            <img src="https://unsplash.it/1600/900?{{ event.address }}"
                                 alt="{{ event.event_info.title }}"/>
                          </a>
                        </figure>
                      </div>
                      <div class="card-content">
                        <div class="content">
                          <h2 class="subtitle strong">
                            <a style="color:#404040;"
                               href={{ url_for('event_detail',address=event.address) }}>{{ event.event_info.title }}</a>
                          </h2>
                          <p>
                        <span class="icon is-small is-left">
                          <i class="fa fa-map-marker" style="margin-right:3px;"></i>
                        </span> {{ event.event_info.location }}</p>
                          <p>
                        <span class="icon is-small is-left">
                          <i class="fa fa-calendar" style="margin-right:3px;"></i>
                        </span> {{ event.display_start_time }}</p>
                          <hr>
                          <nav class="level">
                            <div class="level-item has-text-centered">
                              <div>
                                <p class="heading">Tickets</p>
                                <p class="title">{{ event.event_info.remaining }}/{{ event.event_info.total }}</p>
                              </div>
                            </div>
                            <div class="level-item has-text-centered">
                              <div>
                                <p class="heading">Price</p>
                                <p class="title">{{ event.display_price }} ABT</p>
                              </div>
                            </div>
                          </nav>
                        </div>
                      </div>
                      <footer class="card-footer">
                        <a class="card-footer-item"
                           href={{ url_for('event_detail',address=event.address) }}>Event
                          Details</a>
                      </footer>
                    </div>
                  </div>
                {% endfor %}
              </div>
            </section>
          {% endfor %}
        {% else %} <h1>Sorry, no event yet</h1>
        {% endif %}
      </section>
    </section>

  </section>



{% endblock %}
