{% extends "layout.html" %}
{% block content %}
<session class="hero">
    <br>
    <br>
    <section class="hero is-light">
        <div class="hero-body">
            <div class="container has-text-centered">
                <h1 class="title">Create Your Own Event!</h1>
                <br>
                <h2 class="subtitle">Fill in the following information and create your shiny event！</h2>
            </div>
        </div>
    </section>
    <br>
    <br>
</session>
<br>
<section class="container">
  <h3 class="title"></h3>
  <form id="create-product" action="/create" method="POST">
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text" name="title" placeholder="Event name">
        <span class="icon is-small is-left">
          <i class="fa fa-align-justify"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text" name="location" value="3150 Richards, Bellevue, WA" placeholder="3150 Richards, Bellevue, WA">
        <span class="icon is-small is-left">
          <i class="fa fa-align-justify"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text" name="ticket_price" placeholder="Ticket Price">
        <span class="icon is-small is-left">
          <i class="fa fa-dollar"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text" value="20" name="total" placeholder="Number of Ticket(20)">
        <span class="icon is-small is-left">
          <i class="fa fa-dollar"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text" value="2019/1/1" name="start_time" placeholder="Event start time">
        <span class="icon is-small is-left">
          <i class="fa fa-calendar"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control has-icons-left has-icons-right">
        <input class="input is-large" type="text"  value="2019/1/5" name="end_time" placeholder="">
        <span class="icon is-small is-left">
          <i class="fa fa-calendar"></i>
        </span>
        <span class="icon is-small is-right">
          <i class="fa fa-check"></i>
        </span>
      </p>
    </div>
    <div class="field">
      <p class="control">
        <textarea class="textarea is-large" type="text" name="description" placeholder="Event Description" style="height: 500px"></textarea>
      </p>
    </div>
    {{ form.hidden_tag() }}
    <div class="field is-grouped">
      <p class="control">
        <button class="button is-block is-primary is-large" name="submit">Create Now！</button>
      </p>
      <p class="help is-success result-text">
    </div>


  </form>

</section>
{% endblock %}