% my %d = (
%   delay_0   => l('no time limit'),
%   delay_1   => l('24 hours'),
%   delay_365 => l('1 year')
% );

<section class="messages-zone">
  <noscript class="message-card error">
      <%= l('Javascript is disabled. You won\'t be able to use Lufi.') %>
  </noscript>
  % if (defined(config('broadcast_message'))) {      
    <div class="message-card error">
      <%= config('broadcast_message') %>
    </div>
  % }
  % if (stash('invitation')) {
    <div class="message-card success">
      <%= l('The link(s) of your file(s) will automatically be sent by mail to %1 (%2)', stash('invitation')->ldap_user, stash('invitation')->ldap_user_mail) %>
    </div>
  % }
  % if (stop_upload) {
    <div class="message-card error">
      <%= l('Sorry, the uploading is currently disabled. Please try again later.') %>
    </div>
  % }
</section>

% if (!stop_upload) {
  <section class="upload-zone">
    <form class="upload-form">
      <div class="input-delete-after-days">
        <button type="button" class="icon-button info-delete-after-days modal-button" title="<%= l('Important: more information on delays') %>"></button>
        
        <select class="select-delete-after-days" id="delete-after-days" aria-label="Delay">
        % for my $delay (qw/0 1 7 30 365/) {
          % my $text = ($delay == 7 || $delay == 30) ? l('%1 days', $delay) : $d{'delay_'.$delay};
          % if (max_delay) {
            % if ($delay) {
              % if ($delay < max_delay) {
                <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
              % } elsif ($delay == max_delay) {
                <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
                
                % last;
              % } else {
                % my $text = ($delay == 1) ? l('24 hours') : l('%1 days', $delay);
                  <option value="<%= max_delay %>" <%== is_selected(max_delay) %>><%= l('%1 days', max_delay) %></option>
                % last;
              % }
            % }
          % } else {
            <option value="<%= $delay %>" <%== is_selected($delay) %>><%= $text %></option>
          % }
        % }
        </select>
      </div>

      <div class="checkbox input-delete-on-first-view">
        <input type="checkbox" id="delete-on-first-view" name="delete-on-first-view" autocomplete="off" <%= 'checked="true"' if config('force_burn_after_reading') %> <%= 'disabled="disabled"' if config('force_burn_after_reading') %>>
        <label for="delete-on-first-view"><%= l('Delete at first download?') %></label>
      </div>

    % if (config('allow_pwd_on_files') && (!stash('invitation'))) {
      <div class="input-text input-password">
        <label for="password"><%= l('Add a password to file(s)') %></label>
        <input type="password" id="password" placeholder="<%= l('Password') %>" autocomplete="off">
      </div>
    % }

      <div class="checkbox input-zip-files">
        <input
          type="checkbox"
          id="must-zip"
        >
        <label for="must-zip"><%= l('Create a zip archive with the files before uploading?') %></label>
      </div>

      <div class="hidden input-text input-zip-name">
        <label for="zip-name"><%= l('Name of the zip file') %></label>
        <input type="text" id="zip-name" name="zip-name" placeholder="documents.zip" value="documents.zip" autocomplete="off">
      </div>

      <div class="drop-zone">
        <h1><%= l('Drop files here') %></h1>
        <p class="max-file-size"></p>
        <p><%= l('or') %></p>
        <label class="button" for="upload-button">
        <%= l('Click to open the file browser') %>
        </label>
        <input type="file" id="upload-button" multiple autofocus>
      </div>


      <div class="hidden zip-zone card" aria-hidden="true">
        <button type="button" class="icon-button icon close action-close" title="<%= l('Close') %>"></button>
        
        <div class="file-description">
          <p class="file-name">documents.zip</p>
          <p class="file-size">0</p>
        </div>

        <ul class="files-list"></ul>

        <button type="button" class="button action-upload-zip"><%= l("Upload generated zip file") %></button>
        <div class="zip-compressing hidden" aria-hidden="true">
          <div class="icon-container pulse">
            <span class="icon archive"></span>
          </div>
          <p><%= l('Compressing zip file…') %></p>
        </div>
      </div>
    </form>
  </section>

  <section class="hidden uploaded-zone" aria-hidden="true">
    <h1><%= l('Uploaded files') %></h1>
    <header class="hidden buttons" aria-hidden="true">
      <div class="actions-buttons upload-success">
        <button type="button" class="button action-copy-links"><%= l('Copy all links to clipboard') %></button>
        <a class="button action-mail-links" href="<%= url_for('/')->to_abs() %>m"><%= l('Send all links by email') %></a>
      </div>
    </header>

    <div class="file-cards"></div>
  </section>
  
  <template id="file-card-error">
    <article class="card file-card error">
      <button type="button" class="icon-button icon close action-close"></button>
      <div class="file-description">
        <p class="file-name"></p>
        <p class="file-size"></p>
      </div>

      <div class="message-card error upload-error"></div>
    </article>
  </template>
  
  <template id="file-card-guest">
    <article class="card file-card guest">
      <button type="button" class="icon-button icon close action-close"></button>
      <div class="file-description">
        <p class="file-name"></p>
        <p class="file-size"></p>
      </div>
      
      <p class="file-expiration"></p>
    </article>
  </template>

  <template id="file-card-ongoing">
    <article class="card file-card ongoing">
      <button type="button" class="icon-button icon close action-close"></button>
      <div class="file-description">
        <p class="file-name"></p>
        <p class="file-size"></p>
      </div>

      <p class="progress-percent">0</p>
      
      <div class="progress-container">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
      </div>
    </article>
  </template>

  <template id="file-card-success">
    <article class="card file-card success">
      <button type="button" class="icon-button icon close action-close"></button>
      <div class="file-description">
        <p class="file-name"></p>
        <p class="file-size"></p>
        <a class="icon-button icon mail action-mail" href="#"></a>
      </div>
      
      <p class="file-expiration"></p>
      
      <div class="links-zone">
        <div class="download-link">
          <a class="icon-button icon download download-button" title="<%= l('Download link') %>" href="#"></a>
          <button type="button" title="<%= l('Copy to clipboard') %>" class="icon-button icon copy copy-button"></button>
          <div class="input-text">
            <label>
              <%= l('Download link') %>
              <input class="download-input" type="text">
            </label>
          </div>
        </div>
        <div class="delete-link">
          <a class="icon-button icon delete delete-button" title="<%= l('Deletion link') %>" href="#"></a>
          <div class="input-text">
            <label>
              <%= l('Deletion link') %>
              <input class="delete-input" type="text">
            </label>
          </div>
        </div>
      </div>
    </article>
  </template>

  <dialog class="modal modal-delete-after-days">
    % use Number::Bytes::Human qw(format_bytes);
    <section>
      <header>
        <h1><%= l('Information about delays') %></h1>
      </header>

      <div class="content">
        <p>
          <%= l('If you choose a delay, the file will be deleted after that delay.') %><br>
          <%= l('Don\'t worry: if a user begins to download the file before the expiration and the download ends after the expiration, he will be able to get the file.') %>
        </p>
        % if (defined(config('delay_for_size'))) {
          <p>
            <%= l('This server sets limitations according to the file size. The expiration delay of your file will be the minimum between what you choose and the following limitations:') %>
          </p>
          <ul>
          % my $delays   = config('delay_for_size');
          % $delays->{0} = max_delay;
          % my @keys     = sort {$a <=> $b} keys %{$delays};
          % my $i        = 0;
          % for my $key (@keys) {
            % my $delay = $delays->{$keys[$i]};
            % if ($i + 1 < scalar(@keys)) {
              % if ($delay) {
                <li><%= l('between %1 and %2, the file will be kept %3 day(s).', format_bytes($keys[$i]), format_bytes($keys[$i + 1]), $delay) %></li>
              % } else {
                <li><%= l('between %1 and %2, the file will be kept forever.', format_bytes($keys[$i]), format_bytes($keys[$i + 1]), $delay) %></li>
              % }
            % } else {
              % if ($delay) {
                <li><%= l('for %1 and more, the file will be kept %2 day(s)', format_bytes($keys[$i]), $delay) %></li>
              % } else {
                <li><%= l('for %1 and more, the file will be kept forever.', format_bytes($keys[$i]), $delay) %></li>
              % }
            % }
            % $i++;
          % }
          </ul>
        % }
      </div>
      
      <footer class="actions">
        <button autofocus class="button close-modal"><%= l('Close') %></button>
      </footer>
    </section>
  </dialog>
% }

