{% extends "base.html" %}

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

{% block titre %} Upload {% endblock %}

{% block contenu %}
<div id="zone-de-contenu">
    <form method="POST" action="" enctype=multipart/form-data>
        <div style="width:100%;margin:20px;"> </div>
      <fieldset class="fieldset">
          {% for message in get_flashed_messages() %}
              <div class="alert" id="alert{{loop.index}}">
                {{ message }}
            </div>
          {% endfor %}

          {% if user == none %}
            <h3> Identification </h3>
              <table width=100% class="tablelogin">
                  <tr><td>Username: </td><td> <input type="text" name="username" placeholder="Your username" /></td></tr>
                  <tr><td>Password: </td><td> <input type="password" name="password"  placeholder="**********"/></td></tr>
               </table>
         {% endif %}

         <h3>Files to transfer</h3>
              <table width=100% class="tablelogin" id="filelist">
                  <tr id="line1">
                      <td><input type="file" name="file[]"></td>
                      <td> <input type="text" name="filename[]" placeholder="Change file name" /></td>
                      <td> <input type="text" name="desc[]" placeholder="Description" /></td>
                      <td><a href="javascript:dellinef('line1')"><img src="static/croix.png" alt="Del" /></a></td>
                  </tr>
              </table>
                  <a href="javascript:addlinef()"><img src="static/plus.png" alt="Add" width=20px/>Add a file</a>

          <br/>
          <br />
          <table>
              <tr>
                  <td>Publicly visible: </td><td><input type="checkbox" name="visible" id="visible" value="1"></td>
              </tr><tr>
                  <td>Set a password: </td><td><input type="password" name="filepwd" id="filepwd" value=""></td>
              </tr>
          </table>
          <input type="hidden" name="graphical" id="graphical" value="1">
          <center>
              <input id="submit" type="submit" value="&nbsp;Téléverser&nbsp;">
          </center>
      </fieldset>
    </form>
</div>

    <script>
        var maxline = 1;
        function dellinef(elementId) {
            // Removes an element from the document
            var element = document.getElementById(elementId);
            element.parentNode.removeChild(element);
        }
        function addElement(parentId, elementTag, elementId, html) {
            // Adds an element to the document
            var p = document.getElementById(parentId);
            var newElement = document.createElement(elementTag);
            newElement.setAttribute('id', elementId);
            newElement.innerHTML = html;
            p.appendChild(newElement);
        }
        function addlinef() {
            maxline++; 
            var html = `<td><input type="file" name="file[]"></td>
                       <td> <input type="text" name="filename[]" placeholder="Change file name" /></td>
                      <td> <input type="text" name="desc[]" placeholder="Description" /></td>
                       <td><a href="javascript:dellinef('line${maxline}')"><img src="static/croix.png" alt="Del" /></a></td>`
            addElement('filelist', 'tr', 'line' + maxline, html);
        }
    </script>

{% endblock %}