plaquetournante-dev / templates / filter_events_results.fr-ca.incl.html

<!-- Enhanced Filter Events Results with Card Layout -->
{% if events %}
<div class="level">
    <div class="level-left">
        <div class="level-item">
            <p class="subtitle is-6 has-text-light">
                <span class="icon">
                    <i class="fas fa-calendar-alt"></i>
                </span>
                {{ t("filter-showing-results", start=result_range.start, end=result_range.end, total=total_count) }}
            </p>
        </div>
    </div>
    <div class="level-right">
        <div class="level-item">
            <div class="field has-addons">
                <div class="control">
                    <button class="button is-small" id="grid-view-btn" onclick="toggleView('grid')">
                        <span class="icon">
                            <i class="fas fa-th"></i>
                        </span>
                        <span>{{ t("view-grid") }}</span>
                    </button>
                </div>
                <div class="control">
                    <button class="button is-small" id="list-view-btn" onclick="toggleView('list')">
                        <span class="icon">
                            <i class="fas fa-list"></i>
                        </span>
                        <span>{{ t("view-list") }}</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Active Filters Display -->
{% if active_filters and active_filters.has_active_filters %}
<div class="message is-info mb-4">
    <div class="message-header">
        <p>
            <span class="icon">
                <i class="fas fa-filter"></i>
            </span>
            {{ t("filter-active-filters") }}
        </p>
        <a href="/events" class="button is-small is-white">
            <span class="icon">
                <i class="fas fa-times"></i>
            </span>
            <span>{{ t("filter-clear-all") }}</span>
        </a>
    </div>
    <div class="message-body">
        <div class="tags">
            {% for filter in active_filters.filters %}
            <span class="tag is-info is-medium">
                <span class="icon is-small">
                    <i class="fas fa-tag"></i>
                </span>
                <!-- Display the filter with translated label -->
                {% if filter.display_params %}
                    {{ t(filter.display_key, **filter.display_params) }}
                {% else %}
                    {{ t(filter.display_key, term=filter.display_value) }}
                {% endif %}
                
                <!-- Remove filter button -->
                <button type="button" 
                        class="delete is-small"
                        title="{{ t('filter-remove-filter') }}"
                        data-filter-key="{{ filter.key }}"
                        data-remove-params='{{ filter.remove_params | tojson }}'
                        onclick="removeFilter(this)">
                </button>
            </span>
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<!-- Event List with Enhanced Card Layout -->
<div id="events-container" class="events-grid">
    {% for event in events %}
    <div class="event-card" data-event-id="{{ event.id }}">
        <div class="event-card-header">
            <div class="event-date-badge">
                <div class="event-month">{{ event.month_abbr | default(event.start_time | date('%b')) }}</div>
                <div class="event-day">{{ event.start_time | date('%d') }}</div>
            </div>
            
            <div class="event-status-tags">
                {% if event.status %}
                <span class="tag event-status-{{ event.status | lower }}">
                    {% if event.status == "Active" %}
                        <span class="icon"><i class="fas fa-check-circle"></i></span>
                    {% elif event.status == "Cancelled" %}
                        <span class="icon"><i class="fas fa-times-circle"></i></span>
                    {% elif event.status == "Postponed" %}
                        <span class="icon"><i class="fas fa-pause-circle"></i></span>
                    {% endif %}
                    <span>{{ t("event-status-" + event.status | lower) }}</span>
                </span>
                {% endif %}
                
                {% if event.mode %}
                <span class="tag event-mode-{{ event.mode | lower }}">
                    {% if event.mode == "InPerson" %}
                        <span class="icon"><i class="fas fa-users"></i></span>
                    {% elif event.mode == "Online" %}
                        <span class="icon"><i class="fas fa-wifi"></i></span>
                    {% elif event.mode == "Hybrid" %}
                        <span class="icon"><i class="fas fa-globe"></i></span>
                    {% endif %}
                    <span>{{ t("event-mode-" + event.mode | lower) }}</span>
                </span>
                {% endif %}
            </div>
        </div>
        
        <div class="event-card-body">
            <h3 class="event-title">
                <a href="{{ event.url | default('/event/' + event.id) }}" class="has-text-light">
                    {{ event.title }}
                </a>
            </h3>
            
            <p class="event-description">
                {{ event.description | truncate(120) | nl2br | safe }}
            </p>
            
            <div class="event-meta">
                <div class="event-time">
                    <span class="icon">
                        <i class="fas fa-clock"></i>
                    </span>
                    <span>
                        {{ event.start_time | date('%H:%M') }}
                        {% if event.end_time %} - {{ event.end_time | date('%H:%M') }}{% endif %}
                    </span>
                </div>
                
                {% if event.location %}
                <div class="event-location">
                    <span class="icon">
                        <i class="fas fa-map-marker-alt"></i>
                    </span>
                    <span>{{ event.location | truncate(40) }}</span>
                </div>
                {% endif %}
                
                {% if event.organizer %}
                <div class="event-organizer">
                    <span class="icon">
                        <i class="fas fa-user"></i>
                    </span>
                    <span>{{ event.organizer.display_name | default(event.organizer.handle) }}</span>
                </div>
                {% endif %}
            </div>
        </div>
        
            <!-- Event Statistics -->
            <div class="event-stats">
                <div class="stat" title="{{ t('event-count-going', count=event.count_going) }}">
                    <i class="fas fa-star"></i>
                    <span>{{ event.count_going }}</span>
                </div>
                <div class="stat" title="{{ t('event-count-interested', count=event.count_interested) }}">
                    <i class="fas fa-eye"></i>
                    <span>{{ event.count_interested }}</span>
                </div>
                <div class="stat" title="{{ t('event-count-not-going', count=event.count_not_going) }}">
                    <i class="fas fa-ban"></i>
                    <span>{{ event.count_not_going }}</span>
                </div>
            </div>
            
            <div class="event-actions">
                <a href="{{ event.url | default('/event/' + event.id) }}" 
                   class="button is-primary is-small">
                    <span class="icon">
                        <i class="fas fa-eye"></i>
                    </span>
                    <span>{{ t("event-view") }}</span>
                </a>
                
                {% if event.can_rsvp %}
                <button class="button is-success is-small" 
                        onclick="toggleRSVP('{{ event.id }}', this)">
                    <span class="icon">
                        <i class="fas fa-check"></i>
                    </span>
                    <span>{{ t("event-rsvp") }}</span>
                </button>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if total_pages > 1 %}
