{{template "header" .}}

<div class="container px-5 py-5 my-5 text-center">
    <div class="container w-50 text-start">
        <div class="alert alert-dismissible" id="common-alert" role="alert" style="display: none">
            <p></p>
            <button type="button" class="btn-close" onclick="($('#common-alert').hide())"></button>
        </div>
        {{if .User}}
            <h1>User: {{.User.FullName}} (ID: {{.User.UserID}})</h1>
            {{if .YandexUrl}}
                <a class="btn btn-primary" href="{{.YandexUrl}}">Войти в Яндекс</a>
            {{end}}
        {{else}}
            <h1>Create account</h1>
            <form id="form-registration" action="/user/registration" method="post">
                <div class="form-floating mb-3">
                    <input type="text" class="form-control" id="full-name" name="full-name" placeholder="Full name"
                           required>
                    <label for="full-name">Full name</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required>
                    <label for="email">E-mail</label>
                </div>
                <div class="form-floating mb-3">
                    <input type="password" class="form-control" id="password" name="password" placeholder="Password"
                           required>
                    <label for="password">Password</label>
                </div>
                <button type="submit" class="btn btn-primary">Create</button>
            </form>
        {{end}}
    </div>
</div>

{{template "footer" .}}

<script>
    $(function () {
        $('#form-registration').on('submit', function (e) {
            e.preventDefault();
            var form = $(this);
            var alert = $('#common-alert');

            $.ajax({
                url: form.attr('action'),
                type: 'POST',
                dataType: 'json',
                data: JSON.stringify(form.serializeJSON()),
                success: function (result) {
                    location.reload();
                },
                error: function (result) {
                    console.log(result.responseText)
                    alert.addClass('alert-danger');
                    alert.show();
                    alert.children('p').html(result.responseText);
                },
            })
        })
    })
</script>