{% extends '@WebProfiler/Profiler/layout.html.twig' %}

{% block toolbar %}
    {% set events = collector.events %}

    {% if events.messages|length %}
        {% set icon %}
            {% include('@WebProfiler/Icon/notifier.svg') %}
            <span class="sf-toolbar-value">{{ events.messages|length }}</span>
        {% endset %}

        {% set text %}
            <div class="sf-toolbar-info-piece">
                <b>Sent notifications</b>
                <span class="sf-toolbar-status">{{ events.messages|length }}</span>
            </div>

            {% for transport in events.transports %}
                <div class="sf-toolbar-info-piece">
                    <b>{{ transport ?: '<em>Empty Transport Name</em>' }}</b>
                    <span class="sf-toolbar-status">{{ events.messages(transport)|length }}</span>
                </div>
            {% endfor %}
        {% endset %}

        {{ include('@WebProfiler/Profiler/toolbar_item.html.twig', { 'link': profiler_url }) }}
    {% endif %}
{% endblock %}

{% block head %}
    {{ parent() }}
    <style type="text/css">
        /* utility classes */
        .m-t-0 { margin-top: 0 !important; }
        .m-t-10 { margin-top: 10px !important; }

        /* basic grid */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px;
            margin-left: -15px;
        }
        .col {
            flex-basis: 0;
            flex-grow: 1;
            max-width: 100%;
            position: relative;
            width: 100%;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }
        .col-4 {
            flex: 0 0 33.333333%;
            max-width: 33.333333%;
        }

        /* small tabs */
        .sf-tabs-sm .tab-navigation li {
            font-size: 14px;
            padding: .3em .5em;
        }
    </style>
{% endblock %}

{% block menu %}
    {% set events = collector.events %}

    <span class="label {{ events.messages|length ? '' : 'disabled' }}">
        <span class="icon">{{ include('@WebProfiler/Icon/notifier.svg') }}</span>

        <strong>Notifications</strong>
        {% if events.messages|length > 0 %}
            <span class="count">
                <span>{{ events.messages|length }}</span>
            </span>
        {% endif %}
    </span>
{% endblock %}

{% block panel %}
    {% set events = collector.events %}

    <h2>Notifications</h2>

    {% if not events.messages|length %}
        <div class="empty">
            <p>No notifications were sent.</p>
        </div>
    {% endif %}

    <div class="metrics">
        {% for transport in events.transports %}
            <div class="metric">
                <span class="value">{{ events.messages(transport)|length }}</span>
                <span class="label">{{ transport }}</span>
            </div>
        {% endfor %}
    </div>

    {% for transport in events.transports %}
        <h3>{{ transport ?: '<em>Empty Transport Name</em>' }}</h3>

        <div class="card-block">
            <div class="sf-tabs sf-tabs-sm">
                {% for event in events.events(transport) %}
                    {% set message = event.message %}
                    <div class="tab">
                        <h3 class="tab-title">Message #{{ loop.index }} <small>({{ event.isQueued() ? 'queued' : 'sent' }})</small></h3>
                        <div class="tab-content">
                            <div class="card">
                                <div class="card-block">
                                    <span class="label">Subject</span>
                                    <h2 class="m-t-10">{{ message.getSubject() ?? '(empty)' }}</h2>
                                </div>
                                {% set notification = message.notification ?? null %}
                                {% if notification %}
                                    <div class="card-block">
                                        <div class="row">
                                            <div class="col">
                                                <span class="label">Content</span>
                                                <pre class="prewrap">{{ notification.getContent() ?? '(empty)' }}</pre>
                                                <span class="label">Importance</span>
                                                <pre class="prewrap">{{ notification.getImportance() }}</pre>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                                    <div class="card-block">
                                        <div class="sf-tabs sf-tabs-sm">
                                            {% if notification %}
                                                <div class="tab">
                                                    <h3 class="tab-title">Notification</h3>
                                                    <div class="tab-content">
                                                        <pre class="prewrap" style="max-height: 600px">
                                                            {{- 'Subject: ' ~ notification.getSubject() }}<br/>
                                                            {{- 'Content: ' ~ notification.getContent() }}<br/>
                                                            {{- 'Importance: ' ~ notification.getImportance() }}<br/>
                                                            {{- 'Emoji: ' ~ (notification.getEmoji() is empty ? '(empty)' : notification.getEmoji()) }}<br/>
                                                            {{- 'Exception: ' ~ notification.getException() ?? '(empty)' }}<br/>
                                                            {{- 'ExceptionAsString: ' ~ (notification.getExceptionAsString() is empty ? '(empty)' : notification.getExceptionAsString()) }}
                                                        </pre>
                                                    </div>
                                                </div>
                                            {% endif %}
                                                <div class="tab">
                                                    <h3 class="tab-title">Message Options</h3>
                                                    <div class="tab-content">
                                                        <pre class="prewrap" style="max-height: 600px">
                                                            {%- if message.getOptions() is null %}
                                                                {{- '(empty)' }}
                                                            {%- else %}
                                                                {{- message.getOptions()|json_encode(constant('JSON_PRETTY_PRINT')) }}
                                                            {%- endif %}
                                                        </pre>
                                                    </div>
                                                </div>
                                        </div>
                                    </div>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endfor %}
{% endblock %}