{% extends "base.html" %}
{% load profiles %}
{% load humanize %}
{% load static %}
{% load guardian_tags %}
{% load url %}
{% load notification_extras %}


{% block title %}Notifications - {{ block.super }}{% endblock %}

{% block breadcrumbs %}
    <ol class="breadcrumb">
        <li class="breadcrumb-item active" aria-current="page">Notifications</li>
    </ol>
{% endblock %}

{% block content %}
    {% include "grandchallenge/partials/filters.html" with filter=filter filters_applied=filters_applied %}
    <div class="d-flex justify-content-between">
        <h2>Notifications</h2>
        <a class="btn btn-primary my-3" href="{% url 'notifications:follow-list' %}" role="button">Manage your subscriptions</a>
    </div>
        <div class="row">
        <div class="col-6">
            <input class="checkbox-inline ml-3 mt-3" type="checkbox" id="SelectCheckboxes" onClick="toggleCheckboxes(this)"/>
            <label class="form-check-label ml-1" id="LabelSelectAll" for="SelectCheckboxes">
                Select all
            </label>
        </div>
        <div class="col-6 d-flex justify-content-end">
            <button class="btn btn-xs btn-danger mx-1 mb-3 mt-1" name="delete" type="button" id="delete"> Delete selected</button>
            <button class="btn btn-xs btn-primary mx-1 mb-3 mt-1" name="mark_read" type="button" id="mark_read"> Mark as read</button>
            <button class="btn btn-xs btn-primary mx-1 mb-3 mt-1" name="mark_unread" type="button" id="mark_unread"> Mark as unread</button>
        </div>
        </div>

        <ul class="list-group">
            {% for object in object_list %}
                <li class="list-group-item {% if object.context_class %}list-group-item-{{ object.context_class }}{% endif %} p-0">
                    <div class="d-flex justify-content-between">
                        <div class="py-2 pl-3">
                            <input class="checkbox pr-1 mr-1" name="checkbox" type="checkbox" id="{{ object.id }}"
                                   value="{{ object.id }}" data-url="{% url 'api:notification-detail' pk=object.pk %}">
                            {% if not object.read %}
                                <span class="text-primary align-middle mr-1"><i class="fa fa-circle pl-1"></i></span>
                            {% endif %}
                            {% print_notification notification=object user=request.user as current_notification %}
                            {{ current_notification }}
                        </div>
                    </div>
                </li>
                {% empty %}
                <li class="list-group-item">You have no notifications</li>
            {% endfor %}
        </ul>
    <br>
    {% include "grandchallenge/partials/pagination.html"  %}
{% endblock %}

{% block script %}
    {{ block.super }}

    {% include 'grandchallenge/partials/drf_csrf.html' %}

    <script type="module" src="{% static "js/notifications/bulk_delete_update.js" %}"></script>
{% endblock %}