{% extends "layout.html" %}
{% block content %}
<section class="hero">
    <section class="session">
        <br>
        <br>
        <section class="hero is-light">
            <div class="hero-body">
                <div class="container has-text-centered">
                    <h1 class="title">Event Details</h1>
                </div>
            </div>
        </section>
        <br>
        <br>
        <div class="columns">
            <div class="column">
                <div class="card" style="height: 350px; width: 380px;">

                    <figure class="image">
                        <img src="{{ qrcode(url) }}" alt="Image">
                    </figure>

                </div>
            </div>
            <div class="column">
                <div class="card">
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <figure class="image" style="height: 50px; width: 50px;"><img
                                        src="https://source.unsplash.com/random/96x96" alt="Image"></figure>
                            </div>
                            <div class="media-content">
                                <p class="title is-4">{{event.event_info.title}}</p>
                                <p class="subtitle is-6">@Bellevue @2019-01-02</p>
                            </div>
                        </div>
                        <div class="content">
                            <div class="tags are-large">
                <span class="tag are-large is-warning">Tickets：
                    {{ event.event_info.remaining }}/{{ event.event_info.total }}</span>
                            </div>
                            <p>{{event.event_info.description}} </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris</p>
                            <br>
                            <form method="POST" action="/buy">
                                {{ form.hidden_tag() }}
                                <input type="hidden" name="address" value="{{ event.address }}"/>
                                {% if event.event_info.remaining == 0 %}
                                <p class=""><input type=submit value='Buy' class="button is-info" disabled/></p>
                                {% else %}
                                <p class=""><input type=submit value='Pay {{event.event_info.ticket_price}} ABT'
                                                   class="button is-info"/></p>
                                {% endif %}
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
{% endblock %}