<nav class="pagination is-centered mt-5" role="navigation" aria-label="pagination">
    {% if pagination.has_prev %}
    <a class="pagination-previous"
       hx-get="/events"
       hx-target="#results-content"
       hx-include="#filter-form"
       hx-vals='{"page": "{{ pagination.prev_page }}"}'
       hx-headers='{"Accept-Language": "{{ current_locale }}"}'
       style="cursor: pointer;">
        <span class="icon">
            <i class="fas fa-chevron-left"></i>
        </span>
        <span>{{ t("pagination-previous") }}</span>
    </a>
    {% else %}
    <a class="pagination-previous" disabled>
        <span class="icon">
            <i class="fas fa-chevron-left"></i>
        </span>
        <span>{{ t("pagination-previous") }}</span>
    </a>
    {% endif %}

    {% if pagination.has_next %}
    <a class="pagination-next"
       hx-get="/events"
       hx-target="#results-content"
       hx-include="#filter-form"
       hx-vals='{"page": "{{ pagination.next_page }}"}'
       hx-headers='{"Accept-Language": "{{ current_locale }}"}'
       style="cursor: pointer;">
        <span>{{ t("pagination-next") }}</span>
        <span class="icon">
            <i class="fas fa-chevron-right"></i>
        </span>
    </a>
    {% else %}
    <a class="pagination-next" disabled>
        <span>{{ t("pagination-next") }}</span>
        <span class="icon">
            <i class="fas fa-chevron-right"></i>
        </span>
    </a>
    {% endif %}

    <ul class="pagination-list">
        {% for page_num in pagination.page_range %}
            {% if page_num == pagination.current_page %}
            <li>
                <a class="pagination-link is-current" aria-label="Page {{ page_num }}" aria-current="page">{{ page_num }}</a>
            </li>
            {% else %}
            <li>
                <a class="pagination-link" 
                   aria-label="Goto page {{ page_num }}"
                   hx-get="/events"
                   hx-target="#results-content"
                   hx-include="#filter-form"
                   hx-vals='{"page": "{{ page_num }}"}'
                   hx-headers='{"Accept-Language": "{{ current_locale }}"}'
                   style="cursor: pointer;">
                    {{ page_num }}
                </a>
            </li>
            {% endif %}
        {% endfor %}
    </ul>
