{% extends "template.html" %}
{% block content %}
<div class="container" style="background-color: white;">
    <div class="col s12 m8">
        <div class="card-panel grey lighten-5 z-depth-1">
            <div class="row">

                <div class="row">
                    <div class="col s4">
                        {% if current_user.l_avatar == 'default' %}
                        <img src="{{ avatars.default() }}" alt="" class="circle">
                        {% else %}
                        <img src="{{url_for("static", filename=current_user.l_avatar)}}" class="circle responsive-img">
                        {% endif %}
                    </div>
                    <div class="col s4 center">
                    <h1>Profile</h1>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s12 valign-center">
                        <input value="{{current_user.username}}" placeholder="Placeholder" id="username" type="text" class="validate" disabled>
                        <label for="username">Username</label>
                    </div>
                    <div class="input-field col s12">
                        <input value="{{current_user.email}}" placeholder="" id="email" type="text" class="validate" disabled>
                        <label for="email">Email</label>
                    </div>
                    <div class="input-field col s12">
                        <input value="{{current_user.friendcode}}" placeholder="" id="friendcode" type="text" class="validate " disabled>
                        <label for="friendcode">Friend Code</label>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s6">
                        <input value="{{current_user.firstname}}" placeholder="" id="firstname" type="text" class="validate ">
                        <label for="firstname">First Name</label>
                    </div>
                    <div class="input-field col s6">
                        <input value="{{current_user.lastname}}" placeholder="" id="lastname" type="text" class="validate ">
                        <label for="lastname">Last Name</label>
                    </div>
                </div>

                <form method="post" action="/profile/upload" id="upload_avatar" enctype="multipart/form-data">
                    <div class="row col s12">
                        <div class="col s9">
                            <div class="file-field input-field">
                                <div class="btn green" type="file">
                                <span>File</span>
                                <input name="file" type="file">
                                </div>
                                <div class="file-path-wrapper">
                                <input class="file-path validate" type="text" placeholder="Change/Upload Avatar...">
                                </div>
                            </div>
                        </div>
                        <div class="col s3">
                            <div class="input-field">
                                <button class="btn waves-effect waves-light green" type="submit" name=action form="upload_avatar">Submit
                                <i class="material-icons right">send</i>
                                </button>
                            </div>
                        </div>
                    </div>
                </form>  

            </form>
        </div>
    </div>
</div>

{% endblock %}