{{template "layout.html" .}}

{{define "content"}}
<link rel="stylesheet" href="{{asset "/template/default/assets/css/user-pages.css"}}">


<div class="card user-simple-page profile-page"><div class="card-body">
    <div class="user-page-head">
        <div class="user-page-head-main">
            <h5>{{T "user_profile_title"}}</h5>
            <p class="text-muted">{{T "user_profile_desc"}}</p>
        </div>
    </div>

    <form id="profileForm" autocomplete="off">
        <div class="profile-field">
            <label>{{T "user_group_label"}}</label>
            <div class="profile-group-value">
                {{if .User.GroupName}}
                {{if eq .User.Gid 1}}<span class="badge bg-danger profile-group-badge">{{.User.GroupName}}</span>
                {{else if eq .User.Gid 2}}<span class="badge bg-info profile-group-badge">{{.User.GroupName}}</span>
                {{else if eq .User.Gid 3}}<span class="badge bg-primary profile-group-badge">{{.User.GroupName}}</span>
                {{else if eq .User.Gid 4}}<span class="badge bg-secondary profile-group-badge">{{.User.GroupName}}</span>
                {{else}}<span class="badge bg-secondary profile-group-badge">{{.User.GroupName}}</span>{{end}}
                {{else}}
                <span class="text-muted">—</span>
                {{end}}
            </div>
        </div>
        <div class="profile-field">
            <label for="profileUsername">{{T "user_username_label"}}</label>
            <input type="text" class="form-control nc-privacy-input" id="profileUsername" name="username" data-privacy-kind="username" value="{{.User.Username}}" required minlength="2" maxlength="20">
        </div>
        <div class="profile-field">
            <label for="profileEmail">{{T "user_email_label"}}</label>
            <input type="email" class="form-control nc-privacy-input" id="profileEmail" name="email" data-privacy-kind="email" value="{{.User.Email}}" required>
        </div>
        <div class="profile-field">
            <label for="profileNickname">{{T "user_nickname_label"}}</label>
            <input type="text" class="form-control" id="profileNickname" name="nickname" value="{{.User.Nickname}}" required minlength="2" maxlength="20" {{if not .User.CanChangeNickname}}readonly{{end}}>
            <p class="profile-hint">{{T "user_nickname_hint"}}</p>
            {{if not .User.CanChangeNickname}}
            <p class="profile-hint profile-cooldown">{{T "user_nickname_cooldown"}} {{.User.NicknameNextChangeStr}}</p>
            {{end}}
        </div>
        <div class="profile-actions">
            <button type="submit" class="btn btn-primary" id="profileSubmitBtn">{{T "user_profile_save"}}</button>
            <a href="/user" class="btn-link-cancel">{{T "user_btn_cancel"}}</a>
        </div>
    </form>
</div></div>
{{end}}

{{define "scripts"}}
<script>
(function() {
    var msgUpdated = {{json (T "user_profile_updated")}};
    var msgFailed = {{json (T "user_failed")}};
    var btnSave = {{json (T "user_profile_save")}};
    var btnSaving = {{json (T "user_profile_saving")}};

    $('#profileForm').on('submit', function(e) {
        e.preventDefault();
        var btn = $('#profileSubmitBtn');
        btn.prop('disabled', true).text(btnSaving);

        $.post('/api?mod=user&act=profile', {
            username: $('#profileUsername').val(),
            email: $('#profileEmail').val(),
            nickname: $('#profileNickname').val()
        }, function(res) {
            if (res.success) {
                BootstrapModal.msg(msgUpdated, {icon: 1, callback: function() {
                    window.location.reload();
                }});
            } else {
                BootstrapModal.msg(res.message || msgFailed, {icon: 2});
            }
        }, 'json').always(function() {
            btn.prop('disabled', false).text(btnSave);
        });
    });
})();
</script>
{{end}}