{#
The location widget provides 3 core fields to describe the location; venue,
room and address, plus a checkbox to force the location inheritance from the
parent object. The key features and expected behaviour is the following:
* Clicking on a location field expands a dropdown list of possible options. The
  first item of the list is always active.
* A "just use" option is available at the bottom of the dropdown list, in case
  none of the available options satisfies the needs of the user.
* Actions after selecting a venue option:
    * Reordering the list of room options by pushing to the top of the list the
      room options associated with the current venue.
    * In case there is a room value and the associated venue is different that
      the new selected venue, the room value will be cleared.
* Actions after selecting a room option:
    * In case there is a venue value, and the associated venue of the newly
      selected room option is different, replace the former with the latter one.
* Navigation:
    * TAB: Fills in the field with the value of the active option and moves to
      the next location field.
    * ENTER/RIGHT: Fills in the field with the value of the active option and
      keeps the focus on the field.
    * UP/DOWN: Mark the previous/next option of the current active option as
      active.
    * ESC: Replace the field value with the latest selected value.
    * Click outside while dropdown list is open: Assuming some characters have
      been entered in the field, the widget will try to "guess" the location by
      comparing the value of the field with the available options. If it doesn't
      match with any, it will assume that a custom value was entered (faking a
      click on the "just use" option). In the case of the room field, the widget
      will compare the field value ONLY with the room options associated with
      the current venue. This is to avoid clearing the venue field by accident
      (see actions after selecting a room option).
#}

{% extends 'forms/base_widget.html' %}
{% from '_switch.html' import switch %}
{% block html %}
    <div class="i-location-field" id="{{ field.id }}-wrapper">
        <input type="hidden" id="{{ field.id }}" name="{{ field.name }}"
               value="{{ field._value() | tojson | forceescape }}" autofocus>
        <div class="wrapper">
            <div class="typeahead__container venue-container">
                <div class="typeahead__field">
                    <input id="location-venue-{{ field.id }}"
                           class="i-location-input-field"
                           type="text"
                           placeholder="{% trans %}Venue{% endtrans %}"
                           autocomplete="off">
                    <span class="keyword-highlighter"></span>
                    <span class="toggle-results-list icon-arrow-down"></span>
                    <div class="typeahead__result">
                        <div class="results-list-container" id="location-venue-{{ field.id }}-results"></div>
                    </div>
                </div>
            </div>
            <div class="typeahead__container room-container">
                <div class="typeahead__field">
                    <input id="location-room-{{ field.id }}"
                           class="i-location-input-field"
                           type="text"
                           placeholder="{% trans %}Room{% endtrans %}"
                           autocomplete="off">
                    <span class="keyword-highlighter"></span>
                    <span class="toggle-results-list icon-arrow-down"></span>
                    <div class="typeahead__result">
                        <div class="results-list-container" id="location-room-{{ field.id }}-results"></div>
                    </div>
                </div>
            </div>
            {% if field.edit_address -%}
                <textarea id="location-address-{{ field.id }}"
                          placeholder="{% trans %}Address{% endtrans %}"></textarea>
            {%- endif %}
            {% if field.allow_location_inheritance -%}
                <div class="location-inheritance-field">
                    <div class="checkbox-container">
                        <input id="location-inheritance-{{ field.id }}"
                               type="checkbox">
                        <label for="location-inheritance-{{ field.id }}">{% trans %}Use default{% endtrans %}</label>
                        <i class="info-helper"></i>
                    </div>
                </div>
            {%- endif %}
            <div id="availability-messages">
                <div id="room-available" class="availability-message-container">
                    <div class="availability-message success">
                        <i class="icon icon-checkmark"></i>
                        <div>
                            {% trans %}This room is available.{% endtrans %}
                            <br>
                            {% trans %}Would you like to book it?{% endtrans %}
                        </div>
                        {{ switch(id='create-booking', on_label=_('Yes'), off_label=_('No')) }}
                    </div>
                </div>
                <div id="room-available-prebook" class="availability-message-container">
                    <div class="availability-message success">
                        <i class="icon icon-checkmark"></i>
                        <div>
                            {% trans %}This room is available.{% endtrans %}
                            <br>
                            {% trans %}Would you like to request a booking?{% endtrans %}
                        </div>
                        {{ switch(id='create-prebooking', on_label=_('Yes'), off_label=_('No')) }}
                    </div>
                </div>
                <div id="room-conflict-booking" class="availability-message-container">
                    <div class="availability-message error">
                        <i class="icon icon-warning"></i>
                        <div>{% trans %}This room is already booked.{% endtrans %}</div>
                        <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                    </div>
                </div>
                <div id="room-conflict-prebooking" class="availability-message-container">
                    <div class="availability-message warning">
                        <i class="icon icon-warning"></i>
                        <div>
                            {% trans %}This room is already prebooked.{% endtrans %}
                            <br>
                            {% trans %}Would you like to book it anyway?{% endtrans %}
                            <br>
                            <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                        </div>
                        {{ switch(id='create-booking-over-prebooking', on_label=_('Yes'), off_label=_('No')) }}
                    </div>
                </div>
                <div id="room-conflict-prebooking-prebook" class="availability-message-container">
                    <div class="availability-message warning">
                        <i class="icon icon-warning"></i>
                        <div>
                            {% trans %}This room is already prebooked.{% endtrans %}
                            <br>
                            {% trans %}Would you like to request a booking anyway?{% endtrans %}
                            <br>
                            <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                        </div>
                        {{ switch(id='create-prebooking-over-prebooking', on_label=_('Yes'), off_label=_('No')) }}
                    </div>
                </div>
                <div id="room-user-booking" class="availability-message-container">
                    <div class="availability-message info">
                        <i class="icon icon-info"></i>
                        {% trans %}You already have a booking in this room.{% endtrans %}
                        <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                    </div>
                </div>
                <div id="room-user-prebooking" class="availability-message-container">
                    <div class="availability-message info">
                        <i class="icon icon-info"></i>
                        <div>{% trans %}You already have a prebooking in this room.{% endtrans %}</div>
                        <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                    </div>
                </div>
                <div id="room-unbookable" class="availability-message-container">
                    <div class="availability-message error">
                        <i class="icon icon-warning"></i>
                        <div>{% trans %}This room is not bookable.{% endtrans %}</div>
                        <a target="_blank">{% trans %}See on calendar{% endtrans %}</a>
                    </div>
                </div>
                <div id="room-cannot-book" class="availability-message-container">
                    <div class="availability-message error">
                        <i class="icon icon-cross"></i>
                        <div>{% trans %}You are not authorized to book this room.{% endtrans %}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="clearfix"></div>
{% endblock %}

{% block javascript %}
    <script>
        setupLocationWidget({
            fieldId: {{ field.id | tojson }},
            inheritanceAllowed: {{ field.allow_location_inheritance | tojson }},
            venues: {{ venues | tojson }},
            venueNames: {{ venues.data | map(attribute='name') | list | tojson }},
            venueMap: {{ venue_map | tojson }},
            rooms: {{ rooms | tojson }},
            inheritedLocationData: {{ ((source.get_inherited_widget_location_data(init_inheritance) or {})
                                      if source else none) | tojson }},
            parent: {
                type: {{ parent[0] | tojson }},
                title: {{ parent[1] | tojson }}
            }
        });
    </script>
{% endblock %}
