{{/*
This file is part of SystemTestPortal.
Copyright (C) 2017  Institute of Software Technology, University of Stuttgart

SystemTestPortal is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

SystemTestPortal is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with SystemTestPortal.  If not, see <http://www.gnu.org/licenses/>.
*/}}

{{define "content"}}
<div class="container">
    <div class="card p-4">
        <div class="row justify-content-center mb-4">
            <div class="col-4 col-sm-2 p-2">
                <img id="inputProfileImage" src="{{.Profile.Image}}" class="img-fluid image-responsive rounded profile-picture">
                <label class="btn btn-secondary btn-file mt-3">{{T "Upload file" .}}
                    <input style="display: none;" class="" type="file" accept=".png,.jpg,.jpeg">
                </label>
            </div>
            <div class="col-12 col-sm-10 col-md-6">
                <h3 id="displayName">{{.Profile.DisplayName}}</h3>
                <p id="username" class="m-0"><strong>Username: </strong>{{.Profile.Name}}</p>
                <strong>E-Mail: </strong><input type="email" id="inputNewEmail" class="m-0 form-control rounded" value="{{.Profile.Email}}">
                <p for="inputUserBio"><strong>{{T "Biography" .}}:</strong></p>
                <div class="md-area">
                    <textarea class="form-control markdown-textarea" id="inputUserBio" style="resize: none;" rows="5" maxlength="250">{{.Profile.Biography}}</textarea>
                    <div class="md-area-bottom-toolbar">
                        <div style="float:left">{{T "Markdown supported" .}}</div>
                    </div>
                </div>


                <p class="mb-0 mt-2"><strong>{{T "Settings" .}}:</strong></p>
                <button class="btn btn-primary mb-3 mt-2" id="changePasswordButton">{{T "Change Password" .}}</button>
                <p class="m-0">
                    <input type="checkbox" id="inputIsEmailPublic" name="inputIsEmailPublic"
                           aria-describedby="inputIsEmailPublic"
                    {{if .Profile.IsEmailPublic}}
                           checked
                    {{end}}>
                    {{T "Show E-Mail address" .}}
                </p>
                <small id="inputIsEmailPublicHelp" class="form-text text-muted">
                    {{T "If this checkbox is checked, everyone can see your email address" .}}
                </small>

                <p class="m-0">
                    <input type="checkbox" id="inputIsShownPublic" name="inputIsShownPublic"
                           aria-describedby="inputIsShownPublic"
                    {{if .Profile.IsShownPublic}}
                           checked
                    {{end}}>
                    {{T "Public Profile" .}}
                </p>
                <small id="inputIsShownPublicHelp" class="form-text text-muted">
                    {{T "If this checkbox is checked, everyone can visit your profile page and see you in the user list" .}}
                </small>

                <div class="form-group p-3">
                    <label><strong>{{T "Project Header Display Mode" .}}:</strong></label>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input no-help" name="optionProjectHeaderMode"
                                   id="optionFull"
                                   value="full"
                            {{ if eq .Profile.ProjectHeaderMode 1 }}
                                   checked
                            {{ end }}
                            >
                            <b>{{T "Full" .}}</b> &mdash; {{T "Show full header, with large project image, project name and project description" .}}.
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input no-help" name="optionProjectHeaderMode"
                                   id="optionCompact"
                                   value="compact"
                            {{ if eq .Profile.ProjectHeaderMode 2 }}
                                   checked
                            {{ end }}
                            >
                            <b>{{T "Compact" .}}</b> &mdash; {{T "Show a compact version with small project picture and project name" .}}.
                        </label>
                    </div>
                    <div class="form-check">
                        <label class="form-check-label">
                            <input type="radio" class="form-check-input no-help" name="optionProjectHeaderMode"
                                   id="optionHidden"
                                   value="hidden"
                            {{ if eq .Profile.ProjectHeaderMode 3 }}
                                   checked
                            {{ end }}
                            >
                            <b>{{T "Hidden" .}}</b> &mdash; {{T "Hide the project header" .}}
                        </label>
                    </div>
                </div>

                <button class="btn btn-success mr-2 mt-4" id="saveButton">{{T "Save" .}}</button>
                <button class="btn badge-danger tn- mr-2 mt-4" id="cancelButton" onclick="goToProfile();">{{T "Cancel" .}}</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="errorModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"> {{T "Error when saving settings" .}} </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p id="errorModalResponseTextEditProfile"></p>
            </div>
            <div class="modal-footer">
                <button id="buttonClose" type="button" class="btn btn-primary" data-dismiss="modal">{{T "Close" .}}</button>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="changePasswordModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"> {{T "Change Password" .}} </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0"><strong>{{T "Enter a new password" .}}:</strong></p>
                <input type="password" id="inputNewPassword" class="form-control rounded"
                       placeholder="{{T "Password remains unchanged..." .}}">
                <p class="m-0 mt-2"><strong>{{T "Confirm your new password" .}}:</strong></p>
                <input type="password" id="inputNewPasswordRepeat" class="form-control rounded"
                       placeholder="{{T "Password remains unchanged..." .}}">
                <p class="mb-0 mt-4">{{T "Enter your Password to save your changes" .}}:</p>
                <input type="password" id="inputOldPassword" class="form-control rounded mb-2" oninput="clearErrors()"
                       placeholder="{{T "Password" .}}">
                <span id="newPasswordFeedback" class="form-control-feedback mt-3"></span>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" id="savePasswordButton">{{T "Save" .}}</button>
                <button class="btn btn-primary" id="buttonClose" type="button" data-dismiss="modal">{{T "Close" .}}</button>
            </div>
        </div>
    </div>
</div>

<script>var target = {{.Profile.Name}};</script>
<script src="/static/js/util/common.js"></script>
<script src="/static/js/users/settings.js"></script>
{{end}}