<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="static/css/style.css">
        <link rel="icon" type="image/png" sizes="32x32" href="static/images/bottle.jpg">
        <title>{{ _('Sea Bottle Jackal') }}</title>
    </head>
    <body>
        <script src="static/js/scripts.js"></script>
        <h1>{{ _('Jackal Incorporated') }}</h1>
        <form method="POST" enctype="multipart/form-data">
            <div id="uploadButton">
                <p><label id="imageUploadLabel" for="imageUpload">{{ _('Choose picture') }}</label>
                <input id="imageUpload" name="file" type="file" accept="image/*"></p>
                <button id="submitPicture" type="submit">{{ _('Jackalify picture!') }}</button>
            </div>
        </form>
        {% if picture %}
            <div>
                <progress id="progressBar" max="100" value="0"></progress> <br>
                <img id="picture" src="static/working/{{picture}}" onload="checkProgress();checkGif()">
            </div>
        {% endif %}
        {% if video %}
            <div id="gif">
                <p>
                    <a class="downloadLink" download href="static/working/{{video}}">{{ _('Download GIF') }}</a>
                    <a class="downloadLink" download href="static/working/{{photo}}">{{ _('Download jackalified photo') }}</a>
                </p>
            </div>
        {% endif %}
    </body>
</html>
