<%- include('includes/head.ejs') %>
    
    <style>
        .form-control{
            width: 900px;
            height: auto;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        h1{
            margin-top: 0.4em;
            margin-left: 1em;
            font-size: 76px;
        }
        .icon{
            color: #dadada;
            text-align: center;
            align-items: center;
            justify-content: center;
            padding-top: 20px;
        }
        .h3{
            text-align: center;
        }
        #form{
            text-align: center;
        }
    </style>

<section id="title">
    <div>
        <h1>Importa datos</h1>
    </div>
</section>

<section id="icon">
    <div class="icon">
        <p>
            <svg xmlns="http://www.w3.org/2000/svg" width="216" height="216" fill="currentColor" class="bi bi-cloud-arrow-up-fill" viewBox="0 0 16 16">
                <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2z"/>
            </svg> 
        </p>
    </div>
</section>

<section id="form">
    <div class="h3">
        <h3>Ingresa el archivo .csv para generar un epic.</h3>
    </div>
    <div class="container d-flex justify-content-center align-items-center" id="form">
        <form action="/epics/import" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <br><br>
            <input class="form-control form-control-lg" type="file" id="csvUploaded" name="csvUploaded" required/>
            <br>

            <% if (mensaje !='' ) { %>
                <div>
                    <%= mensaje %>
                </div><br>
            <% } %>
                
            <button class="btn btn-primary" type="submit">Importar</button>
        </form>
    </div>
</section>

<%- include('includes/foot.ejs') %>