{% extends 'base.html' %}

{% block content %}
<style>
textarea.form-control {
  height: 500%;
}
</style>

<div class="container" style="padding-top: 60px;">
    <h1 class="page-header">Edit Profile</h1>
    <div class="row">
        <form class="form-horizontal" method="post" enctype="multipart/form-data">
            {% csrf_token %}
        <!-- left column -->
            <div class="col-md-2 hidden-xs">
                <img id="image" class="img-responsive img-thumbnail" />
                <input name="image" id="files" type="file" class="text-center well-xs">
            </div>

        <!-- edit form column -->
            <div class="col-md-8 col-sm-6 col-xs-12 personal-info">
                <div class="form-group">
                    <label class="col-md-3 control-label"></label>
                    <div class="col-md-8">
                        <button class="btn btn-primary" type="submit">submit</button>
                        <span></span>
                        <a class="btn btn-default" href="{% url 'soldier-list' %}">&nbsp;&nbsp;cancel&nbsp;&nbsp;</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>


<script>
	document.getElementById("files").onchange = function () {
    var reader = new FileReader();
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("image").src = e.target.result;
    };
    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};
</script>
{% endblock %}