{% extends 'base.html' %}
{% block content %}
<main class="single-col">
<h1>Update Your Account Settings</h1>
<form action="" method="POST" enctype="multipart/form-data">{% csrf_token %}
    {% for field in form %}
    <fieldset {% if field.name == 'photo' %}class="file-upload-fieldset"{%endif%}>{% if field.name == 'photo' %}
        {{field.label_tag}}
        <div class="flex-wrapper">
        <div id="file-upload-wrapper" class="file-upload btn">
            <span>Upload</span>
            <input type="file" name="photo" class="upload" accept="image/*" id="id_photo">
        </div>
        <span id="filename"></span>
        </div>
        {% else %}
        {{field.label_tag}}
        {{field}}
        {%endif%}</fieldset>
    {% endfor %}
<p><input class="btn btn-inline note-save" value="Save" type="submit" /></p>
</form>
</main>
<script>
if (typeof(document.getElementById('id_photo')) != 'undefined' && document.getElementById('id_photo') != null) {
    var input = document.getElementById('id_photo');
    input.fname = document.getElementById('filename');
    input.addEventListener('change', function(e){
        e.target.fname.innerHTML = e.target.value.split("\\")[2];
    });
}
</script>
{% endblock %}