{% extends "index.html" %}
{% block body %}

    <div id="profileform" class="content-section">
        <legend class="border-bottom mb-4">{{ current_user.role }}</legend>
        <div class="media">
            <img class="rounded-circle account-img" src="{{ profile_image }}">

        </div>
        <div class="media">
            
            <div class="media-body">
                <h6 class="account-heading">{{ current_user.name }} {{ current_user.surname }}</h6>
                <a class="text-secondary">Employee Number: {{ current_user.employee_number }}</a>
                <p class="text-secondary">Email: {{ current_user.email }}</p>
            </div>

        </div>
        
                <form method="POST" action="" enctype="multipart/form-data">
                    {{ form.hidden_tag() }}
                    <fieldset class="form-group">
                        <legend class="border-bottom mb-4">Update Info</legend>
                            <div  id="profileformupdate" class="form-content">
                                <div class="form-group">
                                    {% if form.name.errors %}
                                        {{ form.name(class="form-control is-invalid") }}
                                        <div class="invalid-feedback">
                                            {% for error in form.name.errors %}
                                                <span>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    {% else %}
                                        {{ form.name(class="form-control",placeholder="Name") }}    
                                    {% endif %}     
                                </div>
                                    <div class="form-group">
                                        {% if form.email.errors %}
                                            {{ form.email(class="form-control is-invalid") }}
                                                <div class="invalid-feedback">
                                                    {% for error in form.email.errors %}
                                                        <span>{{ error }}</span>
                                                    {% endfor %}
                                                </div>
                                        {% else %}
                                            {{ form.email(class="form-control",placeholder="Email") }}
                                        {% endif %}
                                    </div>
                                    <div class="form-group">
                                       
                                        {{ form.password(class="form-control",placeholder="Password") }}
                                        
                                    </div>
                                    <div class="form-group">
                                        
                                        {{ form.confirm_password(class="form-control",placeholder="Confirm Password") }}
                                        
                                    </div>
                                    <div class="form-group">
                                        {{ form.picture.label() }}
                                        {{ form.picture(class="form-control-file") }}
                                            
                                            {% if form.picture.errors %}
                                                {% for error in form.picture.errors %}
                                                    <span class="text-danger">{{ error }}</span></br>
                                                {% endfor %}
                                            {% endif %}
                                    </div>
                                    <div class="form-group">
                                            {{ form.submit(class="btn btn-outline-info") }}
                                    </div>
                                </div>
                                
                               
                            </div>
                    </fieldset>
                </form>
            
    </div>


{% endblock %}