{layout '..\@layout.latte'}
{block content}
<style>
            .styled-input {
                position: relative;
                margin: 20px 0;
            }

            .styled-input input {
                width: 100%;
                padding: 10px 10px 10px 0;
                font-size: 16px;
                border: none;
                border-bottom: 2px solid #ccc;
                background: transparent;
                outline: none;
            }

            .styled-input input:focus {
                border-bottom: 2px solid #000;
            }

            .styled-input label {
                position: absolute;
                top: 10px;
                left: 0;
                font-size: 16px;
                color: #999;
                pointer-events: none;
                transition: 0.2s ease all;
            }

            .styled-input input:focus~label,
            .styled-input input:valid~label {
                top: -20px;
                font-size: 12px;
                color: #000;
            }
        </style>
{if $ngallery['root']['registration']['access']['public'] === true}
                    <center>
                        <h1><b>Регистрация</b></h1>
                        <table cellspacing="10" cellpadding="0" border="0" align="center" style="margin: 9px;">
                            <tbody>
                                <tr>
                                    <td>
                                        <img src="/static/img/logocube.png" style="width: 32px;" align="middle">
                                    </td>
                                    <td>
                                        <b>{$ngallery['root']['title']} — это универсальное средство для размещения своих фотографий и видеороликов, созданное на базе движка СТТС.</b><br>
                                        Публикуйте свои самые лучшие фотографии и великолепные видео на наш портал, чтобы их увидели все желающие.
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <div class="mf-center-block">
                            <form method="post" id="form" class="p20i mf-label mf-center-block-wide">
                                <input type="hidden" name="accept" value="yes">
                                <div class="styled-input">
                                    <input type="text" name="username" id="username" required="">
                                    <label for="username">Ваш никнейм</label>
                                </div>
                                <div style="color:#e00" id="err_username"></div>
                                <div class="styled-input">
                                    <input type="text" name="email" id="email" required="">
                                    <label for="email">Ваш e-mail</label>
                                </div>
                                <div style="color:#e00" id="err_email"></div>
                                <div class="styled-input">
                                    <input name="password" id="password" type="password" required="">
                                    <label for="password">Ваш пароль</label>
                                </div>
                                <div style="color:#e00" id="err_password"></div>


                                <input type="button" id="regbtn" class="mf-button-wide" style="margin-top:15px" value="Зарегистрироваться">
                                <p>Регистрируясь на сервере <?= NGALLERY['root']['title'] ?>, вы <a href="/rules">принимаете его правила.</a></p>
                                <p><b><a href="/tour">Вы можете пройти экскурсию по сайту.</a></b></p>
                            </form><br><br>

                            <br>
                        </div>

                        <script n:syntax=off>
                            $(document).ready(function() {
                                $('#email').on('input', function() {
                                    $('#err_email').html('');
                                });

                                $('#regbtn').on('click', function() {
                                    var username = $('#username').val().trim();
                                    var err_username = $('#err_username').html('');
                                    var email = $('#email').val().trim();
                                    var err_email = $('#err_email').html('');
                                    var password = $('#password').val().trim();
                                    var err_password = $('#err_password').html('');

                                    if (username == '') err_username.html('<i style="color:#e00" class="bx bx-error"></i> Поле не заполнено');
                                    if (password == '') err_password.html('<i style="color:#e00" class="bx bx-error"></i> Поле не заполнено');
                                    if (email == '') err_email.html('<i style="color:#e00" class="bx bx-error"></i> Поле не заполнено');
                                    else
                                    if (!email.match(/^[0-9a-z_\-.]+@[0-9a-z_\-^.]+\.[a-z]{2,4}$/i)) err_email.html('<i style="color:#e00" class="bx bx-error"></i> Некорректный адрес');


                                    if (err_email.html() == '') {
                                        $(this).prop('disabled', true).val('Отправка данных...');

                                        $.post('/api/register', {
                                                username: username,
                                                email: email,
                                                password: password
                                            }, function(r) {
                                                r = JSON.parse(r);
                                                if (r.errorcode > 0) {
                                                    $('#err_email').html('<i class="bx bx-error"></i>' + r.errortitle);
                                                    $('#regbtn').prop('disabled', false).val('Зарегистрироваться');
                                                } else {
                                                    window.location.href = "/"
                                                }
                                            })
                                            .fail(function(jx) {
                                                if (jx.responseText != '') alert(jx.responseText);
                                            });
                                    }
                                });
                            });
                        </script>
                    </center>
               {else}
                    <center>
                        <h1>К сожалению, регистрация на сервере <?= NGALLERY['root']['title'] ?> закрыта.</h1>
                        </center>
              {/if}
{/block}