</nav>
{% endif %}

{% else %}
<!-- Enhanced No Results State -->
<div class="has-text-centered py-6">
    <div class="empty-state">
        <div class="empty-state-icon">
            <span class="icon is-large">
                <i class="fas fa-calendar-times fa-4x has-text-grey-light"></i>
            </span>
        </div>
        <h3 class="title is-4 has-text-grey-light">{{ t("filter-no-results-title") }}</h3>
        <p class="subtitle is-6 has-text-grey">{{ t("filter-no-results-subtitle") }}</p>
        
        <div class="empty-state-actions">
            <a href="/events" class="button is-primary is-medium">
                <span class="icon">
                    <i class="fas fa-refresh"></i>
                </span>
                <span>{{ t("filter-clear-all") }}</span>
            </a>
            <a href="/create-event" class="button is-success is-medium">
                <span class="icon">
                    <i class="fas fa-plus"></i>
                </span>
                <span>{{ t("create-event") }}</span>
            </a>
        </div>
    </div>
</div>
{% endif %}

<style>
/* Enhanced Event Cards Grid Layout */
.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 1rem;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.events-list .event-card {
    display: flex;
    flex-direction: row;
    max-width: none;
    min-height: auto;
}

.events-list .event-card-header {
    flex-shrink: 0;
    margin-right: 1rem;
}

.events-list .event-card-body {
    flex: 1;
}

.event-card {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #3498db, #e74c3c, #f39c12, #2ecc71);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.event-card:hover::before {
    opacity: 1;
}

.event-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    border-color: rgba(52, 152, 219, 0.3);
}

