% 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"></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">
        <button type="button" class="icon-button action-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">
          <div class="icon-container pulse">
            <span class="icon archive"></span>
          </div>
          <p><%= l('Compressing zip file…') %></p>
        </div>
      </div>
    </form>

    <script type="text/javascript">
      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>
  </section>

  <section class="hidden uploaded-zone">
    <h1><%= l('Uploaded files') %></h1>
    <header class="hidden buttons">
      <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>

    <article class="template 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>

    <article class="template 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>

    <article class="template card file-card error">
      <button type="button" class="icon-button 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>

    <article class="template card file-card ongoing">
      <span class="action-close"></span>
      <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>
  </section>

  <dialog class="modal modal-delete-after-days">
    % use Number::Bytes::Human qw(format_bytes);
    <div class="content">
      <h1><%= l('Information about delays') %></h1>
      <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>
    <div class="actions">
      <button autofocus class="button close-modal"><%= l('Close') %></button>
    </div>
  </dialog>
% }

% if (defined stash('invitation')) {
%= javascript '/partial/index.js?token=' . stash('invitation')->token
% } else {
%= javascript '/partial/index.js'
% }
%= javascript '/js/lufi-upload.js', type => 'module'