{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% import "macro_functions.html.twig" as mf %}

{% block meta_title %}{{ 'Notifications center'|trans }}{% endblock %}

{% set active_menu = 'activity' %}

{% block content %}
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" href="#tab-index" data-bs-toggle="tab">{{ 'Notifications'|trans }}</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" href="#tab-new-note" data-bs-toggle="tab">
                <svg class="icon me-2">
                    <use xlink:href="#plus" />
                </svg>
                {{ 'New note'|trans }}
            </a>
        </li>
    </ul>

<div class="card">
    <div class="tab-content">
        <div class="tab-pane fade show active" id="tab-index" role="tabpanel">
            <div class="card-body">
                    <h5>{{ 'Notifications'|trans }}</h5>
                </div>
                {{ include('partial_search.html.twig') }}
                <table class="table card-table table-vcenter table-striped text-nowrap">
                    <thead>
                        <tr>
                            <th>{{ 'Message'|trans }}</th>
                            <th>{{ 'Date'|trans }}</th>
                            <th class="w-1"></th>
                        </tr>
                    </thead>
                    <tbody>
                    {% set events = admin.notification_get_list({ "per_page": 10, "page": request.page }|merge(request)) %}
                    {% for i, event in events.list %}
                        <tr>
                            <td>{{ admin.system_string_render({ "_tpl": event.meta_value, "_try": true })|raw }}</td>
                            <td>{{ event.created_at|date('Y-m-d H:i') }}</td>
                            <td>
                                <a class="btn btn-icon api-link" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-redirect="{{ 'notification'|alink }}" href="{{ 'api/admin/notification/delete'|link({ 'id': event.id, 'CSRFToken': CSRFToken }) }}">
                                    <svg class="icon">
                                        <use xlink:href="#delete" />
                                    </svg>
                                </a>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
                            <td class="text-muted" colspan="7">{{ 'The list is empty'|trans }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
                {{ include('partial_pagination.html.twig', { 'list': events, 'url':'notification' }) }}

                <div class="card-footer d-flex align-items-center justify-content-between">
                    <a class="btn btn-danger api-link" href="{{ 'api/admin/notification/delete_all'|link({ 'CSRFToken': CSRFToken }) }}" data-api-confirm="{{ 'Are you sure?'|trans }}" data-api-reload="1">
                        <svg class="icon">
                            <use xlink:href="#delete"></use>
                        </svg>
                        {{ 'Delete all'|trans }}
                    </a>
                </div>
            </div>


        <div class="tab-pane fade" id="tab-new-note" role="tabpanel">
            <div class="card-body">
                <form method="post" action="{{ 'api/admin/notification/add'|link }}" class="api-form" data-api-reload="1">
                    <input type="hidden" name="CSRFToken" value="{{ CSRFToken }}"/>
                    <div class="mb-3 row">
                        <label class="form-label col-3 col-form-label">{{ 'Note'|trans }}:</label>
                        <div class="col">
                            <textarea class="form-control" name="message" rows="5" rows="10" placeholder="{{ 'Add note or todo task'|trans }}" required></textarea>
                        </div>
                    </div>
                    <input type="submit" value="{{ 'Add note'|trans }}" class="btn btn-primary">
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}
