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

{% block toolbar %}

    {% set profiler_markup_version = profiler_markup_version|default(1) %}
    {% if profiler_markup_version > 1 %}
        {% set icon %}
            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 100 100" enable-background="new 0 0 24 24" xml:space="preserve">
                    <path fill="#AAAAAA"
                          d="m33.975 95h32.05c5.565 0 10.08-4.279 10.08-9.569v-70.855c0-5.285-4.513-9.576-10.07-9.576h-32.05c-5.564 0-10.08 4.291-10.08 9.576v70.854c0 5.288 4.513 9.57 10.08 9.57m16.03-3.257c-2.493 0-4.506-2.02-4.506-4.498 0-2.489 2.01-4.502 4.506-4.502 2.487 0 4.494 2.01 4.494 4.502 0 2.481-2.01 4.498-4.494 4.498m-6.868-80.911h13.727c.556 0 1.01.383 1.01.852 0 .471-.452.854-1.01.854h-13.727c-.55 0-1.01-.383-1.01-.854-.0001-.469.454-.852 1.01-.852m-15.289 10.798c0-.794.675-1.438 1.508-1.438h41.29c.835 0 1.507.641 1.507 1.438v56.49c0 .791-.672 1.433-1.507 1.433h-41.29c-.833 0-1.508-.642-1.508-1.433v-56.49"/>
                </svg>
            <span class="sf-toolbar-value">View: {{ collector.currentView | capitalize }}</span>
        {% endset %}
        {% set text %}
            <div class="sf-toolbar-info-piece">
                <b>Device Detector</b>
            </div>
            <div class="sf-toolbar-info-piece">
                <span>Switch view:</span>
            </div>
            {% for viewData in collector.views %}
                {% set viewLink = '' %}
                {% if viewData.isCurrent %}
                    {% set viewLink = '<span class="sf-toolbar-status sf-toolbar-status-green">current</span>' %}
                {% elseif viewData.enabled == false %}
                    {%  set viewLink = 'External' %}
                {% else %}
                    {%  set viewLink = '<span><a href="' ~ viewData.link ~ '">Use this view</a></span>' %}
                {% endif %}
                <div class="sf-toolbar-info-piece">
                    <b>{{ viewData.label }}</b>
                    {{ viewLink | raw }}
                </div>
            {% endfor %}
        {% endset %}
    {% else %}
        {# Fallback version for symfony versions < 2.8 #}
        {% set icon %}
            <span>
            <img width="14" height="28" alt="Device"
                 src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABbklEQVRYR+2XMUvDQBTH37ujS5Eu7QdwVNMuFhykDQEnB2NCJwcRHISCiyDiImRzcS9OuqpIW7+AMQ20g1tSdNVP4NYi7T1JcSo1NamQInfrvXf/3/1ueYeQ8MKE82H+AZY2zGzqk3YIIRfFFgL2CaDpO/WXsL5QA0E479MzMnwEpPcoACBgQTCxi4xXunbd/ak3FKBQNg4JcNVv1fcjhX8XK6q5h4J0321UYgHkVcMKGn2nYa3XPJsB2L8BGQItcsDrj5szICGsrvOgzQxQqnmWWy2MgKatUs0bBUoAaUAakAakAWlAGvhfBhIfSKYNIZP285qh/dlENClAKW+vIGIHGV/z7PvX8ZqZAQqqeUqCcr7bOJ4EUCxupftpfpAZpC7b7bveeI2i6jojrHqt5mbMmdBcFjC0EfgJMnqL8gwkRAaBnSPShffUvIoFEDQpmlnCAR0RE9koAIywBwxuw8KD8+b/axbl1nFqEzfwBYtWrTCbYUHuAAAAAElFTkSuQmCC">
            View: {{ collector.currentView | capitalize }}
            </span>
        {% endset %}
        {% set text %}
            <div class="sf-toolbar-info-piece">
                <b>Device Detector</b>
            </div>
            <div class="sf-toolbar-info-piece">
                <table class="sf-toolbar-device-detector-switcher">
                    <thead>
                    <tr>
                        <th>View</th>
                        <th>Switch to...</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for viewData in collector.views %}
                        {% set viewLink = '' %}
                        {% if viewData.isCurrent %}
                            {% set viewLink = '<em>current</em>' %}
                        {% elseif viewData.enabled == false %}
                            {%  set viewLink = 'External' %}
                        {% else %}
                            {%  set viewLink = '<a href="' ~ viewData.link ~ '">Use this view</a>' %}
                        {% endif %}
                        <tr>
                            <td>{{ viewData.label }}</td>
                            <td>{{ viewLink | raw }}</td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        {% endset %}
        <style type="text/css">
            .sf-toolbar-block .sf-toolbar-info-piece table.sf-toolbar-device-detector-switcher {
                width: 100%;
            }

            .sf-toolbar-block .sf-toolbar-info-piece table.sf-toolbar-device-detector-switcher th,
            .sf-toolbar-block .sf-toolbar-info-piece table.sf-toolbar-device-detector-switcher td {
                border-bottom: 1px solid #ddd;
                padding: 0 4px;
                color: #2f2f2f;
                background-color: #fff;
            }

            .sf-toolbar-block .sf-toolbar-info-piece table.sf-toolbar-device-detector-switcher th {
                background-color: #eee;
            }

            .sf-toolbar-block .sf-toolbar-info-piece table.sf-toolbar-device-detector-switcher a {
                color: #00f;
            }
        </style>
    {% endif %}
    {% include '@WebProfiler/Profiler/toolbar_item.html.twig' with { 'link': false } %}
{% endblock %}