.event-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.event-date-badge {
    background: linear-gradient(135deg, #3498db, #2980b9);
    border-radius: 12px;
    padding: 0.75rem;
    text-align: center;
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    min-width: 60px;
}

.event-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.event-day {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    margin-top: 0.25rem;
}

.event-status-tags {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
}

.event-status-active {
    background-color: rgba(46, 204, 113, 0.9);
    color: white;
}

.event-status-cancelled {
    background-color: rgba(231, 76, 60, 0.9);
    color: white;
}

.event-status-postponed {
    background-color: rgba(243, 156, 18, 0.9);
    color: white;
}

.event-mode-inperson {
    background-color: rgba(52, 152, 219, 0.9);
    color: white;
}

.event-mode-online {
    background-color: rgba(155, 89, 182, 0.9);
    color: white;
}

.event-mode-hybrid {
    background-color: rgba(26, 188, 156, 0.9);
    color: white;
}

.event-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.event-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.event-title a {
    color: #ecf0f1;
    text-decoration: none;
    transition: color 0.3s ease;
}

.event-title a:hover {
    color: #3498db;
}

.event-description {
    color: #bdc3c7;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.event-time,
.event-location,
.event-organizer {
    display: flex;
    align-items: center;
    color: #95a5a6;
    font-size: 0.85rem;
}

.event-time .icon,
.event-location .icon,
.event-organizer .icon {
    margin-right: 0.5rem;
    color: #7f8c8d;
}

.event-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.event-stats {
    display: flex;
    gap: 1rem;
}

.stat-item {
    display: flex;
    align-items: center;
    color: #7f8c8d;
    font-size: 0.8rem;
}

.stat-item .icon {
    margin-right: 0.25rem;
}

.event-actions {
    display: flex;
    gap: 0.5rem;
}

.event-actions .button {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.event-actions .button:hover {
    transform: translateY(-2px);
}

/* Enhanced Empty State */
.empty-state {
    padding: 3rem 1rem;
}

.empty-state-icon {
    margin-bottom: 2rem;
}

.empty-state-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* View Toggle Buttons */
.level .button.is-small {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.level .button.is-small.is-active {
    background-color: #3498db;
    color: white;
}

/* Active Filter Tags */
.message.is-info {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), rgba(52, 152, 219, 0.05));
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.message-header {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

/* Responsive Design */
@media screen and (max-width: 768px) {
    .events-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .event-card {
        min-height: 250px;
        padding: 1rem;
    }
    
    .event-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .event-status-tags {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .level {
        flex-direction: column;
        gap: 1rem;
    }
    
    .level-left,
    .level-right {
        width: 100%;
        justify-content: center;
    }
    
    .empty-state-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .empty-state-actions .button {
        width: 100%;
        max-width: 300px;
    }
}

@media screen and (max-width: 480px) {
    .event-card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .event-stats {
        justify-content: center;
    }
    
    .event-actions {
        justify-content: center;
    }
}
</style>

<script>
// View Toggle Functionality
function toggleView(viewType) {
    const container = document.getElementById('events-container');
    const gridBtn = document.getElementById('grid-view-btn');
    const listBtn = document.getElementById('list-view-btn');
    
    if (viewType === 'grid') {
        container.className = 'events-grid';
        gridBtn.classList.add('is-active');
        listBtn.classList.remove('is-active');
        localStorage.setItem('eventsView', 'grid');
    } else {
        container.className = 'events-list';
        listBtn.classList.add('is-active');
        gridBtn.classList.remove('is-active');
        localStorage.setItem('eventsView', 'list');
    }
}

// RSVP Toggle Functionality
function toggleRSVP(eventId, button) {
    const isRSVPed = button.classList.contains('is-success');
    
    // Toggle button state
    if (isRSVPed) {
        button.classList.remove('is-success');
        button.classList.add('is-outlined');
        button.querySelector('span:last-child').textContent = '{{ t("event-rsvp") }}';
        button.querySelector('i').className = 'fas fa-plus';
    } else {
        button.classList.add('is-success');
        button.classList.remove('is-outlined');
        button.querySelector('span:last-child').textContent = '{{ t("event-rsvp-confirmed") }}';
        button.querySelector('i').className = 'fas fa-check';
    }
    
    // Here you would typically make an API call to update RSVP status
    // fetch(`/api/events/${eventId}/rsvp`, { method: 'POST' })...
}

// Initialize view on page load
document.addEventListener('DOMContentLoaded', function() {
    const savedView = localStorage.getItem('eventsView') || 'grid';
    toggleView(savedView);
    
    // Add smooth scroll for pagination
    const paginationLinks = document.querySelectorAll('.pagination-link, .pagination-previous, .pagination-next');
    paginationLinks.forEach(link => {
        link.addEventListener('click', function() {
            if (!this.disabled) {
                document.getElementById('results-content').scrollIntoView({ 
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
    
    // Add loading states for HTMX requests
    document.body.addEventListener('htmx:beforeRequest', function(evt) {
        const target = evt.detail.target;
        if (target.id === 'results-content') {
            target.classList.add('is-loading');
        }
    });
    
    document.body.addEventListener('htmx:afterRequest', function(evt) {
        const target = evt.detail.target;
        if (target.id === 'results-content') {
            target.classList.remove('is-loading');
        }
    });
});
</script>