<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- This file is part of "el Botadero"
     Copyright Rodrigo Garcia 2018 <strysg@riseup.net>
     AGPL liberated
-->
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="shortcut icon" href="{{ url_for('static', filename='botadero_resources/favicon.png') }}">
    <title>{{ dv['title'] }}</title>
    {% set archivo_esquema_colores = "css/" + dv['esquemaColores'] + "/base.css" %}
    <link rel="stylesheet" href="{{ url_for('static', filename=archivo_esquema_colores) }}" type="text/css" />
  </head>
  
  <body>
    <h1>{{ dv['title']}}</h1>
    <div class="qu">
      Un sitio para <b>compartir</b> archivos.
    </div>

    <!-- Modal form con previsualización y opciones -->
    <div id="modal-subir" class="modal_subir">
      <div class="modal-subir-content">
        <div class="modal-subir-header">
          <span id="closeModalSubir" class="closeModalSubir">&times;</span>
          <h2>Compartir contenido</h2>
        </div>
        <div class="modal-subir-body">
          <div id="lista_archivos_subir">
          </div>
          <!-- Barra de progreso -->
	  <fieldset id="progress" style="display: none">
	    <legend id="estado-recepcion">Recibiendo:</legend>
	    <div class="progress-trough">
	      <div id="progress-bar" class="progress-bar">0%</div>
	    </div>
	  </fieldset>
          <!-- check password y menu passwords-->
          <p>
            <img src="{{ url_for('static', filename='botadero_resources/lock32.png')}}" height="16"> <span>Proteger con contraseña</span>
            <input type="checkbox" id="pwd_check" onclick="menuPassword()">
            <details>
              <summary>Archivos protegidos</summary>
              <p>
                Un archivo protegido con contraseña requiere que se introduzca la misma contraseña para descargarlo. <a href="/info#protegidos" target="_blank">El archivo <strong>no se cifra</strong>.</a>
              </p>
            </details>
          </p>
          <div id="menu_password" style="display: none">
            <p id="pwd_msj"></p>
            <label for="pwd">Contraseña:</label>
            <input type="password" id="pwd1" name="pwd1" minlength=1>
            <br>
            <label for="pwd">Confirmar:</label>
            <input type="password" id="pwd2" name="pwd2" minlength=1>
          </div>
          <!-- Boton subir -->
          <div>
            <input type="button" class="btn large" value="Compartir archivo(s)" onclick="doUploadModal('')">
          </div>
        </div>
      </div>
    </div>

    <!-- Modal para introducir password -->
    <div id="modal-pass" class="modal_subir" style="display: none">
      <div class="modal-subir-content">
        <div class="modal-subir-header">
          <span id="closeModalPassword" class="closeModalSubir">&times;</span>
          <h2>Descargar: <span id="nombre_archivo_protegido_label"> </span></h2>
          <img src="{{ url_for('static', filename='botadero_resources/archivo-protegido.png')}}" height="32" title="click para descargar">
        </div>
        <div class="modal-subir-body">
          <form method="POST" id="download_protected" action="/{{ dv['categoriaActual'] }}/download_protected">
            <label for="pwd">Contraseña:</label>
            <input type="text" id="nombre_archivo_protegido" name="nombre_archivo_protegido" hidden>
            <br>
            <input type="password" id="pwd_archivo" name="pwd_archivo" minlength=1>
            <!-- descargar -->
            <label id="pwd_msj_download"></label>
            <div>
              <!-- <input type="submit" class="btn large" value="descargar"/> -->
              <input type="submit" class="btn large" value="descargar" />
            </div>
          </form>
        </div>
      </div>
    </div>
    
    <div id="wrap">
      <div class="row">
	<div class="col fifth">
	  <!-- no borrar -->
	</div>
	<div class="col fill">
	  <!-- Subida de archivos -->
	  <form method="POST" id="upload_file" action="/{{ dv['categoriaActual'] }}/upload_file" enctype="multipart/form-data">

	    <!-- caja drag and drop -->
	    <div id="dropbox">
	      Arrastra archivos aquí
	    </div>

	    <!-- input multiple files -->
	    <input id="file-picker" type="file" name="file" multiple onchange="actualizarArchivosSubir(this.files)">
	    
	    <!-- <input type="file" name="file"/> -->
	    <input type="submit" class="btn large" id="upload-button" value="Compartir archivo(s)"/>
	  </form>	
          
	  <!-- Listado de Archivos -->	
	  <div id="caja_archivos" class="caja_lista_archivos">

	    {% for archivoObj in dv['archivos'] %}
	      <p class="lista_archivos_elemento">
		{# archivos normales #}
                {% if archivoObj['protegido'] == True %}
                  <a id="archivo_{{ archivoObj['name'] }}"
                     title="descargas: {{ archivoObj['descargas'] }}"
                     onclick="descargarProtegido('{{ archivoObj['name'] }}')"
                     href="/almacen/{{ dv['categoriaActual'] }}/{{ archivoObj['name'] }}/descargar_protegido" title="descargas: {{ archivoObj['descargas'] }}/form_archivo_protegido"
                     name="enlace_archivo_protegido"
                  >
		    <img src="{{ url_for('static', filename='botadero_resources/archivo-protegido.png')}}" height="16" title="click para descargar">
                    {{ archivoObj['name'] }}
		  </a>
                {% else %}
                  <a id="archivo_{{ archivoObj['name'] }}"
		     href="/almacen/{{ dv['categoriaActual'] }}/{{ archivoObj['name'] }}" title="descargas: {{ archivoObj['descargas'] }}"
                  >
                    <img src="{{ url_for('static', filename='botadero_resources/archivo.png')}}" height="16" title="click para descargar">
                    {# TODO implementar formulario #}
                    {{ archivoObj['name'] }}
		  </a>
                {% endif %}
	        {% if archivoObj['size'] < 1000 %}
		<span class="label" title="tamaño">{{ archivoObj['size'] }} B</span>
	      {% elif archivoObj['size'] >= 1000 and archivoObj['size'] < 1000000 %}
		<span class="label" title="tamaño">{{ '%0.2f'|format(archivoObj['size']/1000) }} KB</span>
	      {% elif archivoObj['size'] >= 1000000 and archivoObj['size'] < 1000000000 %}
		<span class="label" title="tamaño">{{ '%0.2f'|format(archivoObj['size']/1000000) }} MB</span>
	      {% elif archivoObj['size'] >= 1000000000 %}
		<span class="label" title="tamaño">{{ '%0.2f'|format(archivoObj['size']/1000000000) }} GB</span>
	      {% endif %}
	      
	      <img src={{ url_for('static', filename='botadero_resources/clock-delete-32.png') }} height="16" title="Se borrará en {{ archivoObj['restante']}} {{ dv['timeUnit'] }}">
		{% if archivoObj['restante'] >= 10 %}
		  <span class="label success" title="Se borrará en {{ archivoObj['restante']}} {{ dv['timeUnit'] }}">{{ archivoObj['restante'] }}</span>
		{% elif archivoObj['restante'] < 10 and  archivoObj['restante'] > 3 %}
		  <span class="label warning" title="Se borrará en {{ archivoObj['restante']}} {{ dv['timeUnit'] }}">{{ archivoObj['restante'] }} </span>
		{% elif archivoObj['restante'] <= 3 %}
		  <span class="label important" title="Se borrará en {{ archivoObj['restante']}} {{ dv['timeUnit'] }}">{{ archivoObj['restante'] }} </span>
		{% endif %}
                <!-- boton copiar enlace -->
                {% if archivoObj['protegido'] == True %}
                  <button class="label info">
                    <img src="{{ url_for('static', filename='botadero_resources/copiar-portapapeles.png')}}" height="16" title="copiar enlace de descarga"
                         name="{{ archivoObj['name'] }}/descargar_protegido"
                         onclick="copiarEnlace(this.name)">
                  </button>
                {% else %}
                  <button class="label info">
                    <img src="{{ url_for('static', filename='botadero_resources/copiar-portapapeles.png')}}" height="16" title="copiar enlace de descarga"
                         name="{{ archivoObj['name'] }}"
                         onclick="copiarEnlace(this.name)">
                  </button>
                {% endif %}
	      </p>
	    {% endfor %}
	  </div>
	  <!-- div fill -->
	</div>
	<div class="col fifth">
	  <!-- Categorias -->
	  <span id="categoria_actual" value="{{ dv['categoriaActual'] }}" hidden>{{ dv['categoriaActual'] }}</span>

	  <div id="categorias">
	    {% for catName, catDetails in dv['catStats'].items() %}
	      {% if catName == 'Misc.' %}
		<span {% if catName == dv['categoriaActual'] %}class="categoria"{% endif %}><a href="/">#{{ catName }}</a>({{ catDetails['filesNumber']}})</span>
		<br><br>
	      {% else %}
		<span {% if catName == dv['categoriaActual'] %}class="categoria"{% endif %}><a href="/{{ catName }}/">#{{ catName }}</a>({{ catDetails['filesNumber']}}) </span>
		<br><br>
	      {% endif %}
	    {% endfor %}
	  </div>

	  <!-- Estadísticas generales -->
	  <div>
	    <p>
	      Total de <big><big> {{ dv['filesNumber'] }}</big></big> <a href="#dropbox">archivos</a>.
	    </p>
	    <p>
	      {{ dv['storageRemaining']//(1024*1024) }} MB disponibles  
	      (<b>{{ (dv['storageRemaining'] * 100)//dv['storageTotal'] }} %</b>)
	    </p>
	  </div>

	  <div class="nota">
	    <p> Los archivos se eliminan después de {{ dv['timeLapseMax'] }} a {{ dv['timeLapseMin'] }} días, dependiendo de su tamaño (máximo <i>{{ dv['maxFilesize']//1000000 }}</i> MB).
	      <span id="max_filesize" hidden>{{ dv['maxFilesize'] }}</span> 
	      <a href="/info" >ver información</a>
	    </p>
	  </div>
	</div>
	<!-- div row -->
      </div>
      <!-- Notas al pie -->
      <div class="qu">
	" La sabiduría crece cuando se comparten los conocimientos "
	<p> <a href="https://notabug.org/strysg/botadero">Código fuente</a> de esta aplicación.</p>
      </div>
    </div>    
    <!-- javascript -->
    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery-2.1.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ url_for('static', filename='js/upload.js') }}"></script>
	
  </body>

</html>
