% 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"><%= l('Drop files here') %></span>
                    <span class="is-size-5"><%= l('or') %></span> 
                    <button type="button" id="upload-zone-button" class="button m-auto is-primary" 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">
      <div id="uploaded-files" class="block">
      </div>
    </div>
  </div>
% }

<template id="card-file-error">
  <article 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-10">
            <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-12 ">
            <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>
  </article>
</template>

<template id="card-file-to-upload">
  <article 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>

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

<template id="card-file-uploading">
  <article 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="cell is-col-12 is-narrow has-text-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>
  </article>
</template>

<template id="card-file-uploaded">
  <article 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="cell is-col-12 is-narrow has-text-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">
          <span class="icon-text is-justify-content-center">
            <span class="icon fas fa-copy" aria-hidden="true"></span>
            <span class="text"><%= l('Copy link') %></span>
          </span>
        </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>
    % }
  </article>
</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 sendFilesURLsURL = '<%= 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"