scinote-web/app/views/steps/_empty_step.html.erb

<ul class="nav nav-tabs">
  <li role="presentation" id="new-step-main-tab" class="active">
    <a href="#new-step-main" data-toggle="tab" data-no-turbolink="true">
      <span class="fas fa-pencil-alt"></span>
    </a>
  </li>
  <li role="presentation" id="new-step-checklists-tab">
    <a href="#new-step-checklists" data-toggle="tab" data-no-turbolink="true">
      <span class="fas fa-tasks"></span>
      <%= t("protocols.steps.new.tab_checklists") %>
    </a>
  </li>
  <li role="presentation"
      id="new-step-assets-tab"
      onClick="dragNdropAssetsInit('steps')">
    <a href="#new-step-assets" data-toggle="tab" data-no-turbolink="true">
      <span class="fas fa-paperclip"></span>
      <%= t("protocols.steps.new.tab_assets") %>
    </a>
  </li>
  <li role="presentation" id="new-step-tables-tab">
    <a href="#new-step-tables" data-toggle="tab" data-no-turbolink="true">
      <span class="fas fa-table"></span>
      <%= t("protocols.steps.new.tab_tables") %>
    </a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" role="tabpanel" id="new-step-main">
    <%= f.text_field :name, label: t("protocols.steps.new.name"), placeholder: t("protocols.steps.new.name_placeholder") %>
    <div class="form-group">
      <%= f.tiny_mce_editor(:description,
                            id: :step_description_textarea,
                            hide_label: false,
                            value: sanitize_input(@step.tinymce_render(:description)),
                            data: {
                              object_type: 'step',
                              object_id: @step.id,
                              highlightjs_path: asset_path('highlightjs-github-theme.css') } ) %>
    </div>
  </div>
  <div class="tab-pane" role="tabpanel" id="new-step-checklists">
    <%= f.nested_fields_for :checklists do |ff| %>
      <%= render "form_checklists.html.erb", ff: ff %>
    <% end %>
    <%= f.add_nested_fields_link :checklists do %>
      <span class="fas fa-plus"></span>
      <%= t("protocols.steps.new.add_checklist") %>
    <% end %>
  </div>
  <div class="tab-pane" role="tabpanel" id="new-step-assets">
    <div class="text-center new-asset-box">
      <span class="help_tooltips"
            data-tooltiplink="<%= I18n.t('tooltips.link.protocol.step_add_files') %>"
            data-tooltipcontent="<%= I18n.t('tooltips.text.protocol.step_add_files') %>">
      <%=t 'assets.drag_n_drop.label_html' %>
      <label>
        <span class="btn btn-default new-asset-upload-button">
          <span class="fas fa-file-upload new-asset-upload-icon"></span>
          <%=t 'assets.drag_n_drop.browse_label' %>
        </span>
        <span style="display:none;">
          <%= f.file_field :file,
                           id: "drag-n-drop-assets",
                           multiple: true,
                           direct_upload: true,
                           onchange: "DragNDropSteps.init(this.files)" %>
        </span>
      </label>
      </span>
    </div>
    <div id="new-step-assets-group" class="form-group">
      <div class="col-xs-12 attachments edit">
        <%= f.nested_fields_for :assets do |ff| %>
          <%= render partial: 'shared/asset_placeholder.html.erb',
                     locals: { edit_page: true, asset: ff.object, ff: ff } %>
      <% end %>
      </div>
    </div>
  </div>
  <div class="tab-pane" role="tabpanel" id="new-step-tables">
    <%= f.nested_fields_for :tables do |ff| %>
      <%= render "form_tables.html.erb", ff: ff %>
    <% end %>
    <%= f.add_nested_fields_link :tables, id: "add-table" do %>
      <span class="fas fa-plus"></span>
      <%= t("protocols.steps.new.add_table") %>
    <% end %>
  </div>
</div>