{% extends app.request.isXmlHttpRequest ? 'WebProfilerBundle:Profiler:ajax_layout.html.twig' : 'WebProfilerBundle:Profiler:layout.html.twig' %}

{% block toolbar %}
    {% set icon %}
        <img width="28" height="28" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFRjgzQUU2NTA4MjA2ODExODIyQThBNTY4MkREMjZCRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5MTM5MTBBMTZDMTQxMUU0OEZFRTgxMzgwQjgxMTk5QyIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5MTM5MTBBMDZDMTQxMUU0OEZFRTgxMzgwQjgxMTk5QyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUY4M0FFNjUwODIwNjgxMTgyMkE4QTU2ODJERDI2QkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUY4M0FFNjUwODIwNjgxMTgyMkE4QTU2ODJERDI2QkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7n3aMiAAABUFBMVEXW1tZNTU35+fmmpqZubm5HR0dMTExfX1+np6fJyclZWVlFRUV2dnbx8fFOTk56enpISEhKSkrw8PDHx8dcXFzv7+////9paWmysrKDg4OCgoJGRkb7+/vq6ur+/v55eXm9vb3CwsJERERLS0tkZGRiYmI8PDxTU1M9PT0+Pj7c3Nzh4eG0tLSQkJCfn59wcHBbW1vQ0NDa2tpnZ2dXV1fFxcW6urp/f39DQ0NQUFDNzc2ampqtra2ioqJ+fn7z8/O8vLzV1dXU1NReXl7r6+u/v7/Pz89oaGiVlZWgoKBycnJSUlJra2uqqqqwsLDj4+OGhoa3t7c/Pz++vr6JiYmSkpKZmZng4ODi4uLOzs5PT0+5ubmFhYVjY2NCQkJ4eHhqamrS0tJYWFivr6/X19exsbFhYWGAgICNjY2rq6tlZWWTk5Nzc3NBQUFAQED////SWXPPAAAAcHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8At2Fi0gAAAVZJREFUeNps0lWTg0AMAOBAj1J3d3fvubu7u/sd2f//dniB3j5AMt9sApMAGTqhkPTu2kAP+8WdfJy5Hk0HSZfq69HCoXza61TBB/+aLXxCsU4C/xj3Rq6o90xQiyblXp9cUitZ+10Khg0d5ODWaUKsg8E4BtHs4/NHRCvorfxEnBPY2Wu0+WQNdHZ/4ajO0w9y+RvQ9QvU+Ee0VpWyRdCYPW5LlBHZZEVCPwzMu7zLZV473NeMXLYHquWX3Fj0REjKkpOMSoDab6yFp1kO7ZPyPTMQiCj/7qZf/B5myyunFF8TCmI4dd7EGEkz463SwAgcCqEHos0KxujpOU6tKSA9wscfP8xnsh5wn+mMn4qg2wur1nBjEzX9JBSVfUacdRhMnKegGz3rUc5g0rB5Pf5m5X6uwYilSPyqIVPWRFVKu1RKLKvOBgsmqt4020f/llyG/f8TYACxowxL4Bpl0wAAAABJRU5ErkJggg=="/>
        {% if collector.collectedTagHasErrors %}
            <span class="sf-toolbar-status sf-toolbar-status-red">{{ collector.collectedTags|length }}</span>
        {% else %}
            <span class="sf-toolbar-status sf-toolbar-status-green">{{ collector.collectedTags|length }}</span>
        {% endif %}
    {% endset %}
    {% set text %}
        <div class="sf-toolbar-info-piece">
            <b>Content item</b>
            <span>{{ collector.contentId }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Collected items</b>
            <span>{{ collector.collectedContentIds|length }}</span>
        </div>
        <div class="sf-toolbar-info-piece">
            <b>Tags</b>
            <span>{{ collector.collectedTags|length }}</span>
        </div>
    {% endset %}
    {% include 'WebProfilerBundle:Profiler:toolbar_item.html.twig' with { 'link': profiler_url } %}
{% endblock %}

{% block menu %}
    <span class="label">
        <span class="icon"><img width="32" height="32" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFRjgzQUU2NTA4MjA2ODExODIyQThBNTY4MkREMjZCRCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2RDI3RjhDMTZDMTQxMUU0QjU3RDhGRjFDMjMxMDAxMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2RDI3RjhDMDZDMTQxMUU0QjU3RDhGRjFDMjMxMDAxMCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RUY4M0FFNjUwODIwNjgxMTgyMkE4QTU2ODJERDI2QkQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RUY4M0FFNjUwODIwNjgxMTgyMkE4QTU2ODJERDI2QkQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz426uGGAAABZVBMVEVbW1vs7OzX19fIyMhKSkpHR0dNTU1MTEz5+flSUlLy8vJVVVXe3t5YWFhwcHC3t7fa2to/Pz9gYGBhYWG9vb37+/tBQUFycnJDQ0NCQkJFRUVQUFD09PROTk5ZWVlnZ2fi4uKGhoZdXV3q6uqZmZl8fHxXV1d1dXVeXl6AgIDv7+/t7e2Pj49cXFzw8PDz8/Pd3d1ra2vU1NSQkJCamprAwMCoqKhTU1NERERWVlZiYmLNzc09PT1vb29sbGzMzMxRUVFpaWljY2P8/Pz9/f3c3Nz39/fS0tKvr6+8vLz4+PjPz8/Jycl2dnaUlJRubm76+vqSkpLQ0NCxsbE8PDxtbW3Dw8Oenp5JSUk7OztISEjb29upqanBwcGXl5ebm5ulpaXGxsZqamrExMS7u7ukpKR3d3eNjY3r6+t9fX2JiYm4uLiDg4PKysqIiIh/f3++vr729vZaWlrg4OBoaGhAQED///+aTGkfAAAAd3RSTlP/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AKmfpGUAAAGcSURBVHjafJNlQ8MwEIbDRqCdu/uwDTYYGz7c3d3dnbvfT1vWLs2AfGhz97xv75peCf67LmOET00/+ONtOXe8teMO8ZgO8AJDA6gr1d5DRQsnMDRqHGxvtM+C5A+/tXfHQ8e6UC+o+sU89tDwoi2tEzD1VzBBxa42mGAFbP0m7HyxoBkCAqn1b+0DDMqZISfAJ+H9gWK76WwPlg+99rAUdhPe3ztrS2Y3QgBlJVwiXP0WlHaxyK3azDPh+i8s9EvX3XM1/imh+e+j4lRSup8+qoIEYf0nDgolbLLeRAYrmf41wvhLjmhw1dfxjulh9QFf0kFp/syMNXht9AFtcKqc1CFxaOfnEuxHoxTGY8BwJH71/dy+C8EUhlaTmeVItpV9cC4/GYcRwd5scuk4kqF6OXjyhEIDr30FIeLWc6lJo6y4WnfNozdxkDJzXP7csiKD6MmJ3g/guTIPssIclZKdgRr+MzCyglg2s/5aXpkoSeFsLlp/4erIKZ3+xrWZZBQ6Xh1aTaHnzFRXFBxnx15R8Fz34xhpuYbjtwADAOs/c5yeu1ZkAAAAAElFTkSuQmCC"/></span>
        <strong>Tags</strong>
        <span class="count">
            <span>{{ collector.collectedTags|length }}</span>
        </span>
    </span>
{% endblock %}

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/styles/googlecode.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.3/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>
{% endblock head %}

{% block panel %}

    <h2>Content Item</h2>
    <p>
        This is the reference used to determine which tags to load and render.
    </p>
    <p style="font-style: italic; font-weight: 700; color: #759e1a;">
        {{ collector.contentId }}
    </p>
    <br />

    <h2>Collected content items</h2>
    <p>Data is gathered from the content items listed below. Data can be extracted directly from the model or from listeners that generate data</p>

    <table>
        <thead>
            <tr>
                <th>Content Id</th>
            </tr>
        </thead>
        <tbody>
            {% for content_id in collector.collectedContentIds %}
                <tr>
                    <td>{{ content_id }}</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <br />

    <h2>Processed tags</h2>
    <p>The tags below are found and processed for the given content item.</p>

    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Type</th>
                <th>Rendered</th>
                <th>HTML</th>
                <th>Exceptions</th>
            </tr>
        </thead>
        <tbody>
            {% for tag in collector.collectedTags %}
                <tr>
                    <td {% if tag.exceptions is not empty %}style="background: #FF9494;"{% endif %}>{{ tag.name }}</td>
                    <td {% if tag.exceptions is not empty %}style="background: #FF9494;"{% endif %}>
                        {% if tag.type == 'meta-tag' %}
                            Meta Tag
                        {% elseif tag.type == 'html-header-snippet' %}
                            HTML snippet in header
                        {% elseif tag.type == 'html-body-snippet' %}
                            HTML snippet in body
                        {% else %}
                            {{ tag.type }}
                        {% endif %}
                    </td>
                    <td {% if tag.exceptions is not empty %}style="background: #FF9494;"{% endif %}>
                        <span style="display: inline-block; padding: 4px 10px; border-radius: 4px; color: #fff; background: {{ tag.rendered ? '#759e1a' : '#a33' }}">{{ tag.rendered ? 'Yes' : 'No' }}</span>
                    </td>
                    <td {% if tag.exceptions is not empty %}style="background: #FF9494;"{% endif %}>
                        {% if tag.rendered %}
                            <pre><code class="html">{{ tag.contents }}</code></pre>
                        {% endif %}
                    </td>
                    <td {% if tag.exceptions is not empty %}style="background: #FF9494;"{% endif %}>
                        {% if tag.exceptions is not empty %}
                            <pre>{{ tag.exceptions|nl2br }}</pre>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <h2>Data</h2>
    <p>The data below is used when processing the Expressions for "Inhoud" and "Zichtbaar".</p>
    <table>
        <tbody>
            {% for key,value in collector.availableData %}
                <tr>
                    <th>{{ key }}</th>
                    <td>
                        {% if value is null %}<span style="display: inline-block; padding: 3px; font-size: 0.8em; color: #666; background: #eee;">null</span>{% else %}{{ value }}{% endif %}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

{% endblock %}