{% extends "layout.html" %}
{% block content %}
  <section class="hero">
    <section class="section">
      <section class="container">
        <section class="session" style="margin-top: 40px;">
          <div class="card is-transparent">
            <div class="card-image">
              <figure class="image is-3by1"><img src="https://unsplash.it/900/300?{{ event.address }}"
                                                 alt="Image"></figure>
            </div>
            <div class="card-content" style="padding-top: 60px;">
              <div class="content">
                <table class="table is-no-bordered" width="100%">
                  <tbody>
                  <tr style="padding: 0px;">
                    <td>
                      <p class="title is-2">{{ event.event_info.title }}</p>
                      <p class="subtitle is-6">Created by <a>{{ host.moniker }} (
                        Account: {{ host.address }} )</a></p>
                    </td>
                    <td width="30%">
                      <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>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <table class="table is-no-bordered" width="100%">
                  <tbody>
                  <tr style="padding: 0px;">
                    <td>
                      <p>Event Detail:</p>
                      <p>{{ event.event_info.description }}</p>
                    </td>
                    <td width="30%">
                      <hr>
                      <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-map-marker" style="margin-right:2px;"></i>
                        </span> {{ event.event_info.location }}</p>
                      <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-calendar"></i>
                        </span> {{ event.display_start_time }}</p>
                      <p><span class="icon is-small is-left" style="margin-right:4px;">
                          <i class="fa fa-hourglass-start"></i>
                        </span> {{ event.display_end_time }}</p>
                      <section class="section" style="padding: 6px 0px;" id="modal">
                        <a class="button fullwidth is-link is-bold"
                           onclick="$('#buyTicket').toggleClass('is-active')">Buy Ticket</a>
                        <div class="modal" id="buyTicket">
                          <div class="modal-background"></div>
                          <div class="modal-card">
                            <article class="message is-light">
                              <div class="message-header">
                                <h4 class="subtitle" style="margin-bottom:-6px;">Buy
                                  Ticket</h4>
                                <button class="delete"
                                        onclick="$('#buyTicket').toggleClass('is-active')"></button>
                              </div>
                              <div class="message-body">
                                <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 %}
                                    <div class="contents">
                                      <p>Please confirm you are going to buy the
                                        ticket for
                                        this event: </p>
                                      <p class="title is-3">{{ event.event_info.title }}</p>
                                      <p>by paying <b>{{ event.display_price }}
                                        TBA</b></p>
                                      <table class="table is-no-bordered"
                                             width="100%">
                                        <tbody>
                                        <tr>
                                          <td style="padding: 0px;"
                                              width="66.6666%">
                                            <br>
                                            <div class="field">
                                              <p class="control">
                                                <label class="checkbox">
                                                  <input type="checkbox"
                                                         onclick="$('#buyTicketButton').prop('disabled', !$('#buyTicketButton').prop('disabled'))">
                                                  By click the button below, I agree with the payment information and
                                                  confirm to buy the ticket.
                                                </label>
                                              </p>
                                            </div>
                                            <br>
                                            <input type=submit
                                                   id='buyTicketButton'
                                                   value='Buy Ticket'
                                                   class="button is-link"
                                                   disabled/>
                                          </td>
                                          <td style="padding: 0px;">
                                            <figure class="image"
                                                    style="display: block; margin-left: auto; margin-right: 0px; width: 80%;">
                                              <img src="{{ qrcode(url) }}"
                                                   alt="Image">
                                            </figure>
                                          </td>
                                        </tr>
                                        </tbody>
                                      </table>
                                    </div>
                                  {% endif %}
                                </form>
                              </div>
                            </article>
                          </div>

                        </div>
                      </section>
                      <section class="section" style="padding: 6px 0px;" id="modal">
                        <a class="button fullwidth is-link is-bold"
                           onclick="$('#useTicket').toggleClass('is-active')">Join Event</a>
                        <div class="modal" id="useTicket">
                          <div class="modal-background"></div>
                          <div class="modal-card">
                            <article class="message is-light">
                              <div class="message-header">
                                <h4 class="subtitle" style="margin-bottom:-6px;">Join
                                  Event</h4>
                                <button class="delete"
                                        onclick="$('#useTicket').toggleClass('is-active')"></button>
                              </div>
                              <div class="message-body" style="padding-bottom: 60px;">
                                <div class="contents">
                                  <p>Join us in</p>
                                  <p class="title is-3">{{ event.event_info.title }}</p>
                                  <p>by scanning the QR code below</p>
                                  <figure class="image"
                                          style="display: block; margin-left: auto; margin-right: auto; width: 30%;">
                                    <img src="{{ qrcode(consume_url) }}"
                                         alt="Image">
                                  </figure>
                                </div>
                              </div>
                            </article>
                          </div>
                        </div>
                      </section>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <section class="section">
            <h1 class="title is-3"> Who already got the tickets? </h1>
            <hr>

            <section class="section">
              <div class="columns is-multiline features">

                <table class="table" style="width: 100%;">
                  <thead>
                  <tr>
                    <th>Hash</th>
                    <th>Buyer</th>
                    <th>Time</th>
                  </tr>
                  </thead>
                  <tbody>
                  {% if tx_lists %}
                    {% for tx_list in tx_lists %}
                      {% for tx in tx_list %}
                        <tr>
                          <td>
                            <a href="{{ forge_web }}{{ tx.hash }}"
                               target="_blank">{{ tx.hash }}</a>
                          </td>
                          <td> {{ tx.receiver }} </td>
                          <td> {{ tx.time }} </td>
                        </tr>
                      {% endfor %}
                    {% endfor %}
                  {% else %}
                  {% endif %}
                  </tbody>
                </table>
              </div>
            </section>
          </section>
        </section>
      </section>
    </section>
  </section>
{% endblock %}
