<% node = local_assigns[:attachments_node] ? attachments_node : nil %>

<div class="attachments-box jquery-upload" data-behavior="jquery-upload">

  <div class="header">
    <div class="header-inner">
      <h5 class="header-name">Attachments</h5>
      <div class="options">
        <%= link_to '#attachment-box', 
            data: { bs_toggle: 'collapse', behavior: 'collapse-collection' } do %>
          <i class="fa-solid fa-chevron-up" data-behavior="toggle-chevron"></i>
          <span class="visually-hidden">Toggle attachments list</span>
        <% end %>
      </div>
    </div>
  </div>

  <div class="collapse show" id="attachment-box">
    <!-- The table listing the files available for upload/download -->
    <table>
      <tbody class="files">
        <% if node.attachments.any? %>
          <% for attachment in node.attachments do %>
            <tr class="template-download">
              <td colspan="4">
                <table class="file">
                  <tr>
                    <td class="name">
                      <%= link_to main_app.project_node_attachment_path(node.project, node, attachment.filename), download: attachment.filename, title: attachment.filename, class: 'filename' do %>
                        <i class="fa-solid fa-paperclip"></i> <%= short_filename(attachment.filename) %>
                      <% end %>
                    </td>
                    <td rowspan="2" class="copy-link">
                      <button
                        class="btn btn-sm btn-transparent btn-copy"
                        data-clipboard-text="!<%= main_app.project_node_attachment_path(node.project, node, '') + attachment.url_encoded_filename %>!"
                      >
                        <i class="fa-solid fa-link fa-fw"></i>
                      </button>
                    </td>
                    <td rowspan="2" class="delete">
                      <button
                        class="btn btn-sm btn-transparent btn-trash"
                        data-type="DELETE"
                        data-url="<%= main_app.project_node_attachment_path(node.project, node, attachment.filename) %>"
                      >
                        <i class="fa-solid fa-trash fa-fw"></i>
                      </button>
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          <% end %>
        <% end %>
      </tbody>
    </table>

    <div class="drop-zone attachment-upload-box" data-behavior="drop-zone">
      <span>Drop attachments here, or</span>
      <!-- The file upload form used as target for the file upload widget -->
      <%= form_tag main_app.project_node_attachments_path(node.project, node, format: :json), id: 'fileupload', multipart: true do %>
        <div class="fileupload-buttonbar">
          <span class="fileinput-button">
            <label for="file-upload">choose file</label>
            <input type="file" name="files[]" id="file-upload" multiple>
          </span>
        </div>
        <!-- The loading indicator is shown during image processing -->
        <div class="fileupload-loading"></div>
      <% end %>
    </div>
  </div>
</div>

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      <tr class="template-upload fade show">
        <td colspan="4">
          <table>
            <tr>
              <td class="name">{%= file.name %}</td>
              {% if (file.error) { %}
                <td rowspan="2" class="error" colspan="2"><span>{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
              {% } %}
              <td rowspan="2" align="right" class="cancel">{% if (!i) { %}
                <button class="btn btn-warning">
                    <i class="fa-solid fa-ban fa-inverse fa-fw"></i>
                    <span>{%locale.fileupload.cancel%}</span>
                </button>
              {% } %}</td>
            </tr>
            <tr>
              <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
            </tr>
            <tr>
              <td colspan="4">
                <div class="progress" id="progress">
                  <div class="bar progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar"></div>
                </div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
  {% } %}
</script>

<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
      <tr class="template-download fade show">
        <td colspan="4">
          <table class="file">
            <tr>
              {% if (file.error) { %}
                <td class="name"><span>{%=file.name%}</span></td>
                <td class="error w-100"><span>{%=locale.fileupload.error%}:</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
                <td rowpan="2" class="delete">
                    <button class="btn btn-sm btn-transparent" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
                        <i class="fa-solid fa-trash fa-fw"></i>
                        <span>{%locale.fileupload.destroy%}</span>
                    </button>
                    <input type="checkbox" name="delete" value="1">
                </td>

              {% } else { %}
                <td class="name">
                  <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}" class="filename">
                    <i class="fa-solid fa-paperclip"></i>
                    {%= file.name %}
                  </a>
                </td>
                <td rowspan="2" align="right" class="copy-link">
                  <button
                    class="btn btn-sm btn-transparent"
                    data-clipboard-text="!{%= file.url %}!"
                  >
                    <i class="fa-solid fa-link fa-fw"></i>
                  </button>
                </td>
                <td rowspan="2" align="right" class="delete">
                  <button
                    class="btn btn-sm btn-transparent"
                    data-type="{%=file.delete_type%}"
                    data-url="{%=file.delete_url%}"
                  >
                    <i class="fa-solid fa-trash fa-fw"></i>
                  </button>
                </td>
              {% } %}
            </tr>
          </table>
        </td>
      </tr>
  {% } %}
</script>
