{% macro render_field_with_errors(field) %}
    {% set label_text = field.label.text + ' *' if field.flags.required else field.label.text %}
    <div class="form-group row {% if field.errors %} has-error{% endif -%}">
    {{ field.label(text=label_text, class="col-sm-2 col-form-label") }}
    <div class="input-group col-sm-10">
      {% set field_class = kwargs['class'] if 'class' in kwargs else '' %}
      {% set field_class = field_class + ' form-control' %}
      {% if field.errors %}
        {% set field_class = field_class + ' is-invalid' %}
      {% endif %}

      {{ field(class=field_class, **kwargs)|safe }}

      {% if 'ri' in kwargs %}
        {% if kwargs['ri'] == 'rrule' %}
          <script type="text/javascript">
            $( function() {
              $("textarea[name=recurrence_rule]").recurrenceinput({lang:'de', startField: "start",  ajaxURL: "{{ url_for('event_rrule') }}", firstDay: 1});
            });
          </script>
        {% endif %}
      {% endif %}

      {% if field.errors %}
      <div class="invalid-feedback">
          {% for error in field.errors %}
          <div>{{ error }}</div>
          {% endfor %}
      </div>
      {% endif %}
    </div>
    </div>
{% endmacro %}

{% macro render_field(field) %}
  <p>{{ field(class="btn btn-primary", **kwargs)|safe }}</p>
{% endmacro %}

{% macro render_field_errors(field) %}
  <p>
    {% if field and field.errors %}
      <ul>
      {% for error in field.errors %}
        <li>{{ error }}</li>
      {% endfor %}
      </ul>
    {% endif %}
  </p>
{% endmacro %}

{% macro render_ooa(ooa) %}
  {% if ooa.admin_unit %}
    {{ ooa.admin_unit.name }}
  {% endif %}
  {% if ooa.organization %}
    {{ ooa.organization.name }}
  {% endif %}
{% endmacro %}

{% macro render_ooa_with_link(ooa) %}
  {% if ooa.admin_unit %}
    <a href="{{ url_for('admin_unit', admin_unit_id=ooa.admin_unit.id) }}">{{ ooa.admin_unit.name }}</a>
  {% endif %}
  {% if ooa.organization %}
    <a href="{{ url_for('organization', organization_id=ooa.organization.id) }}">{{ ooa.organization.name }}</a>
  {% endif %}
{% endmacro %}

{% macro render_location(location) %}
{%- if location.street -%}
  {{ location.street }}, {{ location.postalCode }} {{ location.city }}
{%- else -%}
  {{ location.postalCode }} {{ location.city }}
{%- endif -%}
{% endmacro %}

{% macro render_place(place) %}
{%- if place.location -%}
  {{ place.name }}, {{render_location(place.location)}}
{%- else -%}
  {{ place.name }}
{%- endif -%}
{% endmacro %}

{% macro render_events_sub_menu(user_can_create_event, user_can_list_event_suggestion) %}
<div class="my-4">
{% if user_can_create_event %}
  <a class="btn btn-primary my-1" href="{{ url_for('event_create') }}" role="button"><i class="fa fa-lock"></i> {{ _('Create event') }}</a>
{% endif %}
  <a class="btn btn-secondary my-1" href="{{ url_for('event_suggestion_create') }}" role="button"><i class="fa fa-plus"></i> {{ _('Suggest event') }}</a>
</div>

{% if user_can_list_event_suggestion %}
<div class="list-group my-4">
  <a href="{{ url_for('eventsuggestions') }}" class="list-group-item list-group-item-action">
      {{ _('Event suggestions') }}
      <i class="fa fa-caret-right"></i>
  </a>
</div>
{% endif %}

{% endmacro %}

