<div role="tabpanel" class="tab-pane" id="publish">
  <div class="row min-height-100vh flex">
    <div class="col-sm-1 white-bg no-margin side-nav-width">
    </div>

    <div class="col-sm-11 min-height-100vh">
      <%= render 'shared/flash_message' %>

      <div class="tab-content">
        <div class="tab-pane task-queue-settings-tab active">
          <div class="row flex align-items-flex-end">
            <div class="col-sm-8">
              <div class="row flex">
                <div class="col-sm-11">
                  <div class="task-queue-preview--header">
                    <h1>Enable Task queue</h1>
                    <h4>Enable or Disable the task queue here.</h4>
                  </div>
                </div>
                <div class="col-sm-1 align-self-flex-end">
                  <div class="task-queue-enable--button">
                    <label class="switch">
                      <div class='toggle'>
                        <%= check_box_tag "task_queue[enabled]", true, @task_queue.try(:[], "enabled"), class: 'form-control toggle-state', id: 'task-queue-enable' %>
                        <div class='toggle-inner'>
                          <div class='indicator'></div>
                        </div>
                        <div class='active-bg'></div>
                      </div>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <br/>
          <br/>
          <h3>Preview:</h3>
          <p>This is how your outcome buttons will appear on each record in the task queue</p>
          <div class="row no-margin">
            <div class="col-sm-8 white-bg">
              <div class="row">
                <div class="col-sm-12 no-padding">
                  <h4 class="bold margin-15">Task Queue:
                    <span class="task-queue--name"><%= @task_queue.name %></span>
                  <h4>
                </div>
                <div class="col-sm-12 light-grey-bg flex min-height-50">
                  <h4 class="task-queue--details"><%= @task_queue.details %></h4>
                </div>
              </div>
              <div class="row flex justify-content-center">
                <div class="col-sm-12">
                  <div class="task-queue--outcome-buttons">
                    <% if @task_queue.success_outcome_title.present? %>
                      <a href="" class="btn btn-primary task-queue--outcome-button task-queue--outcome-button-success no-click"><%= @task_queue.success_outcome_title %></a>
                    <% end %>

                    <% if @task_queue.failure_outcome_title.present? %>
                      <a href="" class="btn btn-danger task-queue--outcome-button task-queue--outcome-button-failure no-click"><%= @task_queue.failure_outcome_title %></a>
                    <% end %>

                    <a href="" class="btn btn-purple task-queue--next-item no-click"  data-task-queue-id="<%= @task_queue.id %>">Next queue item</a>
                  </div>
                  <br/>
                </div>
              </div>
            </div>
          </div>
          <br/>
          <br/>
          <div class="row">
            <div class="col-sm-8">
              <%= link_to "View this task queue", task_queue_path(@task_queue), class: "btn btn-primary pull-right" %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
