<header>
    <h4>Events</h4>
    <label class="event-type-label">
        <input type="checkbox" id="desktop-notif-toggle"
               onchange="toggleDesktopNotifications(this.checked)">
        Desktop notifications
    </label>
    {% if events %}
    <form hx-post="/action/dismiss-all-events" hx-swap="none">
        <button type="submit" class="outline secondary small">Mark all seen</button>
    </form>
    {% endif %}
</header>
{% if events %}
<ul class="event-list">
    {% for e in events | sort(attribute='created_at', reverse=True) %}
    {% if not e.seen %}
    <li class="event-item{% if e.type == 'fetch_partial_failure' %} event-warning{% endif %}">
        <span class="badge-{{ e.type | lower }}">{{ e.type }}</span>
        <a href="/repo/{{ e.repo_name }}?from=events"><strong>{{ e.repo_name }}</strong></a>
        <p>{{ e.summary }}</p>
        <small title="{{ e.created_at }}">{{ e.created_at | timeago }}</small>
        {% if e.id is not none %}<button class="outline small" hx-post="/action/dismiss-event/{{ e.id }}" hx-swap="none">&#x2715;</button>{% endif %}
    </li>
    {% endif %}
    {% endfor %}
</ul>
{% else %}
<p class="text-center-muted">No recent events</p>
{% endif %}
