{% extends "layout.html" %}
{% from "_macros.html" import render_datepicker_js, render_field_with_errors, render_field %}

{% block content %}

<h1>{{ _('Create event') }}</h1>

<form action="{{ url_for('event_create') }}" method="POST" enctype="multipart/form-data">
  {{ form.hidden_tag() }}

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Event') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.name) }}
      {{ render_field_with_errors(form.description) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Event date') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.start) }}
      {{ render_field_with_errors(form.end) }}
      {{ render_field_with_errors(form.recurrence_rule, ri="rrule") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Status') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.status, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.previous_start_date) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Host') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.host_id, class="autocomplete w-100") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Organizer') }}
    </div>
    <div class="card-body">
      {{ form.organizer.hidden_tag() }}
      {{ render_field_with_errors(form.organizer.form.name) }}
      {{ render_field_with_errors(form.organizer.form.org_name) }}
      {{ render_field_with_errors(form.organizer.form.url) }}
      {{ render_field_with_errors(form.organizer.form.email) }}
      {{ render_field_with_errors(form.organizer.form.phone) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Place') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.place_id, class="autocomplete w-100") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Target group') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.target_group_origin, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.kid_friendly, style="width: fit-content; flex: initial;") }}
      {{ render_field_with_errors(form.age_from) }}
      {{ render_field_with_errors(form.age_to) }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Additional information') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.photo_file) }}
      {{ render_field_with_errors(form.category_id, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.external_link) }}
      {{ render_field_with_errors(form.ticket_link) }}
      {{ render_field_with_errors(form.tags) }}
      {{ render_field_with_errors(form.attendance_mode, class="autocomplete w-100") }}
      {{ render_field_with_errors(form.accessible_for_free, style="width: fit-content; flex: initial;") }}
    </div>
  </div>

  <div class="card mb-4">
    <div class="card-header">
      {{ _('Admin unit') }}
    </div>
    <div class="card-body">
      {{ render_field_with_errors(form.admin_unit_id, class="autocomplete w-100") }}
    </div>
  </div>

  {{ render_field(form.submit) }}

</form>

{% endblock %}