<script type="text/javascript">
const ws_url  = '<%= url_for('upload')->to_abs() %>';
% if (defined($self->config('fixed_domain')) && $self->config('fixed_domain')) {
const baseURL = '<%= url_for('/')->host($self->config('fixed_domain'))->to_abs() %>';
% } else {
const baseURL = '<%= url_for('/')->to_abs() %>';
% }
const actionURL = '<%= url_for('/')->to_abs() %>';
const i18n    = {
    enqueued:     '<%= l('XXX file has been added to upload queue.') %>',
    confirmExit:  '<%= l('You have attempted to leave this page. The upload will be canceled. Are you sure?') %>',
    copyAll:      '<%= l('Copy all links to clipboard') %>',
    copySuccess:  '<%= l('The link(s) has been copied to your clipboard') %>',
    copyFail:     '<%= l('Unable to copy the link(s) to your clipboard') %>',
    cpText:       '<%= l('Copy to clipboard') %>',
    delText:      '<%= l('Deletion link') %>',
    dlText:       '<%= l('Download link') %>',
    download:     '<%= l('Download') %>',
    encrypting:   '<%= l('Encrypting part XX1 of XX2') %>',
    expiration:   '<%= l('Expiration:') %>',
    fileUploaded: '<%= l('File uploaded') %>',
    hit:          '<%= l('Hit Enter, then Ctrl+C to copy the download link') %>',
    hits:         '<%= l('Hit Enter, then Ctrl+C to copy all the download links') %>',
    mailTo:       '<%= l('Send all links by email') %>',
    maxSize:      '<%= l('(max size: XXX)') %>',
    noLimit:      '<%= l('No expiration delay') %>',
    sending:      '<%= l('Sending part XX1 of XX2. Please, be patient, the progress bar can take a while to move.') %>',
    wsProblem:    '<%= l('Websocket communication error') %>',
};
const maxSize = <%= config('max_file_size') || 0 %>;

% if (defined stash('invitation')) {
const isGuest          = true;
const sendFilesURLsURL = '<%= url_for('guest_send_mail', token => stash('invitation')->token)->to_abs() %>';
% } else {
const isGuest = false;
% }

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector(".drop-zone").onkeydown = (event) => {
    if(event.key === " ") {
      document.getElementById("file-browser").click();
    }
  };

  document.querySelector(".info-delete-after-days").onclick = () => {
    document.querySelector(".modal-delete-after-days").showModal();
  }

  document.querySelector(".close-modal").onclick = () => {
    document.querySelector(".modal").close();
  }
});
</script>
%= javascript '/js/lufi-upload.js', type => 'module', defer => "true"