{% extends "base.html" %}
{% block content %}

<div class="grid grid-rows-1">
    <div class="font-light text-center text-4xl mb-2">Remove Metadata</div>
    <p class="text-gray-700 text-center text-sm text-opacity-80">
        The file you see is just the tip of the iceberg. Remove the hidden metadata.
    </p>
</div>

<div class="flex justify-center mt-8">
    <div class="w-50 rounded overflow-hidden shadow-lg pb-4">
        <div class="px-6 pt-4 pb-2 grid grid-rows-1">
            <form method="post" enctype="multipart/form-data" class="grid grid-rows-1">
                <label class="text-gray-700 text-sm text-opacity-80 mb-2" for="upload_file">Choose your file to clean</label>
                <input class="border rounded" aria-label="" type="file" name="file" id="upload_file" accept="{{ mimetypes |  join(', ') }}">
                <button
                    class="w-full mt-4 bg-blue-dark hover:bg-blue-700 text-white py-2 px-4 rounded flex justify-center"
                    type="submit"
                    value="Upload"
                >
                    <svg class="w-4 h-4 mr-2 text-white self-center" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                     </svg>
                    <span>               
                        Remove Metadata
                    </span>
                </button>
            </form>
        </div>
    </div>
</div>
<button
    class="p-0 w-10 h-10 absolute bottom-8 md:bottom-16 lg:bottom-24 right-8 md:right-16 lg:right-24 bg-blue-300 hover:bg-blue-400 rounded-full active:shadow-lg mouse shadow transition ease-in duration-200 focus:outline-none">
    <a href="/info" role="link" class="w-6 h-6 text-white inline-block font-bold">
        ?
    </a>
</button>
{% endblock %}