{% extends "base.html" %}

{% block content %}

    <header class="text-white text-center">
        <h1 class="display-4"> Age - Gender Prediction </h1>
        <p class="lead mb-0"> An application that helps you predict Age & Gender of a Person. </p>
    </header>

    <div class="row py-4">
        <div class="col-lg-6 mx-auto">
            <form method="POST" action="/predict" enctype="multipart/form-data" onsubmit="loading()">
                <div class="input-group mb-3 px-2 py-2 rounded-pill bg-white shadow-sm">
                    <input id="upload" name="upload" type="file" onchange="readURL(this);" class="form-control border-0">
                    <label id="upload-label" for="upload" class="font-weight-light text-muted">Choose file</label>
                    <div class="input-group-append">
                        <label for="upload" class="btn btn-light m-0 rounded-pill px-4"> <i class="fa fa-cloud-upload mr-2 text-muted"></i><small class="text-uppercase font-weight-bold text-muted">Choose file</small></label>
                    </div>
                </div>
                <div class="mt-4">
                    <img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block">
                </div>
                <div class="custom-btn">
                    <input style="align-items: center;" class="btn btn-primary" type="submit" value='Submit &raquo;'>
                </div>
            </form>
        </div>
    </div>

{% endblock content %}