<% content_for :title, 'Quality Assurance' %>

<% content_for :breadcrumbs do %>
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <%= link_to current_project.name, project_path(current_project) %>
    </li>
    <li class="breadcrumb-item active">
      QA
    </li>
  </ol>
<% end %>

<ul class="tabs-container nav nav-tabs main-tabs">
  <li class="nav-item">
    <%= link_to project_qa_issues_path(current_project), class: 'nav-link active' do %>
      <i class="fa-solid fa-bug"></i> Issues
    <% end %>
  </li>
</ul>

<div class="row p-0">
  <div class="col-12">
    <div class="content-container" id="qa-viewer" data-behavior="qa-viewer">
      <% if @issues.any? %>
        <div data-behavior="datatable-paths"
             data-table-state-url="<%= multiple_update_project_qa_issues_path(current_project) %>"
             data-table-return-to="qa" >
          <%=
          render partial: 'issues/table', locals: {
            issues: @issues,
            local_storage_key: "project.ce.#{dom_id(current_project)}.qa_issues_datatable",
            qa_state_icons: state_icons.reject.with_index { |_, index| index == 1 },
          }
        %>
        </div>
      <% else %>
        <div class="empty-state mt-3">
          <div class="empty-state-icon">
            <%= image_tag "icons/#{rand(9)}.svg" %>
          </div>
          <div class="empty-state-body">
            <div class="container">
              <h4 class="empty-state-title">You don't have any issues to review yet.</h4>
              <p class="empty-state-body-text">Ensure the accuracy and completeness of your data by QA-ing issues. Once there are issues marked as 'ready for review' you'll be able to go through each one here, make any necessary changes, leave comments, publish, etc.</p>
              <div class="empty-state-actions">
                <a href="https://dradis.com/support/guides/projects/qa.html" class="empty-state-docs-link" target="_blank">More about QA</a>
              </div>
            </div>
          </div>
        </div>
      <% end %>
    </div>
  </div>
</div>
