{% extends "layout.html" %}
{% block content %}
  <session class="hero">
    <br>
    <br>
    <section class="hero">
      <br>
      <br>
      <section class="hero is-white">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title is-2">Greate Your Own Event!</h1>
            <h2 class="subtitle">Fill in the following information and create your shiny event！</h2>
          </div>
        </div>
      </section>
      <br>
      <br>
  </session>
  <br>
  <section class="container">
    <div class="columns">
      <div class="column"></div>
      <div class="column is-three-quarters">

        {#        <section class="section">#}
        {#          {% for message in get_flashed_messages() %}#}
        {##}
        {#            <article class="message is-warning">#}
        {#              <div class="message-header">#}
        {#                <p>Warning</p>#}
        {#                <button class="delete"></button>#}
        {#              </div>#}
        {#              <div class="message-body">{{ message }}#}
        {#              </div>#}
        {#            </article>#}
        {#          {% endfor %}#}
        {#        </section>#}

        <form id="create-product" action="/create" method="POST">
          {#          {% for message in get_flashed_messages() %}#}
          {#            <div class="field">#}
          {#              <label class="label">Subject</label>#}
          {#              <div class="field-body">#}
          {#                <div class="field">#}
          {#                  <div class="control">#}
          {#                    <input class="input is-danger" type="text" placeholder="e.g. Partnership opportunity">#}
          {#                    <p class="help is-danger">#}
          {#                      {{ message }}#}
          {#                    </p>#}
          {#                  </div>#}
          {#                </div>#}
          {#              </div>#}
          {#            </div>#}
          {#          {% endfor %}#}
          <div class="field">
            <label class="label">Event Title</label>
            <p class="control">
              <input class="input is-normal" type="text" name="title"
                     placeholder="Give your event a brief name">
            </p>
          </div>
          <div class="field">
            <label class="label">Location</label>
            <p class="control">
              <input class="input is-normal" type="text" name="location"
                     placeholder="Where will your event be happened">
            </p>
          </div>
          <div class="field">
            <table class="table is-no-bordered" width="100%">
              <tbody>
              <tr>
                <td style="padding: 0px;">
                  <div class="field">
                    <label class="label">Price</label>
                    <p class="control">
                      <input class="input is-normal" type="text" name="ticket_price"
                             placeholder="0.00">
                    </p>
                  </div>
                </td>
                <td style="padding: 0px; padding-left: 10px;">
                  <div class="field">
                    <label class="label">Quantity available</label>
                    <p class="control">
                      <input class="input is-normal" type="text" name="total" placeholder="0">
                    </p>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="field">
            <table class="table is-no-bordered" width="100%">
              <tbody>
              <tr>
                <td style="padding: 0px;">
                  <div class="field">
                    <label class="label">Starts</label>
                    <p class="control">
                      <input class="input is-normal" type="text" value="" name="start_time"
                             placeholder="MM/DD/YYYY">
                    </p>
                  </div>
                </td>

                <td style="padding: 0px; padding-left: 10px;">
                  <div class="field">
                    <label class="label">Ends</label>
                    <p class="control">
                      <input class="input is-normal" type="text" value="" name="end_time"
                             placeholder="MM/DD/YYY">
                    </p>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
          <div class="field">
            <label class="label">Event Description</label>
            <p class="control">
          <textarea class="textarea is-normal" type="text" name="description"
                    placeholder="Include need-to-know information to make it easier for people to search for your event page and buy tickets once they're there."
                    style="height: 260px"></textarea>
            </p>
          </div>
          <div class="field" style="margin-top: 40px;">
            <p class="control has-text-right">
              <button class="button is-link is-bold is-large-font" name="submit">Publish Event
              </button>
            </p>
          </div>
        </form>
      </div>
      <div class="column"></div>
    </div>
  </section>
  <section class="section">
    <br>
    <br>
  </section>
{% endblock %}