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

{% block toolbar %}
    {% if collector.hasData %}
        {% set icon %}
            {{ include("@PimcorePersonalization/Profiler/target.svg.twig") }}

            {% if collector.documentTargetGroup is not null %}
                <span class="sf-toolbar-value">{{ collector.documentTargetGroup.name }}</span>
            {% endif %}
        {% endset %}

        {% set text %}
            <div class="sf-toolbar-info-group">
                {% if collector.documentTargetGroup is not null %}
                    <div class="sf-toolbar-info-piece">
                        <b>Document Target Group</b>
                        <span>{{ collector.documentTargetGroup.name }}</span>
                    </div>
                {% endif %}

                <div class="sf-toolbar-info-piece">
                    <b>Matched Rules</b>
                    <span class="sf-toolbar-status">{{ collector.rules|length }}</span>
                </div>

                {% if collector.targetGroups is not empty %}
                    <div class="sf-toolbar-info-piece">
                        <h5 style="display: table-caption; margin-bottom: 5px; font-size: 13px">Target Groups</h5>
                    </div>

                    {% for targetGroup in collector.targetGroups %}
                        <div class="sf-toolbar-info-piece">
                            <b>{{ targetGroup.name }}</b>
                            <span class="sf-toolbar-status">{{ targetGroup.count }}</span>
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="sf-toolbar-info-piece">
                        <b>Target Groups</b>
                        <span class="sf-toolbar-status">0</span>
                    </div>
                {% endif %}
            </div>
        {% endset %}

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

{% block menu %}
    <span class="label {{ (not collector.hasData) ? 'disabled' }}">
        <span class="icon">
            {{ include("@PimcorePersonalization/Profiler/target.svg.twig") }}
        </span>
        <strong>Targeting</strong>
    </span>
{% endblock %}

{% block panel %}
    <h2>Targeting</h2>

    {% if not collector.hasData %}
        <div class="empty">
            <p>No targeting data available.</p>
        </div>
    {% else %}

        <div class="metrics" style="margin-bottom: 25px">
            {% if collector.documentTargetGroup is not null %}
                <div class="metric">
                    <span class="value">{{ collector.documentTargetGroup.name }}</span>
                    <span class="label">Document Target Group</span>
                </div>
            {% endif %}

            <div class="metric">
                <span class="value">{{ collector.rules|length }}</span>
                <span class="label">Matched Rules</span>
            </div>

            <div class="metric">
                <span class="value">{{ collector.targetGroups|length }}</span>
                <span class="label">Assigned Target Groups</span>
            </div>
        </div>

        <div class="sf-tabs">
            <div class="tab">
                <h3 class="tab-title">Results</h3>

                <div class="tab-content">
                    <h3>Matched Targeting Rules</h3>

                    <table class="{{ class|default('') }}">
                        <thead>
                        <tr>
                            <th scope="col" class="key">ID</th>
                            <th scope="col">Name</th>
                            <th scope="col">Duration</th>
                            <th scope="col">Conditions</th>
                            <th scope="col">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for rule in collector.rules %}
                            <tr>
                                <th>{{ rule.id }}</th>
                                <td>{{ rule.name }}</td>
                                <td>{{ rule.duration|round(2) }} ms</td>
                                <td>{{ profiler_dump(rule.conditions, maxDepth=maxDepth|default(0)) }}</td>
                                <td>{{ profiler_dump(rule.actions, maxDepth=maxDepth|default(0)) }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="2">(no rules matched)</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                    <h3>Assigned Target Groups</h3>

                    <table class="{{ class|default('') }}">
                        <thead>
                        <tr>
                            <th scope="col" class="key">ID</th>
                            <th scope="col">Name</th>
                            <th scope="col">Threshold</th>
                            <th scope="col">Assignment Count</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for targetGroup in collector.targetGroups %}
                            <tr>
                                <th>{{ targetGroup.id }}</th>
                                <td>{{ targetGroup.name }}</td>
                                <td>{{ targetGroup.threshold }}</td>
                                <td>{{ targetGroup.count }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="2">(no target group assignments)</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>

                    <h3>Target Groups assigned to Documents</h3>

                    <table class="{{ class|default('') }}">
                        <thead>
                        <tr>
                            <th scope="col">Document ID</th>
                            <th scope="col">Path</th>
                            <th scope="col">Target Group ID</th>
                            <th scope="col">Name</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for assignment in collector.documentTargetGroups %}
                            <tr>
                                <th>{{ assignment.document.id }}</th>
                                <td>{{ assignment.document.path }}</td>
                                <th>{{ assignment.targetGroup.id }}</th>
                                <td>{{ assignment.targetGroup.name }}</td>
                            </tr>
                        {% else %}
                            <tr>
                                <td colspan="2">(no target groups were assigned to documents)</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="tab">
                <h3 class="tab-title">Visitor Info</h3>

                <div class="tab-content">
                    <h3>Visitor Info</h3>

                    {{ include('@PimcoreCore/Profiler/key_value_table.html.twig', { data: collector.visitorInfo }, with_context = false) }}
                </div>
            </div>

            <div class="tab">
                <h3 class="tab-title">Storage</h3>

                <div class="tab-content">
                    <h3>Session Storage</h3>

                    {{ include('@PimcoreCore/Profiler/key_value_table.html.twig', { data: collector.storage.session }, with_context = false) }}
                </div>

                <div class="tab-content">
                    <h3>Visitor Storage</h3>

                    {{ include('@PimcoreCore/Profiler/key_value_table.html.twig', { data: collector.storage.visitor }, with_context = false) }}
                </div>
            </div>
        </div>

    {% endif %}
{% endblock %}