<style>
    #ul_message {
        visibility: hidden;
    }

    .ulopt_input {
        width: 380px;
    }
    .ulogin-toggler .ulogin-toggler-button{
        color: gray;
        border-bottom: 1px dashed gray;
        display: inline-block;
        cursor: pointer;
    }
    .ulogin-toggler .ulogin-toggler-button span{
        line-height: 10px;
        display: inline-block;
        height: 10px;
    }
    .ulogin-toggler .ulogin-toggler-button.collapsed .ulogin-toggler-arrow{
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }
</style>
<script>
    function showMessage() {
        document.getElementById('ul_message').style.visibility = "visible";
    }
</script>
<div class="wrap">
    <h2>{HEADER_TXT}</h2>

    <form name="uLoginSettingsForm" method="post" action="{URI}">
        <h3>{H3_1_TXT}</h3>
        <table class="form-table">
            <tbody>
            <tr>
                <th>
                    <label for="uloginID1" class="ulopt_label">{LABEL_ULOGINID1_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" type="text" id="uloginID1" name="uloginID1" value="{ULOGINID1}"
                           maxlength="8"/>

                    <p class="description">{ULOGINID1_DESCR}</p>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="uloginID2" class="ulopt_label">{LABEL_ULOGINID2_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" type="text" id="uloginID2" name="uloginID2" value="{ULOGINID2}"
                           maxlength="8"/>

                    <p class="description">{ULOGINID2_DESCR}</p>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="uloginID3" class="ulopt_label">{LABEL_ULOGINID3_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" type="text" id="uloginID3" name="uloginID3" value="{ULOGINID3}"
                           maxlength="8"/>

                    <p class="description">{ULOGINID3_DESCR}</p>
                </td>
            </tr>
            </tbody>
        </table>

        <h3>{H3_3_TXT}</h3>
        <table class="form-table">
            <tbody>
            <tr>
                <th>
                    <label for="uloginLabel" class="ulopt_label">{LABEL_LABEL_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" type="text" id="uloginLabel" name="uloginLabel" value="{LABEL}"/>

                    <p class="description">{LABEL_DESCR}</p>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="uloginSetUrl" class="ulopt_label">{LABEL_SETURL_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" id="uloginSetUrl" name="uloginSetUrl" type="checkbox" {SETURL_CHECKED} />
                    <p class="description">{SETURL_DESCR}</p>
                </td>
            </tr>
            <tr>
                <th>
                    <label for="ulogin_new_user_notification"
                           class="ulopt_label">{LABEL_NEW_USER_NOTIFICATION_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" id="ulogin_new_user_notification" name="ulogin_new_user_notification"
                           type="checkbox" {NEW_USER_NOTIFICATION_CHECKED} />
                    <p class="description">{NEW_USER_NOTIFICATION_DESCR}</p>
                </td>
            </tr>

            <tr>
                <th>
                    <label for="uloginSocAvatar" class="ulopt_label">{LABEL_SOCAVATAR_TXT}:</label>
                </th>
                <td>
                    <input class="ulopt_input" id="uloginSocAvatar" name="uloginSocAvatar" type="checkbox"
                    {SOCAVATAR_CHECKED} />
                    <p class="description">{SOCAVATAR_DESCR}</p>
                </td>
            </tr>

            <tr>
                <th>
                    <label for="uloginBackurl" class="ulopt_label">{BACKURL_LABEL}:</label>
                </th>
                <td>
                    <input class="ulopt_input" type="text" id="uloginBackurl" name="uloginBackurl" value="{BACKURL_VALUE}"/>

                    <p class="description">{BACKURL_DESCR}</p>
                </td>
            </tr>

            <tr>
                <td></td>
            </tr>

            <tr class="ulogin-toggler">
                <th></th>
                <td>
                    <div id="showHiddenButton" class="ulogin-toggler-button">
                        Продвинутые настройки
                        <span class="ulogin-toggler-arrow"> ⌵</span>
                    </div>
                    <script>
                        (function($){
                            $(document).ready(function(){

                                $('#showHiddenButton').on('click', function(e){
                                    e.preventDefault();
                                    $(this).toggleClass('collapsed');
                                    $('.show-on-click').toggleClass('hidden');
                                });

                            });
                        })(jQuery);
                    </script>
                </td>
            </tr>

            <tr class="show-on-click hidden">
                <th>
                    <label for="uloginOnlySsl" class="ulopt_label">{LABEL_ONLY_SSL}:</label>
                </th>
                <td>
                    <input class="ulopt_input" id="uloginOnlySsl" name="uloginOnlySsl" type="checkbox"
                    {ONLY_SSL_CHECKED} />
                    <p class="description">{ONLY_SSL_DESCR}</p>
                    <script>
                        (function($){
                            $(document).ready(function(){

                                var $uloginOnlySsl = $("#uloginOnlySsl");

                                $uloginOnlySsl.on('change', function(){
                                    if($uloginOnlySsl.prop('checked') === true) {
                                        $.get('https://' + location.hostname).fail(function (response, message) {
                                            if (confirm('{ONLY_SSL_CONFIRM}')) {
                                                $uloginOnlySsl.prop('checked', true);
                                            } else {
                                                $uloginOnlySsl.prop('checked', false);
                                            }
                                        })
                                    }
                                });

                            });
                        })(jQuery);
                    </script>
                </td>
            </tr>

            <tr class="show-on-click hidden">
                <th>
                    <label for="uloginForceFields" class="ulopt_label">{LABEL_FORCE_FIELDS}:</label>
                </th>
                <td>
                    <input class="ulopt_input" id="uloginForceFields" name="uloginForceFields" type="text"
                           value="{FORCE_FIELDS_VALUE}" />
                    <p class="description">{FORCE_FIELDS_DESCR}</p>
                </td>
            </tr>

            </tbody>
        </table>

        <p class="submit">
            <input type="submit" name="update_uLoginPluginSettings" id="update_uLoginPluginSettings"
                   class="button button-primary" value="{BUTTON_VALUE}" onclick="showMessage();"/>
            <span id="ul_message" class="ulopt_label">{SPAN_TXT}</span>
        </p>
    </form>

</div>