plaquetournante-dev / templates / venue_search_results.en-us.partial.html

<!-- Venue Search Results Partial -->
<div id="venue-suggestions" 
     class="venue-suggestions{% if venues and venues|length > 0 %} is-active{% endif %}" 
     role="listbox" 
     aria-label="{{ t('venue-suggestions') }}">
{% if venues and venues|length > 0 %}
    {% for venue in venues %}
    <div class="venue-suggestion-item" 
         role="option" 
         tabindex="0"
         data-venue-id="{{ venue.id }}"
         data-venue-name="{{ venue.display_name }}"
         data-venue-lat="{{ venue.latitude }}"
         data-venue-lng="{{ venue.longitude }}"
         data-venue-street="{{ venue.street or '' }}"
         data-venue-locality="{{ venue.locality or '' }}"
         data-venue-region="{{ venue.region or '' }}"
         data-venue-postal-code="{{ venue.postal_code or '' }}"
         data-venue-country="{{ venue.country or '' }}"
         data-venue-category="{{ venue.category or '' }}"
         data-venue-quality="{{ venue.quality_score or '' }}"
         onclick="selectVenue(this)"
         onkeydown="handleVenueKeydown(event, this)">
        
        <div class="venue-info">
            <div class="venue-header">
                <h6 class="venue-name">{{ venue.display_name }}</h6>
                {% if venue.category %}
                <span class="tag is-small is-info">{{ venue.category }}</span>
                {% endif %}
            </div>
            
            <p class="venue-address">
                {% if venue.street %}{{ venue.street }}, {% endif %}
                {% if venue.locality %}{{ venue.locality }}{% endif %}
                {% if venue.region %}{% if venue.locality %}, {% endif %}{{ venue.region }}{% endif %}
                {% if venue.postal_code %} {{ venue.postal_code }}{% endif %}
            </p>
        </div>
    </div>
    {% endfor %}
{% else %}
    <div class="venue-no-results">
        <div class="has-text-centered p-4">
            <span class="icon is-large has-text-grey-light">
                <i class="fas fa-search fa-2x"></i>
            </span>
            {% if show_min_length_message %}
            <p class="has-text-grey">{{ t('search-min-length-message') }}</p>
            <p class="help">{{ t('type-at-least-2-characters') }}</p>
            {% else %}
            <p class="has-text-grey">{{ t('no-venues-found') }}</p>
            <p class="help">{{ t('try-different-search-terms') }}</p>
            {% endif %}
        </div>
    </div>
{% endif %}
</div>