scinote-web/app/views/shared/file_preview/_content.html.erb

<div class="modal-header">
  <span class="file-name"><%= asset.file.metadata[:name] || asset.file_name %></span>
  <div class="sci-btn-group">
    <% if can_edit && !preview %>
      <% if wopi_enabled? && wopi_file?(asset) %>
        <% edit_supported, title = wopi_file_edit_button_status(asset) %>
        <%= render partial: 'assets/wopi/file_wopi_controls.html.erb',
          locals: {
            asset: asset,
            edit_supported: edit_supported,
            title: title
          } %>
      <% elsif asset.file.metadata[:asset_type] == 'marvinjs' %>
        <button class="btn btn-light marvinjs-edit-button"
          data-sketch-id="<%= asset.id %>"
          data-update-url="<%= marvin_js_asset_path(asset) %>"
          data-sketch-start-edit-url="<%= start_editing_marvin_js_asset_path(asset) %>"
          data-sketch-name="<%= asset.file.metadata[:name] %>"
          data-sketch-description="<%= asset.file.metadata[:description] %>"
        >
          <span class="fas fa-pencil-alt"></span>
          <%= t('assets.file_preview.edit_in_marvinjs') %>
        </button>

      <% elsif asset.bio_eddie? && BioEddieService.enabled?(current_user) %>
        <button class="btn btn-light bio-eddie-edit-button"
          data-molecule-id="<%= asset.id %>"
          data-update-url="<%= bio_eddie_asset_path(asset) %>"
          data-edit-url="<%= start_editing_bio_eddie_asset_path(asset) %>"
          data-molecule-name="<%= asset.file.metadata[:name] || asset.file_name %>"
          data-molecule-description="<%= asset.file.metadata[:description] || asset.file.download %>"
        >
          <span class="fas fa-pencil-alt"></span>
          <%= t('assets.file_preview.edit_in_bio_eddie') %>
        </button>
      <% elsif asset.editable_image? %>
        <button class="btn btn-light image-edit-button"
          data-image-id="<%= asset.id %>"
          data-image-name="<%= asset.file_name %>"
          data-image-url="<%= asset_file_url_path(asset) %>"
          data-image-quality="<%= asset.file_image_quality || 80 %>"
          data-image-mime-type="<%= asset.file.content_type %>"
          data-image-start-edit-url="<%= start_edit_image_path(asset) %>"
        >
          <span class="fas fa-pencil-alt"></span>
          <%= t('assets.file_preview.edit_in_scinote') %>
        </button>
      <% end %>
    <% end %>
    <% if asset.file.metadata[:asset_type] == 'bio_eddie' %>
      <a class="btn btn-light file-download-link" href="data:text/plain;charset=utf-8,<%= asset.file.metadata[:description] %>" download="<%= asset.file.metadata[:name] %>.helm" data-turbolinks="false">
        <span class="fas fa-download"></span> <%= t('Download')%>
      </a>
    <% else %>
      <a class="btn btn-light file-download-link" href="<%= rails_blob_path(asset.file, disposition: 'attachment') %>" data-turbolinks="false">
        <span class="fas fa-download"></span> <%= t('Download')%>
      </a>
    <% end %>
    <% if (asset.step || asset.result) && !preview %>
      <%= render partial: 'assets/asset_context_menu.html.erb', locals: { asset: asset, deletable: false, editable: false } %>
    <% end %>
    <button type="button" class="btn icon-btn btn-light" data-dismiss="modal"><span class="fas fa-times"></span></button>
  </div>
</div>
<div class="modal-body">
  <div class="file-preview-container">
    <% if asset.previewable? %>
      <% if wopi_enabled? && wopi_file?(asset) %>
        <iframe class="wopi-file-preview" src="<%= asset.get_action_url(current_user, 'embedview') %>"></iframe>
      <% elsif asset.pdf_previewable? %>
        <%= render partial: 'shared/pdf_viewer.html.erb', locals: { asset: asset, report_document: false } %>
      <% else %>
        <%= image_tag asset.large_preview,
            onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
            onload: 'ActiveStoragePreviews.showPreview(event)',
            style: 'opacity: 0' %>
      <% end %>
    <% else %>
      <%= render partial: 'shared/file_preview/file_icon.html.erb', locals: { asset: asset } %>
    <% end %>
  </div>
</div>
<div class="modal-footer">
  <% if gallery %>
    <div class="gallery">
      <% previous_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[0]&.last) %>
      <% next_asset = Asset.find_by(id: gallery.split(asset.id.to_s)[1]&.first) %>
      <% if previous_asset && can_read_asset?(previous_asset) %>
        <%= link_to asset_file_preview_path(previous_asset),
          class: "previous-asset gallery-switcher",
          data: {id: previous_asset.id, gallery_elements: gallery} do %>
          <% if previous_asset.previewable? %>
            <%= image_tag previous_asset.medium_preview,
                onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
                onload: 'ActiveStoragePreviews.showPreview(event)',
                style: 'opacity: 0' %>
          <% else %>
            <i class="fas <%= file_fa_icon_class(previous_asset) if previous_asset.file_name %>"></i>
          <% end %>
          <i class="fas fa-angle-left"></i>
          <span class="file-name"><%= previous_asset.file_name %></span>
        <% end %>
      <% end %>
      <span class="file-counter">
        <%= gallery.split(asset.id.to_s)[0].length + 1 %> of <%= gallery.length %> attachments
      </span>
      <% if next_asset && can_read_asset?(next_asset) %>
        <%= link_to asset_file_preview_path(next_asset),
          class: "next-asset gallery-switcher",
          data: {id: next_asset.id, gallery_elements: gallery} do %>
          <span class="file-name"><%= next_asset.file_name %></span>
          <i class="fas fa-angle-right"></i>
          <% if next_asset.previewable? %>
            <%= image_tag next_asset.medium_preview,
                onerror: 'ActiveStoragePreviews.reCheckPreview(event)',
                onload: 'ActiveStoragePreviews.showPreview(event)',
                style: 'opacity: 0' %>
          <% else %>
            <i class="fas <%= file_fa_icon_class(next_asset) if next_asset.file_name %>"></i>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>
</div>