{% extends 'admin.twig' %}

{% block content %}
    {% if accountManagedByCurrentUser %}
        <h2 piwik-enriched-headline
            feature-name="{{ 'MobileMessaging_SettingsMenu'|translate }}"
                >{{ 'MobileMessaging_Settings_SMSAPIAccount'|translate }}</h2>
        {% if credentialSupplied %}
            {{ 'MobileMessaging_Settings_CredentialProvided'|translate(provider) }}
            {{ creditLeft }}
            <br/>
            {{ 'MobileMessaging_Settings_UpdateOrDeleteAccount'|translate("<a id='displayAccountForm'>","</a>","<a id='deleteAccount'>","</a>")|raw }}
        {% else %}
            {{ 'MobileMessaging_Settings_PleaseSignUp'|translate }}
        {% endif %}
        <div id='accountForm' {% if credentialSupplied %}style='display: none;'{% endif %}>
            <br/>
            {{ 'MobileMessaging_Settings_SMSProvider'|translate }}
            <select id='smsProviders'>
                {% for smsProvider, description in smsProviders %}
                    <option value='{{ smsProvider }}'>
                        {{ smsProvider }}
                    </option>
                {% endfor %}
            </select>

            {{ 'MobileMessaging_Settings_APIKey'|translate }}
            <input size='25' id='apiKey'/>

            <input type='submit' value='{{ 'General_Save'|translate }}' id='apiAccountSubmit' class='submit'/>

            {% for smsProvider, description in smsProviders %}
                <div class='providerDescription' id='{{ smsProvider }}'>
                    {{ description|raw }}
                </div>
            {% endfor %}

        </div>
    {% endif %}

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

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

    <h2>{{ 'MobileMessaging_PhoneNumbers'|translate }}</h2>
    {% if not credentialSupplied %}
        {% if accountManagedByCurrentUser %}
            {{ 'MobileMessaging_Settings_CredentialNotProvided'|translate }}
        {% 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 %}

    {% if isSuperUser %}
        <h2>{{ 'MobileMessaging_Settings_SuperAdmin'|translate }}</h2>
        <table class='adminTable' style='width:650px;'>
            <tr>
                <td style="width:400px;">{{ 'MobileMessaging_Settings_LetUsersManageAPICredential'|translate }}</td>
                <td style="width:250px;">
                    <fieldset>
                        <label>
                            <input
                                    type='radio'
                                    value='false'
                                    name='delegatedManagement' {% if not delegatedManagement %} checked='checked'{% endif %} />
                            {{ 'General_No'|translate }}
                            <br/>
                        <span class='form-description'>
                            ({{ 'General_Default'|translate }}
                            ) {{ 'MobileMessaging_Settings_LetUsersManageAPICredential_No_Help'|translate }}
                        </span>
                        </label>
                        <br/>
                        <br/>
                        <label>
                            <input
                                    type='radio'
                                    value='true'
                                    name='delegatedManagement' {% if delegatedManagement %} checked='checked'{% endif %} />
                            {{ 'General_Yes'|translate }}
                            <br/>
                            <span class='form-description'>{{ 'MobileMessaging_Settings_LetUsersManageAPICredential_Yes_Help'|translate }}</span>
                        </label>

                    </fieldset>
            </tr>
        </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 %}