eventcally/templates/event_date/list.html

{% extends "layout.html" %}
{% from "_macros.html" import render_pagination, render_event_status_pill, render_ooa, render_place, render_events_sub_menu %}
{% block title %}
{{ _('Event Dates') }}
{% endblock %}
{% block content %}

    <h1>{{ _('Event Dates') }}</h1>

    <form action="{{ url_for('event_dates') }}" class="form-inline mb-4" method="GET" autocomplete="off">

        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ _('From') }}</span>
            </div>
            <input type="text" id="date_from" name="date_from" value="{{ date_from_str }}" class="form-control datepicker" />
        </div>

        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ _('to') }}</span>
            </div>
            <input type="text" id="date_to" name="date_to" value="{{ date_to_str }}" class="form-control datepicker" />
        </div>

        <div class="input-group mb-2 mr-sm-2">
            <div class="input-group-prepend">
                <span class="input-group-text">{{ _('Keyword') }}</span>
            </div>
            <input type="text" name="keyword" value="{{ keyword }}" class="form-control" />
        </div>

        <button type="submit" class="btn btn-primary mb-2">{{ _('Find') }}</button>
    </form>

    {% for date in dates %}
    <div class="card mb-3" style="max-width: 768px;">
        {% if date.event.photo_id %}
            <img src="{{ url_for('image', id=date.event.photo_id) }}" class="card-img-top" style="object-fit: cover; height: 20vh;" />
        {% endif %}
        <div class="card-body" style="padding:1rem">
            <h5 class="card-title">{{ date.event.name }}{{ render_event_status_pill(date.event) }}</h5>
            <h6 class="card-subtitle mb-2 text-muted"><i class="fa fa-calendar"></i> {{ date.start | datetimeformat('short') }}</h6>
            <p class="card-text">{{ date.event.description | truncate(100) }}</p>
            <small class="text-muted"><i class="fa fa-map-marker"></i> {{ date.event.event_place.name }}</small>
            <a href="{{ url_for('event_date', id=date.id) }}" class="stretched-link"></a>
        </div>
    </div>
    {% endfor %}

    {{ render_pagination(pagination) }}

{% endblock %}