{% extends 'admin.twig' %}

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

{% block content %}
{% import 'macros.twig' as piwik %}

<div piwik-content-intro>
    <h2 piwik-enriched-headline
        help-url="https://matomo.org/docs/geo-locate/"
        id="location-providers">{{ title }}</h2>
    <p>{{ 'UserCountry_GeolocationPageDesc'|translate }}</p>
</div>
<div piwik-content-block content-title="{{ 'UserCountry_LocationProvider'|translate|e('html_attr') }}">
<div piwik-location-provider-selection="{{ currentProviderId|e('html_attr') }}">

    {% if not isThereWorkingProvider %}
        <h3 style="margin-top:0;">{{ 'UserCountry_HowToSetupGeoIP'|translate }}</h3>
        <p>{{ 'UserCountry_HowToSetupGeoIPIntro'|translate }}</p>
        <ul style="list-style:disc !important;margin-left:2em;">
            <li style="list-style-type: disc !important;">{{ 'UserCountry_HowToSetupGeoIP_Step1'|translate('<a href="http://geolite.maxmind.com/download/geoip/database/GeoLiteCity.dat.gz">','</a>','<a rel="noreferrer"  target="_blank" href="http://www.maxmind.com/?rId=piwik">','</a>')|raw }}</li>
            <li style="list-style-type: disc !important;">{{ 'UserCountry_HowToSetupGeoIP_Step2'|translate("'GeoLiteCity.dat'",'<strong>','</strong>')|raw }}</li>
            <li style="list-style-type: disc !important;">{{ 'UserCountry_HowToSetupGeoIP_Step3'|translate('<strong>','</strong>','<span style="color:green"><strong>','</strong></span>')|raw }}</li>
            <li style="list-style-type: disc !important;">{{ 'UserCountry_HowToSetupGeoIP_Step4'|translate }}</li>
        </ul>
        <p>&nbsp;</p>
    {% endif %}

    <div class="row">
        <div class="col s12 push-m9 m3">{{ 'General_InfoFor'|translate(thisIP) }}</div>
    </div>

    {% for id,provider in locationProviders %}
    <div class="row form-group provider{{ id|e('html_attr') }}">
        <div class="col s12 m4 l2">
            <p>
                <input class="location-provider"
                       name="location-provider"
                       value="{{ id }}"
                       type="radio"
                       ng-model="locationSelector.selectedProvider"
                       id="provider_input_{{ id }}" {% if provider.status != 1 %}disabled="disabled"{% endif %}/>
                <label for="provider_input_{{ id }}">{{ provider.title|translate }}</label>
            </p>
            <p class="loc-provider-status">
                {% if provider.status == 0 %}
                    <span class="is-not-installed">{{ 'General_NotInstalled'|translate}}</span>
                {% elseif provider.status == 1 %}
                    <span class="is-installed">{{ 'General_Installed'|translate }}</span>
                {% elseif provider.status == 2 %}
                    <span class="is-broken">{{ 'General_Broken'|translate }}</span>
                {% endif %}
            </p>
        </div>
        <div class="col s12 m4 l6">
            <p>{{ provider.description|translate|raw }}</p>
            {% if provider.status != 1 and provider.install_docs is defined %}
                <p>{{ provider.install_docs|raw }}</p>
            {% endif %}
        </div>
        <div class="col s12 m4 l4">
            {% if provider.status == 1 %}
                <div class="form-help">
                    {% if thisIP != '127.0.0.1' %}
                        {{ 'UserCountry_CurrentLocationIntro'|translate }}:
                        <div>
                            <br/>
                            <div style="position: absolute;"
                                 piwik-activity-indicator
                                 loading='locationSelector.updateLoading[{{ id|json_encode }}]'></div>
                            <span class="location"><strong>{{ provider.location|raw }}</strong></span>
                        </div>
                        <div class="text-right">
                            <a href="javascript:;"
                               ng-click='locationSelector.refreshProviderInfo({{ id|json_encode }})'>{{ 'General_Refresh'|translate }}</a>
                        </div>
                    {% else %}
                        {{ 'UserCountry_CannotLocalizeLocalIP'|translate(thisIP) }}
                    {% endif %}
                </div>
            {% endif %}
            {% if provider.statusMessage is defined and provider.statusMessage %}
                <div class="form-help">
                    {% if provider.status == 2 %}<strong>{{ 'General_Error'|translate }}:</strong> {% endif %}{{ provider.statusMessage|raw }}
                </div>
            {% endif %}
            {% if provider.extra_message is defined and provider.extra_message %}
                <div class="form-help">
                    {{ provider.extra_message|raw }}
                </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    <div piwik-save-button onconfirm="locationSelector.save()" saving="locationSelector.isLoading"></div>

</div>
</div>
<div piwik-content-block
     content-title="{% if not geoIPDatabasesInstalled %}{{ 'UserCountry_GeoIPDatabases'|translate|e('html_attr') }}{% else %}{{ 'UserCountry_SetupAutomaticUpdatesOfGeoIP'|translate|e('html_attr') }}{% endif %}"
     id="geoip-db-mangement">

    <div piwik-location-provider-updater
         geoip-database-installed="{% if geoIPDatabasesInstalled %}1{% else %}0{% endif %}">

        {% if showGeoIPUpdateSection %}
            {% if not geoIPDatabasesInstalled %}
                <div ng-show="!locationUpdater.geoipDatabaseInstalled">
                    <div ng-show="locationUpdater.showPiwikNotManagingInfo">
                        <h3>{{ 'UserCountry_PiwikNotManagingGeoIPDBs'|translate|e('html_attr') }}</h3>
                        <div id="manage-geoip-dbs">
                            <div class="row" id="geoipdb-screen1">
                                <div class="geoipdb-column-1 col s6">
                                    <p>{{ 'UserCountry_IWantToDownloadFreeGeoIP'|translate|raw }}</p>
                                </div>
                                <div class="geoipdb-column-2 col s6">
                                    <p>{{ 'UserCountry_IPurchasedGeoIPDBs'|translate('<a href="http://www.maxmind.com/en/geolocation_landing?rId=piwik">','</a>')|raw }}</p>
                                </div>
                                <div class="geoipdb-column-1 col s6">
                                    <input type="button" class="btn"
                                           ng-click="locationUpdater.startDownloadFreeGeoIp()"
                                           value="{{ 'General_GetStarted'|translate }}..."/>
                                </div>
                                <div class="geoipdb-column-2 col s6">
                                    <input type="button" class="btn"
                                           ng-click="locationUpdater.startAutomaticUpdateGeoIp()"
                                           value="{{ 'General_GetStarted'|translate }}..." id="start-automatic-update-geoip"/>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div id="geoipdb-screen2-download" ng-show="locationUpdater.showFreeDownload">
                        <div piwik-progressbar
                             label="{{ ('UserCountry_DownloadingDb'|translate('<a href="'~geoLiteUrl~'">GeoLiteCity.dat</a>') ~ '...')|json_encode }}"
                             progress="locationUpdater.progressFreeDownload">
                        </div>
                    </div>
                </div>
            {% endif %}

            {% include "@UserCountry/_updaterManage.twig" %}
        {% else %}
            <p class="form-description">{{ 'UserCountry_CannotSetupGeoIPAutoUpdating'|translate }}</p>
        {% endif %}
    </div>
</div>

{% endblock %}