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

% if (!stop_upload) {
  <div id="upload-box" class="box columns is-desktop">
    <div class="left-zone column">
      <div class="fixed-grid has-1-cols">
        <div class="grid">
          <div id="file-js-upload" class="cell fixed-grid has-1-cols">
            <div class="grid file is-boxed is-fullwidth">
              <div id="provided-files" class="cell is-fullwidth is-rounded p-0 is-hidden"></div>

              <div class="cell total-size p-2 is-hidden">
                <span><%= l('Total size:')%></span>
                <span class="size"></span>
              </div>

              <label class="file-label is-clickable">
                <input class="file-input" type="file" name="upload" multiple>
                
                <div class="file-cta px-0 is-size-1 full-version">
                  <span class="file-icon mr-0">
                    <span class="icon fas fa-circle-plus"></span>
                  </span>
                  <div class="file-label has-text-centered is-gap-3">
                    <span class="is-size-3 is-size-5-mobile"><%= l('Drop files here') %></span>
                    <span class="is-size-5 is-hidden-mobile"><%= l('or') %></span> 
                    <button type="button" id="upload-zone-button" class="button m-auto is-primary is-hidden-mobile" tabindex=-1><%= l('Click to open the file browser') %></button>
                  </div>
                </div>

                <div class="file-cta px-0 is-small small-version has-text-primary is-hidden">
                  <span class="file-icon mr-0">
                    <span class="icon fas fa-circle-plus"></span>
                  </span>
                  <div class="file-label has-text-centered">
                    <span><%= l('Add files') %></span>
                  </div>
                </div>
              </label>
            </div>
          </div>

          <div id="upload-controls" class="cell is-hidden">
            <div class="field">
              <div class="field is-horizontal is-align-items-center">
                <div class="field-label">
                  <label class="label<%= ' disabled' if(max_delay) %>" for="expiration-delay">
                    <%= l('Expires after') %>
                  </label>
                </div>

                <div class="field-body is-align-items-center">
                    <div class="field">
                      <div class="control">
                        <div class="select">
                          <select id="expiration-delay" <%= 'disabled' if(max_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>
                    </div>

                  <div class="field is-narrow">or</div>

                  <fieldset <%= 'disabled' if config('force_burn_after_reading') %>>
                    <div class="field">
                      <div class="control"> 
                        <label for="delete-at-first-download" class="label is-flex is-gap-1 checkbox">
                          <%= l('After first download?') %>
                          <input
                            type="checkbox"
                            id="delete-at-first-download"
                            <%= 'checked disabled' if config('force_burn_after_reading') %>
                          >
                        </label>
                      </div>
                    </div>
                  </fieldset>
                </div>
              </div>

              <div class="field is-horizontal is-align-items-center<%= ' is-hidden' if (!config('allow_pwd_on_files') || stash('invitation')) %>">
                <div class="field-label">
                  <label for="use-password" class="label">
                    <%= l('Protect with password') %>
                  </label>
                </div>
                <div class="field-body">
                  <div class="field is-grouped is-align-items-center">
                    <div class="control">
                      <input
                        type="checkbox"
                        id="use-password"
                      >
                    </div>
                    
                    <div class="field">
                      <label id="password-control" class="label is-invisible">
                        Password
                        <div class="control has-icons-left has-icons-right is-expanded">
                            <input class="input" id="password-input" type="password" placeholder="<%= l('Password') %>" autocomplete="off" value="">
                            
                            <span class="icon is-small is-left fas fa-lock" aria-hidden="true"></span>
                            <span id="password-preview-button" class="icon is-small is-right fas fa-eye is-clickable has-text-primary" aria-hidden="true"></span>
                        </div>
                      </label>
                    </div>
                  </div>
                </div>
              </div>

              <div id="zip-fields" class="field is-horizontal is-align-items-center is-hidden">
                <div class="field-label">
                  <label for="zip-multiple" class="label">
                    <%= l('Compress multiple files') %>
                  </label>
                </div>
                <div class="field-body">
                  <div class="field is-grouped is-align-items-center">
                    <div class="control">
                      <input
                        type="checkbox"
                        id="zip-multiple"
                        checked
                      >
                    </div>

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

              <div class="field">
                <div class="control has-text-centered">
                  <button id="submit-button" type="button" class="button is-primary is-medium is-fullwidth"><%= l('Send') %></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="right-zone column">
    % if (stash('invitation')) {
      <div class="message is-info">
        <div class="message-body">
          <%= 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>
      </div>
    % }
      <div id="lufi-description" class="block">
        <div class="content">
          <h1 class="title is-1 has-text-centered">Lufi</h1>
          <h2 class="subtitle has-text-centered"><%= l("The secured way to share your files!") %></h2>
          <p class="is-size-5">
            <%= l("Lufi lets you temporarily host your files securely! Your files are encrypted on your device and then stored on our server until the set expiry date. It's impossible for us to know what they contain!") %>
          </p>
        </div>
      </div>

      <ul id="uploaded-files" class="block"></ul>
    </div>
  </div>
% }

<template id="card-file-skeleton">
  <li class="card-file-skeleton card m-2 is-size-6 skeleton-block">
    <div class="card-content p-2">
      <div class="content fixed-grid has-12-cols">
        <div class="grid is-vcentered">
          <div class="cell is-col-1">
              <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
          </div>
          <div class="cell is-col-span-10">
            <strong class="is-block wb-all name is-overflow-x"></strong>
            <small class="is-block size mt-1"></small>
          </div>

          <button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
            <span class="delete"></span>
          </button>
        </div>
      
      </div>
    </div>
  </li>
</template>

<template id="card-file-error">
  <li class="card-file-error card m-2 is-size-6">
    <div class="card-content p-2">
      <div class="content fixed-grid has-12-cols">
        <div class="grid is-vcentered">
          <div class="cell is-col-1">
              <span class="icon fas fa-file fa-2x is-large has-text-primary"></span>
          </div>
          <div class="cell is-col-span-9">
            <strong class="is-block wb-all name is-overflow-x"></strong>
            <small class="is-block size mt-1"></small>
          </div>

          <div class="cell is-col-10 ">
            <button class="is-narrow card-header-icon" aria-label="<%= l('Close') %>">
              <span class="delete"></span>
            </button>
          </div>
        </div>

        <div class="message is-danger has-text-danger">
          <div class="message-body"></div>
        </div>
      
      </div>
    </div>
  </li>
</template>

<template id="card-file-to-upload">
  <li class="card-file-to-upload card m-2 is-size-6">
    <div class="card-content p-2">
      <div class="content fixed-grid has-12-cols">
        <div class="grid is-vcentered">
          <div class="cell is-col-1">
              <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
          </div>
          <div class="cell is-col-span-10">
            <strong class="is-block wb-all name is-overflow-x"></strong>
            <small class="is-block size mt-1"></small>
          </div>

          <button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
            <span class="delete"></span>
          </button>
        </div>
      
      </div>
    </div>
  </li>
</template>

<template id="card-file-uploading">
  <li class="card-file-uploading card m-2 is-size-6">
    <div class="card-content p-2">
      <div class="content fixed-grid has-12-cols">
        <div class="grid is-vcentered">
          <div class="cell is-col-1">
              <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
          </div>
          <div class="cell is-col-span-10">
            <strong class="is-block wb-all name is-overflow-x"></strong>
            <small class="is-block size mt-1"></small>
          </div>

          <button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
            <span class="delete"></span>
          </button>
        </div>
        <div class="block info"><%= l('Compression in progress') %></div>

        <div class="progress-text has-text-centered">0%</div>
        <progress class="progress is-primary is-small" max="100">0%</progress>
      </div>
    </div>
  </li>
</template>

<template id="card-file-uploaded">
  <li class="card-file-uploaded card m-2 is-size-6">
    <div class="card-content p-2">
      <div class="content fixed-grid has-12-cols">
        <div class="grid is-vcentered">
          <div class="cell is-col-1">
              <span class="icon fas fa-file fa-2x is-large has-text-primary" aria-hidden="true"></span>
          </div>
          <div class="cell is-col-span-10">
            <strong class="is-block wb-all name is-overflow-x name"></strong>
            <small class="is-block size mt-1 size"></small>
          </div>

          <button class="is-narrow is-pulled-right card-header-icon" aria-label="<%= l('Close') %>">
            <span class="delete"></span>
          </button>
        </div>

        <div class="expiration"></div>
      </div>
    </div>

    % if (!defined stash('invitation')) {
      <footer class="card-footer is-align-items-center">
        <a href="#" class="card-footer-item action-copy">
          <button class="icon-text is-justify-content-center">
            <span class="icon fas fa-copy" aria-hidden="true"></span>
            <span class="text"><%= l('Copy link') %></span>
          </button>
        </a>
        <a href="#" class="card-footer-item action-download">
          <span class="icon-text is-justify-content-center">
            <span class="icon fas fa-download" aria-hidden="true"></span>
            <span><%= l('Download') %></span>
          </span>
        </a>
        <a href="#" class="card-footer-item action-share">
          <span class="icon-text is-justify-content-center">
            <span class="icon fas fa-envelope" aria-hidden="true"></span>
            <span><%= l('Share') %></span>
          </span>
        </a>
        <a href="#" class="card-footer-item has-text-danger action-delete">
          <span class="icon-text is-justify-content-center">
            <span class="icon fas fa-trash" aria-hidden="true"></span>
            <span><%= l('Delete') %></span>
          </span>
        </a>
      </footer>
    % }
  </li>
</template>

<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    = {
    compressing:  '<%= l('Compression in progress...') %>',
    confirmExit:  '<%= l('You have attempted to leave this page. The upload will be canceled. Are you sure?') %>',
    copied:       '<%= l('Copied') %>',
    copyLink:     '<%= l('Copy link') %>',
    download:     '<%= l('Download') %>',
    expiration:   '<%= l('Expiration:') %>',
    fileUploaded: '<%= l('File uploaded') %>',
    maxSize:      '<%= l('(max size: XXX)') %>',
    noLimit:      '<%= l('No expiration delay') %>',
    unknownYet:   '<%= l('Unknown yet') %>',
    uploading:    '<%= l('Upload in progress...') %>',
};
const maxSize = <%= config('max_file_size') || 0 %>;

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

</script>

%= javascript '/js/minified/upload.min.js', type => 'module', defer => "true"