scinote-web/app/views/reports/new.html.erb

<div class="content-pane flexible reports-new">
  <div class="reports-new-header">
    <div class="sci-input-container report-name-container">
      <input type="text" class="sci-input-field report-name" placeholder="<%= t("projects.reports.new.report_name_placeholder") %>" value="<%= @report.name %>"></input>

    </div>
    <button class="btn btn-secondary cancel-button" data-toggle="modal" data-target="#reportWizardExitWarning">
      <%= t("general.cancel") %>
    </button>
  </div>
  <div class="reports-new-body">
    <ul class="nav nav-tabs hidden">
      <li role="presentation"><a href="#new-report-step-1" data-toggle="tab" data-no-turbolink="true"></a></li>
      <li role="presentation"><a href="#new-report-step-2" data-toggle="tab" data-no-turbolink="true"></a></li>
      <li role="presentation"><a href="#new-report-step-3" data-toggle="tab" data-no-turbolink="true"></a></li>
    </ul>
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="new-report-step-1">
        <%= render partial: 'reports/wizard/first_step', locals: { report: @report } %>
      </div>
      <div role="tabpanel" class="tab-pane" id="new-report-step-2">
        <%= render partial: 'reports/wizard/second_step', locals: { report: @report } %>
      </div>
      <div role="tabpanel" class="tab-pane" id="new-report-step-3">
        <%= render partial: 'reports/wizard/third_step', locals: { report: @report } %>
      </div>
    </div>
  </div>
  <div class="reports-new-footer" data-step="1">
    <div class="back-container">
      <button class="btn btn-secondary back-button">
        <%= t("general.back") %>
      </button>
    </div>
    <div class="wizard-status">
      <div class="progress-line progress-step-1"></div>
      <div class="progress-line progress-step-2"></div>
      <% 3.times do |i| %>
        <div class="wizard-steps wizard-step-<%= i + 1 %>">
          <div class="step-id">
            <%= i + 1 %>
          </div><br>
          <div class="step-dot"></div><br>
          <div class="step-name">
            <span class=name-wrapper>
              <%= t("projects.reports.wizard.statuses.step_#{i + 1}") %>
            </span>
          </div>
          <% if @edit %>
            <div class="change-step" data-step-id="<%= i + 1 %>">
            </div>
          <% end %>
        </div>
      <% end %>
    </div>
    <div class="next-button-container">
      <button class="btn btn-primary continue-button" disabled>
        <%= t("projects.reports.new.continue_button") %>
      </button>
      <% if @edit %>
        <div class="report-generate-actions-dropdown sci-dropdown dropup">
          <button class="btn btn-primary dropdown-toggle single-object-action" type="button" id="reportGenerateMenu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            <%= t("projects.reports.new.generate_as_button") %>
            <span class="caret pull-right"></span>
          </button>
          <ul id="reportGenerateMenuDropdown" class="dropdown-menu dropdown-menu-right" aria-labelledby="reportGenerateMenu">
            <li>
              <%= link_to reports_path, remote: true, id: 'saveAsNewReport', class: "disabled", data: { create_url: reports_path } do %>
                <i class="fas fa-plus-circle"></i>
                <%= t("projects.reports.new.save_as_new_report") %>
              <% end %>
            </li>
            <li>
              <%= link_to '#', remote: true, id: 'UpdateReport', class: "disabled", data: { update_url: report_path(@report) }  do %>
                <i class="fas fa-redo-alt"></i>
                <%= t("projects.reports.new.update_report") %>
              <% end %>
            </li>
          </ul>
        </div>
      <% else %>
        <button class="btn btn-primary generate-button"  data-create-url="<%= reports_path %>" disabled>
          <%= t("projects.reports.new.generate_button") %>
        </button>
      <% end %>
    </div>
  </div>
</div>

<div class="modal" id="reportWizardExitWarning" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          <%= t("projects.reports.new.exit_modal.title_#{@edit ? 'edit' : 'new'}") %>
        </h4>
      </div>
      <div class="modal-body">
        <p>
          <%= t("projects.reports.new.exit_modal.description_#{@edit ? 'edit' : 'new'}") %>
        </p>
        <p>
          <%= t("projects.reports.new.exit_modal.description_2") %>
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">
          <%= t('general.no') %>
        </button>
        <%= link_to t('general.yes'), reports_path, class: "btn btn-primary" %>
      </div>
    </div>
  </div>
</div>

<%= render partial: 'reports/modals/project_change_warning' %>
<%= render partial: 'reports/modals/template_change_warning' %>

<% if @edit %>
  <%= render partial: 'report_edit_warning_modal' %>
<% end %>

<%= javascript_include_tag("reports/new") %>