{% extends 'base.html.twig' %}

{% block body %}
<div class="container" style="padding-top: 60px;">
    <h1 class="page-header">Edit Profile</h1>
    <div class="row">
        <!-- left column -->
        <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="text-center">
                <img src="{{ imageurl }}" class="avatar img-circle img-thumbnail" alt="avatar">
                <h6>Upload a different photo...</h6>
                <label class="col-lg-3 control-label">URL</label>
                <div class="col-lg-8">
                    <input id="url" class="form-control" value="{{ imageurl }}" type="text">
                </div>
            </div>
        </div>
        <!-- edit form column -->
        <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
            <div class="alert alert-info alert-dismissable">
                <a class="panel-close close" data-dismiss="alert">×</a>
                <i class="fa fa-coffee"></i>
                This is an <strong>.alert</strong>. Use this to show important messages to the user.
            </div>
            <h3>Personal info</h3>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-lg-3 control-label">First name:</label>
                    <div class="col-lg-8">
                        <input id="fnm" class="form-control" value="{{ firstname }}" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-lg-3 control-label">Last name:</label>
                    <div class="col-lg-8">
                        <input id="lnm" class="form-control" value="{{ lastname }}" type="text">
                    </div>
                </div>
                {#<div class="form-group">#}
                    {#<label class="col-lg-3 control-label">Company:</label>#}
                    {#<div class="col-lg-8">#}
                        {#<input class="form-control" value="" type="text">#}
                    {#</div>#}
                {#</div>#}
                <div class="form-group">
                    <label class="col-lg-3 control-label">Email:</label>
                    <div class="col-lg-8">
                        <input id="email" class="form-control" value="{{ email }}" type="text">
                    </div>
                </div>
                {#<div class="form-group">#}
                    {#<label class="col-lg-3 control-label">Time Zone:</label>#}
                    {#<div class="col-lg-8">#}
                        {#<div class="ui-select">#}
                            {#<select id="user_time_zone" class="form-control">#}
                                {#<option value="Hawaii">(GMT-10:00) Hawaii</option>#}
                                {#<option value="Alaska">(GMT-09:00) Alaska</option>#}
                                {#<option value="Pacific Time (US & Canada)">(GMT-08:00) Pacific Time (US & Canada)</option>#}
                                {#<option value="Arizona">(GMT-07:00) Arizona</option>#}
                                {#<option value="Mountain Time (US & Canada)">(GMT-07:00) Mountain Time (US & Canada)</option>#}
                                {#<option value="Central Time (US & Canada)" selected="selected">(GMT-06:00) Central Time (US & Canada)</option>#}
                                {#<option value="Eastern Time (US & Canada)">(GMT-05:00) Eastern Time (US & Canada)</option>#}
                                {#<option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>#}
                            {#</select>#}
                        {#</div>#}
                    {#</div>#}
                {#</div>#}
                {#<div class="form-group">#}
                    {#<label class="col-md-3 control-label">Username:</label>#}
                    {#<div class="col-md-8">#}
                        {#<input class="form-control" value="janeuser" type="text">#}
                    {#</div>#}
                {#</div>#}
                <div class="form-group">
                    <label class="col-md-3 control-label">Password:</label>
                    <div class="col-md-8">
                        <input id="pass" class="form-control" value="{{ password }}" type="password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label">Confirm password:</label>
                    <div class="col-md-8">
                        <input id="cpass" class="form-control" value="{{ password }}" type="password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-8">
                        <input class="btn btn-primary" value="Save Changes" type="button">
                        <span></span>
                        <input class="btn btn-default" value="Cancel" type="reset" onclick="cancel()">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        function validateForm()
        {
            var a=document.forms["form"]["user_name"].value.trim();
            var b=document.forms["form"]["email"].value.trim();
            var c=document.forms["form"]["password"].value.trim();

            if(a.length == 0 || b.length == 0 || c.length == 0){
                alert("There are empty fields!")
                return false;
            }
            else
                return true;

        }
        function cancel() {

            //document.getElementById("url").setAttribute("value" ,{{ imageurl|json_encode|raw }} );
            document.forms["form"]["fnm"].value = {{ firstname|json_encode|raw }};
            document.forms["form"]["lnm"].value = {{ lastname|json_encode|raw }};
            document.forms["form"]["email"].value = {{ email|json_encode|raw }};
            document.forms["form"]["pass"].value = {{ password|json_encode|raw }};
            document.forms["form"]["cpass"].value = {{ password|json_encode|raw }};
            document.forms["form"]["url"].value = {{ imageurl|json_encode|raw }};

        }
    </script>
{% endblock %}