{% extends 'admin.twig' %}

{% set title %}{{ 'DevicesDetection_DeviceDetection'|translate }}{% endset %}

{% block content %}

    <script type="text/javascript">

        var clientHints = {};

        $(document).ready(function() {
            if (!navigator.userAgentData || typeof navigator.userAgentData.getHighEntropyValues !== 'function') {
                $('#noclienthints').css({display: 'inline-block'});
                $('[name=clienthints],.usech').hide();
            } else {
                // Initialize with low entropy values that are always available
                clientHints = {
                    brands: navigator.userAgentData.brands,
                    platform: navigator.userAgentData.platform
                };

                // try to gather high entropy values
                // currently this methods simply returns the requested values through a Promise
                // In later versions it might require a user permission
                navigator.userAgentData.getHighEntropyValues(
                    ['brands', 'model', 'platform', 'platformVersion', 'uaFullVersion', 'fullVersionList']
                ).then(function (ua) {
                    if (ua.fullVersionList) {
                        // if fullVersionList is available, brands and uaFullVersion isn't needed
                        delete ua.brands;
                        delete ua.uaFullVersion;
                    }

                    clientHints = ua;
                });
            }
        });

        function showList(type) {
            var ajaxHandler = new ajaxHelper();
            ajaxHandler.addParams({
                module: 'DevicesDetection',
                action: 'showList',
                type: type
            }, 'GET');
            ajaxHandler.setFormat('html');
            ajaxHandler.setCallback(function(response){
                var $list = $('#deviceDetectionItemList');
                $list.find('.itemList').html(response);
                piwikHelper.modalConfirm($list, [], {fixedFooter: true});
            });
            ajaxHandler.send();
        }

        function toggleClientHints() {
            $('[name=clienthints]').toggle();
            if ($('[name=clienthints]:visible').length) {
                $('[name=clienthints]').text().length || $('[name=clienthints]').text(JSON.stringify(clientHints));
            } else {
                $('[name=clienthints]').text('');
            }
        }

    </script>

    <style type="text/css">
        textarea {
            width: 700px;
            display: block;
        }

        .detection {
            padding-top:10px;
        }
        .detection td {
            width: 50%;
        }
        .detection td img {
            margin-right: 10px;
        }
    </style>

    <div piwik-content-block content-title="{{ title|e('html_attr') }}">
        <form action="{{ linkTo({}) }}" method="POST">

            <h3>{{ 'DevicesDetection_UserAgent'|translate }}</h3>

            <textarea name="ua">{{ userAgent }}</textarea>

            <h3>{{ 'DevicesDetection_ClientHints'|translate }}</h3>

            <span class="checkbox-container usech">
                <label>
                    <input type="checkbox" id="usech" {% if clientHints %}checked{% endif %} onchange="toggleClientHints()"/>
                    <span>{{ 'DevicesDetection_ConsiderClientHints'|translate }}</span>
                </label>
            </span>

            <textarea name="clienthints" style="margin-top: 2em; {% if not clientHints %}display: none{% endif %}">{% if clientHints %}{{ clientHints|json_encode }}{% endif %}</textarea>

            <span id="noclienthints" class="alert alert-warning" style="display: none">{{ 'DevicesDetection_ClientHintsNotSupported'|translate }}</span>

            <br /><br />
            <input type="submit" value="{{ 'General_Refresh'|translate }}" class="btn" />
        </form>

        {% if bot_info %}

        <h3>{{ 'DevicesDetection_BotDetected'|translate(bot_info.name) }}</h3>

        {% else %}

        <h3>{{ 'DevicesDetection_ColumnOperatingSystem'|translate|e('html_attr') }}</h3>
        <table class="detection" piwik-content-table>
            <tbody>
            <tr>
                <td>{{ 'General_Name'|translate }} <small>(<a href="javascript:showList('os');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ os_logo }}" />{{ os_name }}</td>
            </tr>
            <tr>
                <td>{{ 'CorePluginsAdmin_Version'|translate }}</td>
                <td>{{ os_version }}</td>
            </tr>
            <tr>
                <td>{{ 'DevicesDetection_OperatingSystemFamily'|translate }}  <small>(<a href="javascript:showList('osfamilies');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ os_family_logo }}" />{{ os_family }}</td>
            </tr>
            </tbody>
        </table>

        <h3>{{ 'DevicesDetection_ColumnBrowser'|translate }}</h3>
        <table class="detection" piwik-content-table>
            <tbody>
            <tr>
                <td>{{ 'General_Name'|translate }} <small>(<a href="javascript:showList('browsers');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ browser_logo }}" />{{ browser_name }}</td>
            </tr>
            <tr>
                <td>{{ 'CorePluginsAdmin_Version'|translate }}</td>
                <td>{{ browser_version }}</td>
            </tr>
            <tr>
                <td>{{ 'DevicesDetection_BrowserFamily'|translate }} <small>(<a href="javascript:showList('browserfamilies');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ browser_family_logo }}" />{{ browser_family }}</td>
            </tr>
            </tbody>
        </table>

        <h3>{{ 'DevicesDetection_Device'|translate }}</h3>
        <table class="detection" piwik-content-table>
            <tbody>
            <tr>
                <td>{{ 'DevicesDetection_dataTableLabelTypes'|translate }} <small>(<a href="javascript:showList('devicetypes');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ device_type_logo }}" />{{ device_type }}</td>
            </tr>
            <tr>
                <td>{{ 'DevicesDetection_dataTableLabelBrands'|translate }} <small>(<a href="javascript:showList('brands');">{{ 'Mobile_ShowAll'|translate }}</a>)</small></td>
                <td><img height="16px" width="16px" src="{{ device_brand_logo }}" />{{ device_brand }}</td>
            </tr>
            <tr>
                <td>{{ 'DevicesDetection_dataTableLabelModels'|translate }}</td>
                <td>{{ device_model }}</td>
            </tr></tbody>
        </table>

        {% endif %}
    </div>

    <div class="ui-confirm" id="deviceDetectionItemList">
        <div class="itemList"> </div>
        <input role="close" type="button" value="{{ 'General_Close'|translate }}"/>
    </div>

{% endblock %}