{% extends '::base.html.twig' %}

{% block body -%}

    <h1>Event creation</h1>
<form action="/event/create" id="create_event_form">
<div id="showsheet_headliner" class="showsheet_section form-group">
	<div class="section_header">Headliner</div>
	<input type="text" name="headliner" placeholder="Headliner" class="quick_search form-control" searching="artist">
	<div class="prel">
		<div id="artist_search_results" class="search_results">
		</div>
	</div>
	<div id="showsheet_artist_exist"></div>
</div>
<div id="showsheet_venue" class="showsheet_section form-group">
	<div class="section_header">Venue</div>
	<input type="text" name="venue" placeholder="Venue" class="quick_search form-control" searching="venue">
	<div class="prel">
		<div id="venue_search_results" class="search_results">
		</div>
	</div>
	<div id="showsheet_venue_exist"></div>
</div>
<div class="form-group">
	<label>Date of Show:</label>
	<div class="input-group">
	  <div class="input-group-addon">
	    <i class="fa fa-calendar"></i>
	  </div>
	  <input type="text" class="form-control" data-inputmask="'alias': 'dd/mm/yyyy'" data-mask="" name="event_date">
	</div><!-- /.input group -->
</div>
<div class="form-group">
  <label>Door Time:</label>
  <div class="input-group bootstrap-timepicker">
    <input type="text" class="form-control timepicker" name="event_door_time">
    <div class="input-group-addon">
      <i class="fa fa-clock-o"></i>
    </div>
  </div><!-- /.input group -->
</div>
<div class="form-group">
  <label>Show Time:</label>
  <div class="input-group bootstrap-timepicker">
    <input type="text" class="form-control timepicker" name="event_show_time">
    <div class="input-group-addon">
      <i class="fa fa-clock-o"></i>
    </div>
  </div><!-- /.input group -->
</div>
<div class="form-group">
  <label>Curfew:</label>
  <div class="input-group bootstrap-timepicker">
    <input type="text" class="form-control timepicker" name="event_curfew_time">
    <div class="input-group-addon">
      <i class="fa fa-clock-o"></i>
    </div>
  </div><!-- /.input group -->
</div>
<div class="form-group">
  <label>Load in</label>
  <input type="text" class="form-control" placeholder="Load In" name="event_load_in">
</div>
<div class="form-group">
<label>Format</label>
<select class="form-control" name="event_format">
<option value="all">All Ages</option>
<option value="18">18+</option>
<option value="21">21+</option>
</select>
</div>

<button class="btn btn-primary">
Create Event
</button>
</form>
 <script>
$(document).ready(function(){
	 //Timepicker


        $(".timepicker").timepicker();
         $("[data-mask]").inputmask();
});
 </script>
{% endblock %}