{% macro render_events(events) %}
<div class="table-responsive">
  <table class="table table-sm table-bordered table-hover table-striped">
      <thead>
          <tr>
              <th>{{ _('Date') }}</th>
              <th>{{ _('Name') }}</th>
              <th>{{ _('Host') }}</th>
              <th>{{ _('Location') }}</th>
          </tr>
      </thead>
      <tbody>
          {% for event in events %}
              <tr>
                  <td>{{ render_event_date(event) }}</td>
                  <td>
                      <a href="{{ url_for('event', event_id=event.id) }}">{{ event.name }}</a>
                      {% if event.verified %}
                        <i class="fa fa-check-circle text-success" data-toggle="tooltip" title="{{ _('Verified') }}"></i>
                      {% endif %}
                  </td>
                  <td>{{ render_ooa(event.host) }}</td>
                  <td>{{ render_place(event.place) }}</td>
              </tr>
          {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="list-group my-4">
    <a href="{{ url_for('events') }}" class="list-group-item list-group-item-action list-group-item-primary">
        {{ _('Show all events') }}
        <i class="fa fa-caret-right"></i>
    </a>
  </div>

  {% endmacro %}

{% macro render_location_card(location, place=None) %}
{% if location %}
<div class="card card-body">
  <p>
      {{ location.street }}<br />
      {{ location.postalCode }} {{ location.city }}
  </p>

  <p>
      <a href="http://www.google.com/maps?q={% if place %}{{ render_place(place) | quote_plus }}{% else %}{{ render_location(location) | quote_plus }}{% endif %}">{{ _('Show on Google Maps') }}</a>
  </p>

</div>
{% endif %}
{% endmacro %}

{% macro render_string_prop(prop, icon = None, label_key = None) %}
{% if prop %}
<div>
  {% if icon %}<i class="fa fa-fw {{ icon }}" data-toggle="tooltip" title="{{ _(label_key) }}"></i>{% endif %}
  {{ prop }}
</div>
{% endif %}
{% endmacro %}

{% macro render_bool_prop(prop, icon, label_key) %}
{% if prop %}
<div>
  <i class="fa fa-fw {{ icon }}" data-toggle="tooltip" title="{{ _(label_key) }}"></i>
  {{ _(label_key) }}
</div>
{% endif %}
{% endmacro %}

{% macro render_enum_prop(prop, icon, label_key) %}
{% if prop and prop.value > 1 %}
<div>
  <i class="fa fa-fw {{ icon }}" data-toggle="tooltip" title="{{ _(label_key) }}"></i>
  {{ prop | loc_enum }}
</div>
{% endif %}
{% endmacro %}

{% macro render_range_prop(from, to, icon, label_key) %}
{% if from or to %}
<div>
  <i class="fa fa-fw {{ icon }}" data-toggle="tooltip" title="{{ _(label_key) }}"></i>
  {{ from }} - {{ to }}
</div>
{% endif %}
{% endmacro %}

{% macro render_tag_prop(tags) %}
{% if tags %}
<div>
  <i class="fa fa-fw fa-tags" data-toggle="tooltip" title="{{ _('Tags') }}"></i>
  {{ tags }}
</div>
{% endif %}
{% endmacro %}

{% macro render_link_prop(link) %}
{% if link %}
<div>
  <i class="fa fa-fw fa-link" data-toggle="tooltip" title="{{ _('Link') }}"></i>
  <a href="{{ link }}">{{ link }}</a>
</div>
{% endif %}
{% endmacro %}

{% macro render_email_prop(email) %}
{% if email %}
<div>
  <i class="fa fa-fw fa-envelope" data-toggle="tooltip" title="{{ _('Email') }}"></i>
  <a href="mailto:{{ email }}">{{ email }}</a>
</div>
{% endif %}
{% endmacro %}

{% macro render_phone_prop(phone) %}
{% if phone %}
<div>
  <i class="fa fa-fw fa-phone" data-toggle="tooltip" title="{{ _('Phone') }}"></i>
  <a href="tel:{{ phone }}">{{ phone }}</a>
</div>
{% endif %}
{% endmacro %}

{% macro render_location_prop(location) %}
{% if location %}
<div>
  <i class="fa fa-fw fa-map-marker" data-toggle="tooltip" title="{{ _('Location') }}"></i>
  {{ render_location(location) }}
</div>
{% endif %}
{% endmacro %}

{% macro render_image(image_id) %}
{% if image_id %}
<img src="{{ url_for('image', id=image_id) }}" class="img-fluid rounded" style="max-width:700px;" />
{% endif %}
{% endmacro %}

{% macro render_logo(image_id) %}
{% if image_id %}
<img src="{{ url_for('image', id=image_id) }}" class="img-fluid rounded" style="max-width:200px;" />
{% endif %}
{% endmacro %}

{% macro render_event_props(event, start, end, dates = None) %}
  <div class="card mb-3">
    <div class="card-header">
      {{ _('Event') }}
    </div>

    <div class="card-body">
      <h5 class="card-title">{{ event.name }}</h5>
      {% if dates and dates|length > 1 %}
      <div>
        <i class="fa fa-fw fas fa-calendar" data-toggle="tooltip" title="{{ _('Date') }}"></i>
        {{ start | timeformat('short') }}
        {% if end %}- {{ end | timeformat('short') }}{% endif %}
        | <a href="#event-dates">{{ _('%(count)d event dates', count=dates|length) }}</a>
      </div>
      {% else %}
      <div>
        <i class="fa fa-fw fa-calendar" data-toggle="tooltip" title="{{ _('Date') }}"></i>
        {{ start | datetimeformat('short') }}
        {% if end %}- {{ end | datetimeformat('short') }}{% endif %}
      </div>
      {% endif %}
      {{ render_enum_prop(event.status, 'fa-info-circle', 'Status') }}
      {% if event.previous_start_date %}
      <div><i class="fa fa-fw fa-calendar-times" data-toggle="tooltip" title="{{ _('Previous start date') }}"></i> {{ event.previous_start_date | datetimeformat('short') }}</div>
      {% endif %}
      <!--<div><i class="fa fa-fw fa-map-marker" data-toggle="tooltip" title="{{ _('Location') }}"></i> <a href="{{ url_for('place', place_id=event.place.id) }}">{{ render_place(event.place) }}</a></div>-->
      {% if event.verified %}
      <div><i class="fa fa-fw fa-check-circle text-success" data-toggle="tooltip" title="{{ _('Verified') }}"></i> {{ _('Verified') }}</div>
      {% endif %}

      {% if event.photo_id %}
        <div class="my-4">{{ render_image(event.photo_id) }}</div>
      {% endif %}

      <div class="my-4">{{ event.description }}</div>

      <div class="mt-4">
        {{ render_link_prop(event.external_link) }}
        {{ render_link_prop(event.ticket_link) }}
        {% if event.category_id %}
          <div><i class="fa fa-fw fa-archive" data-toggle="tooltip" title="{{ _('Category') }}"></i> {{ event.category | event_category_name }}</div>
        {% endif %}
        {{ render_tag_prop(event.tags) }}
        {{ render_bool_prop(event.kid_friendly, 'fa-child', 'Kid friendly') }}
        {{ render_bool_prop(event.accessible_for_free, 'fa-door-open', 'Accessible for free') }}
        {{ render_range_prop(event.age_from, event.age_to, 'fa-people-arrows', 'Typical Age range') }}
        {{ render_enum_prop(event.target_group_origin, 'fa-users', 'Target group origin') }}
        {{ render_enum_prop(event.attendance_mode, 'fa-mouse-pointer', 'Attendance mode') }}
        <!--<div><i class="fa fa-fw fa-users" data-toggle="tooltip" title="{{ _('Host') }}"></i> {{ render_ooa_with_link(event.host) }}</div>-->
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header">
      {{ _('Place') }}
    </div>
    <div class="card-body">
      <h5 class="card-title"><a href="{{ url_for('place', place_id=event.place.id) }}" class="text-dark">{{ event.place.name }}</a></h5>

      {% if event.place.photo_id %}
        <div class="my-4">{{ render_image(event.place.photo_id) }}</div>
      {% endif %}

      {% if event.place.description %}
      <div class="my-4">{{ event.place.description }}</div>
      {% endif %}

      <div class="my-4">
        {{ render_link_prop(event.place.url) }}
        {{ render_location_prop(event.place.location) }}
      </div>

      <p>
          <a href="http://www.google.com/maps?q={{ render_place(event.place) | quote_plus }}" class="btn btn-secondary">{{ _('Show directions') }}</a>
      </p>
    </div>
  </div>

  {% if event.organizer %}

  <div class="card mb-3">
    <div class="card-header">
      {{ _('Organizer') }}
    </div>
    <div class="card-body">
          {{ render_string_prop(event.organizer.name) }}
          {{ render_string_prop(event.organizer.org_name) }}
          {{ render_link_prop(event.organizer.url) }}
          {{ render_email_prop(event.organizer.email) }}
          {{ render_phone_prop(event.organizer.phone) }}
    </div>
  </div>

  {% endif %}

  {% if event.host %}

  <div class="card mb-3">
    <div class="card-header">
      {{ _('Host') }}
    </div>
    <div class="card-body">

      {% if event.host.admin_unit %}
        <h5 class="card-title"><a href="{{ url_for('admin_unit', admin_unit_id=event.host.admin_unit.id) }}" class="text-dark">{{ event.host.admin_unit.name }}</a></h5>

        {% if event.host.admin_unit.logo_id %}
          <div class="my-4">{{ render_logo(event.host.admin_unit.logo_id) }}</div>
        {% endif %}

        <div class="my-4">
          {{ render_link_prop(event.host.admin_unit.url) }}
          {{ render_email_prop(event.host.admin_unit.email) }}
          {{ render_phone_prop(event.host.admin_unit.phone) }}
          {{ render_location_prop(event.host.admin_unit.location) }}
        </div>

      {% endif %}

      {% if event.host.organization %}
        <h5 class="card-title"><a href="{{ url_for('organization', organization_id=event.host.organization.id) }}" class="text-dark">{{ event.host.organization.name }}</a></h5>

        {% if event.host.organization.logo_id %}
          <div class="my-4">{{ render_logo(event.host.organization.logo_id) }}</div>
        {% endif %}

        <div class="my-4">
          {{ render_link_prop(event.host.organization.url) }}
          {{ render_email_prop(event.host.organization.email) }}
          {{ render_phone_prop(event.host.organization.phone) }}
          {{ render_location_prop(event.host.organization.location) }}
        </div>

      {% endif %}

    </div>
  </div>

  {% endif %}
{% endmacro %}

{% macro render_google_sign_in_button() %}
<a href="{{ url_for('google.login') }}" class="btn btn-google" role="button"><i class="fab fa-google mr-2"></i> {{ _('Sign in with Google') }}</a>
{% endmacro %}

{% macro render_google_place_autocomplete_header(location_only = False) %}
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=***REMOVED***&libraries=places"></script>
<script>
    function initialize() {
      var input = document.getElementById('location_search');
      var autocomplete = new google.maps.places.Autocomplete(input);
      google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place = autocomplete.getPlace();

            var street_number = "";
            var route = "";
            var city = "";

            for (var i = 0; i < place.address_components.length; i++) {
              var component = place.address_components[i]
              var addressType = component.types[0];
              var val = component.long_name

              if (addressType == 'street_number') {
                street_number = val;
              } else if (addressType == 'route') {
                route = val;
              } else if (addressType == 'locality') {
                city = val;
              } else if (addressType == 'administrative_area_level_1') {
                $('#location-state').val(val);
              } else if (addressType == 'postal_code') {
                $('#location-postalCode').val(val);
              }
            }

            {% if not location_only %}
              $('#name').val(place.name);

              if (place.website) {
                $('#url').val(place.website);
              }
            {% endif %}

            $('#location-street').val([route, street_number].join(' '));
            $('#location-city').val(city);
            $('#location-latitude').val(place.geometry.location.lat());
            $('#location-longitude').val(place.geometry.location.lng());

            $('#location_search').val('');
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>
{% endmacro %}

{% macro render_google_place_autocomplete_field() %}
  <div class="form-group row">
    <div class="input-group col-sm-12">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fab fa-google"></i></span>
      </div>
      <input id="location_search" type="text" class="form-control" placeholder="{{ _('Search location on Google') }}" autocomplete="on" runat="server" />
    </div>
  </div>
{% endmacro %}

{% macro render_event_date(event) %}
  {{ event.start | datetimeformat('short') }}
  {% if event.recurrence_rule %}
  <i class="fas fa-history"></i>
  {% endif %}
{% endmacro %}