scinote-web/app/views/protocols/index/_protocol_preview_modal_body.html.erb

<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-4">
    <div class="badge-icon">
      <span class="fas fa-calendar-alt"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.created_at" %>:</span>
      <strong><%= l(@protocol.created_at, format: :full) %></strong>
    </div>
  </div>

  <div class="col-xs-6 col-sm-4 col-md-4">
    <div class="badge-icon">
      <span class="fas fa-calendar-alt"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.updated_at" %>:</span>
      <strong data-role="updated-at-refresh"><%= render partial: "protocols/header/updated_at_label.html.erb" %></strong>
    </div>
  </div>

  <div class="col-xs-12 col-sm-4 col-md-4">
    <div class="badge-icon">
      <span class="fas fa-user fa-lg"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.added_by" %>:</span>
      <strong><%= @protocol.added_by.full_name %></strong>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="badge-icon">
      <span class="fas fa-font"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.keywords" %>:</span>
        <%= render partial: "protocols/header/keywords_label.html.erb" %>
    </div>
  </div>

  <div class="col-xs-12 col-sm-6 col-md-6">
    <div class="badge-icon">
      <span class="fas fa-graduation-cap"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.authors" %>:</span>
        <%= render partial: "protocols/header/authors_label.html.erb" %>
    </div>
  </div>

  <div class="col-xs-12 col-sm-12 col-md-12">
    <div class="badge-icon">
      <span class="fas fa-info-circle"></span>
    </div>
    <div class="well well-sm">
      <span class="hidden-xs hidden-sm hidden-md"><%=t "protocols.header.description" %>:</span>
        <%= render partial: "protocols/header/description_label.html.erb" %>
    </div>
  </div>
</div>

<div data-role="steps-container">
  <div class="row">
    <div class="col-xs-8">
      <h2><%= t("protocols.steps.subtitle") %></h2>
    </div>
  </div>
  <div id="steps">
    <% protocol.steps.order(:position).each do |step| %>
      <div class ="step <%= step.completed? ? "completed" : "not-completed" %>">
        <div class="badge-num">
          <span class="badge size-digit-<%= (step.position_plus_one).to_s.length %>"><%= step.position_plus_one %></span>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <strong><%= step.name %></strong> |
            <span><%= t("protocols.steps.published_on", timestamp: l(step.created_at, format: :full), user: h(step.user.full_name)).html_safe %></span>
          </div>
          <div class="panel-collapse collapse in" id="step-panel-<%= step.id %>" role="tabpanel" aria-expanded="true">
            <div class="panel-body">
              <div class="row">
                <div class="col-xs-12">
                  <% if sanitize_input(step.description).blank? %>
                    <em><%= t("protocols.steps.no_description") %></em>
                  <% else %>
                    <div class="ql-editor">
                      <%= sanitize_input(step.tinymce_render(:description), ['img']) %>
                    </div>
                  <% end %>
                </div>
              </div>
              <div class="row">
                <% unless step.tables.blank? then %>
                  <hr>
                  <div class="col-xs-12">
                    <% step.tables.each do |table| %>
                      <strong><%= table.name %></strong>
                      <div data-role="hot-table" class="hot-table">
                        <%= hidden_field(table, :contents, value: table.contents_utf_8, class: "hot-contents") %>
                        <div data-role="step-hot-table" class="step-result-hot-table"></div>
                      </div>
                    <% end %>
                  </div>
                <% end %>

                <% assets = ordered_assets(step) %>
                <% unless assets.blank? then %>
                  <hr>
                  <div class="col-xs-12">
                    <strong><%= t("protocols.steps.files") %></strong>
                    <ul>
                      <% assets.each do |asset| %>
                        <li>
                          <%= render partial: "shared/asset_link", locals: { asset: asset, display_image_tag: true }, formats: :html %>
                        </li>
                      <% end %>
                    </ul>
                  </div>
                <% end %>

                <% unless step.checklists.blank? then %>
                  <div class="col-xs-12">
                    <% step.checklists.asc.each do |checklist| %>
                      <strong><%= checklist.name %></strong>
                      <% if checklist.checklist_items.empty? %>
                        </br>
                        <%= t("protocols.steps.empty_checklist") %>
                        </br>
                      <% else %>
                        <% ordered_checklist_items(checklist).each do |checklist_item| %>
                          <div class="checkbox">
                            <label>
                              <% if protocol.in_module? %>
                                <input type="checkbox" value="" <%= "checked" if checklist_item.checked? %> disabled="disabled"/>
                              <% else %>
                                <input type="checkbox" value="" disabled="disabled" />
                              <% end %>
                              <%= checklist_item.text %>
                            </label>
                          </div>
                        <% end %>
                      <% end %>
                    <% end %>
                  </div>
                <% end %>

              </div>
            </div>
          </div>
        </div>
      </div>
    <% end %>
  </div>
</div>