{% extends 'admin/base.html.twig' %}

{% trans_default_domain 'admin' %}

{% import 'core/src-macro.html.twig' as resources %}

{% set pageTitle = "Google Analytics:"|trans ~ " " ~ page|trans|capitalize %}
{% block title %}{{ pageTitle }}{% endblock %}
{% block pageTitle %}{{ pageTitle }}{% endblock %}

{% set tabs = {
    "general": {
        "title": "Général"|trans,
        "icon": "fal fa-rss"
    },
    "localization": {
        "title": "Localisation"|trans,
        "icon": "fal fa-map-marked-alt"
    },
    "pages": {
        "title": "Pages"|trans,
        "icon": "fal fa-copy"
    },
    "search": {
        "title": "Recherche"|trans,
        "icon": "fal fa-search"
    },
    "parameters": {
        "title": "Paramétrages"|trans,
        "icon": "fal fa-cog"
    }
} %}

{% block stylesheets %}
    {{ parent() }}
    {{ resources.encore_absolute_link_tags('admin-google-analytics', 'admin') }}
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    {{ resources.encore_entry_js_files('admin-google-analytics', 'admin', 'Analytics') }}
{% endblock %}

{% block body %}

    {% set googleI18ns = api.google|googleI18n(website, locale) %}
    {% set configuration = website.configuration %}
    {% set allLocales = configuration.allLocales %}
    {% set hasMultiLocales = allLocales|length > 0 %}

    <div class="card">

        <ul class="nav nav-tabs customtab large" role="tablist">
            {% for tabId, config in tabs %}
                <li class="nav-item">
                    {% if not loop.last %}
                        <a href="{{ path('admin_google_analytics', {"website": websiteId, "page": tabId, 'locale': locale}) }}"
                           class="nav-link{% if tabId == app.request.get('page') %} active{% endif %}" data-toggle="preloader">
                            <i class="{{ config.icon }} mr-sm-2"></i>
                            <span class="d-none d-sm-inline-block">{{ config.title }}</span>
                        </a>
                    {% else %}
                        <a href="#" id="google-params" class="nav-link d-none" data-toggle="modal" data-target="#google-modal-dev">
                            <i class="{{ config.icon }} mr-sm-2"></i>
                            <span class="d-none d-sm-inline-block">{{ config.title }}</span>
                        </a>
                    {% endif %}
                </li>
            {% endfor %}
            <li id="google-auth" class="nav-item{% if hasMultiLocales %} multi-locales{% endif %}">
                <a class="nav-link">
                    <div id="embed-api-auth-container"></div>
                </a>
            </li>
            {% if hasMultiLocales %}
                <li id="google-locales-switcher" class="nav-item">
                    <div class="btn-group" role="group">
                        <button id="locales-dropdown" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            <i class="flag-icon flag-icon-{{ locale }} mr-2"></i>{{ locale|languageName }}
                        </button>
                        <div id="locales-dropdown-select" class="dropdown-menu" aria-labelledby="locales-dropdown">
                            {% for websiteLocale in allLocales %}
                                {% if websiteLocale != locale %}
                                    <a class="dropdown-item" href="{{ path('admin_google_analytics', {'website': websiteId(), 'page': 'general', 'locale': websiteLocale}) }}" data-toggle="preloader">
                                        <i class="flag-icon flag-icon-{{ websiteLocale }} mr-2"></i>{{ websiteLocale|languageName }}
                                    </a>
                                {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                </li>
            {% endif %}
        </ul>

        <div class="card-body pb-0">

            <div id="google-data-js"
                 data-client-id="{{ googleI18ns.clientId }}"
                 data-duration="{{ googleI18ns.analyticsStatsDuration }}"
                 data-account-id="{{ googleI18ns.analyticsAccountId }}"></div>

            {% if googleI18ns.clientId %}
                {% block page %}{% endblock %}
            {% else %}
                {% include 'admin/include/alert.html.twig' with {"alert": "danger", "message": "Vous devez configurer l'API Google"|trans} only %}
            {% endif %}

        </div>
    </div>

    <div class="modal fade" id="google-modal-dev">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">{{"Comptes Google Analytics"|trans}}</h4>
                    <button type="button" class="close" data-dismiss="modal"><i class="fal fa-times"></i></button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div id="view-selector-container"></div>
                    <span id="gaIdResultContainer"></span>
                </div>
            </div>
        </div>
    </div>

{% endblock %}