{% extends 'user.twig' %}

{% block content %}

    {% import 'ajaxMacros.twig' as ajax %}

    <div style="margin-top:10px">
        {{ ajax.errorDiv('ajaxErrorMobileMessagingSettings') }}
    </div>

    {% import '@MobileMessaging/macros.twig' as macro %}

    {% if accountManagedByCurrentUser and delegatedManagement %}
        <h2 piwik-enriched-headline
                >{{ 'MobileMessaging_Settings_SMSProvider'|translate }}</h2>

        {{ macro.manageSmsApi(credentialSupplied, creditLeft, smsProviders, provider) }}
    {% endif %}

    <h2>{{ 'MobileMessaging_PhoneNumbers'|translate }}</h2>
    {% if not credentialSupplied %}
        {% if accountManagedByCurrentUser and delegatedManagement %}
            {{ 'MobileMessaging_Settings_CredentialNotProvided'|translate }}
        {% elseif accountManagedByCurrentUser %}
            Before you can create and manage phone numbers, please setup an SMS provider in <a href="{{ linkTo({'action': 'index'}) }}">admin mobile messaging settings</a>.
        {% else %}
            {{ 'MobileMessaging_Settings_CredentialNotProvidedByAdmin'|translate }}
        {% endif %}
    {% else %}
        {{ 'MobileMessaging_Settings_PhoneNumbers_Help'|translate }}
        <br/>
        <br/>
        <table style="width:900px;" class="adminTable">
            <tbody>
            <tr>
                <td style="width:480px;">
                    <strong>{{ 'MobileMessaging_Settings_PhoneNumbers_Add'|translate }}</strong>
                    <br/><br/>

                <span id="suspiciousPhoneNumber" style="display:none;">
                    {{ 'MobileMessaging_Settings_SuspiciousPhoneNumber'|translate('54184032') }}
                    <br/><br/>
                </span>

                    + <input id="countryCallingCode" size="4" maxlength="4"/>&nbsp;
                    <input id="newPhoneNumber"/>
                    <input type="submit" value='{{ 'General_Add'|translate }}'
                           id="addPhoneNumberSubmit"/>
                    <br/>

		<span style=' font-size: 11px;'><span
                    class="form-description">{{ 'MobileMessaging_Settings_CountryCode'|translate }}</span>
			<span class="form-description"
                  style="margin-left:50px;">{{ 'MobileMessaging_Settings_PhoneNumber'|translate }}</span></span>
                    <br/><br/>

                    {{ 'MobileMessaging_Settings_PhoneNumbers_CountryCode_Help'|translate }}

                    <select id="countries">
                        {# this is a trick to avoid selecting the first country when no default could be found #}
                        <option value="">&nbsp;</option>
                        {% for countryCode, country in countries %}
                            <option value='{{ country.countryCallingCode }}'
                                    {% if defaultCountry==countryCode %} selected="selected" {% endif %}
                                    >
                                {{ country.countryName }}
                            </option>
                        {% endfor %}
                    </select>

                </td>
                <td style="width:220px;">
                    {% import 'macros.twig' as piwik %}
                    {{ piwik.inlineHelp(strHelpAddPhone) }}
                </td>
            </tr>
            <tr>
                <td colspan="2">

                    {% if phoneNumbers|length > 0 %}
                        <br/>
                        <br/>
                        <strong>{{ 'MobileMessaging_Settings_ManagePhoneNumbers'|translate }}</strong>
                        <br/>
                        <br/>
                    {% endif %}

                    {{ ajax.errorDiv('invalidVerificationCodeAjaxError') }}

                    <div id='phoneNumberActivated' style="display:none;">
                        {{ 'MobileMessaging_Settings_PhoneActivated'|translate }}
                    </div>

                    <div id='invalidActivationCode' style="display:none;">
                        {{ 'MobileMessaging_Settings_InvalidActivationCode'|translate }}
                    </div>

                    <ul>
                        {% for phoneNumber, validated in phoneNumbers %}
                            <li>
                                <span class='phoneNumber'>{{ phoneNumber }}</span>
                                {% if not validated %}
                                    <input class='verificationCode'/>
                                    <input
                                            type='submit'
                                            value='{{ 'MobileMessaging_Settings_ValidatePhoneNumber'|translate }}'
                                            class='validatePhoneNumberSubmit'
                                            />
                                {% endif %}
                                <input
                                        type='submit'
                                        value='{{ 'General_Remove'|translate }}'
                                        class='removePhoneNumberSubmit'
                                        />
                                {% if not validated %}
                                    <br/>
                                    <span class='form-description'>{{ 'MobileMessaging_Settings_VerificationCodeJustSent'|translate }}</span>
                                {% endif %}
                                <br/>
                                <br/>
                            </li>
                        {% endfor %}
                    </ul>

                </td>
            </tr>
            </tbody>
        </table>
    {% endif %}

    {{ ajax.loadingDiv('ajaxLoadingMobileMessagingSettings') }}

    <div class='ui-confirm' id='confirmDeleteAccount'>
        <h2>{{ 'MobileMessaging_Settings_DeleteAccountConfirm'|translate }}</h2>
        <input role='yes' type='button' value='{{ 'General_Yes'|translate }}'/>
        <input role='no' type='button' value='{{ 'General_No'|translate }}'/>
    </div>

{% endblock %}