{% extends "layouts/base-fullscreen.html" %}

{% load static %}

{% block title %} Upload {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block body_class %}{% endblock %}

{% block content %}

    {% include 'includes/navigation-transparent.html' %}

    <style type="text/css">
        .body-p{
            background-image: url('{% static "/img/bg/login-bg.jpg" %}');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: center; 
            background-size: cover;
        }

        .div-p{
            max-width:700px;
            background: rgb(0,0,0);
            background: -moz-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
            background: -webkit-linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
            background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6404762588629201) 35%, rgba(255,255,255,0) 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#ffffff",GradientType=1); 
        }
    </style>
    
    <div class="d-flex flex-column body-p vh-100" loading="lazy">
        <div class="d-flex flex-grow-1 div-p">
            <form class="p-3 bg-body m-auto border border-2 border-info-subtle rounded bg-opacity-75" style="width: 24rem;" role="form" method="post" action="" enctype="multipart/form-data">
                    {% if error_message %}
                        <div class="alert alert-danger" role="alert">
                            {{ error_message }}
                        </div>
                    {% endif %}
                    {% csrf_token %}
                    {{ form.as_p }}
                    <button 
                        type="submit"
                        class="btn btn-primary bg-gradient-primary w-100 my-4 mb-2 text-light">
                        Upload
                    </button>
            </form>
            
        </div>
        {% comment %} {% include 'includes/footer.html' %} {% endcomment %} 
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}