{# Logging panel component for experiment run #}
{# the URLs js/run_panel.js calls; built here so they follow the app's URL prefix #}
{% set panel_urls = {
  'optimizerPlot': url_for('execute.get_optimizer_plot'),
  'queue': url_for('execute.get_queue'),
  'queueDelete': url_for('execute.delete_queue_task'),
  'queueReorder': url_for('execute.reorder_queue_task'),
  'runningConfig': url_for('execute.get_running_config'),
  'taskConditions': url_for('execute.get_queue_task_conditions', uid='__uid__'),
  'currentTask': url_for('execute.get_current_task_details'),
} %}
<div class="col-lg-6 col-sm-12 logging-panel d-flex flex-column h-100" data-urls='{{ panel_urls | tojson }}'>
  <div class="d-flex justify-content-between align-items-center flex-shrink-0">
    <h5>Progress：<span id="iteration-display" class="ms-2 fs-6 text-muted"></span><span id="batch-display" class="ms-2 fs-6 text-secondary"></span></h5>
    <div class="d-flex gap-2 ms-auto">
      <button id="view-current-config" class="btn border-0 text-secondary" style="background-color: #e9ecef;" title="View current run">
        <i class="bi bi-info-circle"></i>
      </button>
      <button id="pause-resume" class="btn btn-info text-white">
        {% if pause_status %}
        <i class="bi bi-play-circle"></i>
        {% else %}
        <i class="bi bi-pause-circle"></i>
        {% endif %}
      </button>
      <button id="abort-current" class="btn btn-danger text-white">
        <i class="bi bi-stop-circle"></i>
      </button>
      <button id="abort-pending" class="btn btn-warning text-white" title="Stop pending tasks">
        <i class="bi bi-hourglass-split"></i>
      </button>
    </div>
  </div>
  <small class="text-muted mt-2 flex-shrink-0">
    <strong>Note:</strong> The current step cannot be paused or stopped until it completes.
  </small>
  <div class="progress my-3 flex-shrink-0">
    <div id="progress-bar-inner" class="progress-bar progress-bar-striped progress-bar-animated"></div>
  </div>
  <!-- Tabs -->
  <ul class="nav nav-tabs flex-shrink-0" id="logPlotTabs" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="log-tab" data-bs-toggle="tab" data-bs-target="#log" type="button"
        role="tab">Log</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="queue-tab" data-bs-toggle="tab" data-bs-target="#queue" type="button"
        role="tab">Queue</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="plot-tab" data-bs-toggle="tab" data-bs-target="#plot" type="button"
        role="tab">Optimizer Plot</button>
    </li>
  </ul>
  <div class="tab-content mt-3 flex-grow-1 d-flex flex-column" id="logPlotTabsContent" style="min-height: 0;">
    <div class="tab-pane fade show active flex-grow-1 h-100" id="log" role="tabpanel" style="min-height: 0;">
      <div class="d-flex flex-column h-100">
        <div id="logging-panel" class="border p-2 bg-light flex-grow-1 overflow-auto"></div>
      </div>
    </div>
    <div class="tab-pane fade flex-grow-1 h-100" id="queue" role="tabpanel" style="overflow-y: auto; min-height: 0;">
      <div class="d-flex flex-column h-100 justify-content-start">
        <div id="queue-list" class="list-group w-100">
          <!-- Queue items will be inserted here -->
        </div>
      </div>
    </div>
    <div class="tab-pane fade flex-grow-1 h-100" id="plot" role="tabpanel" style="overflow-y: auto;">
      <div class="d-flex flex-column h-100 justify-content-start">
        <button class="btn btn-success mb-2" onclick="showPlot()">Refresh Plot</button>
        <small class="text-muted d-block mt-1" id="plot-info">Interactive plots from your active optimizer.</small>
        <br>
        <div id="optimizerPlotsContainer" class="w-100 d-flex flex-column gap-3"></div>
      </div>
    </div>
  </div>
</div>

<!-- Stop Current Workflow Modal -->
<div class="modal fade" id="stopWorkflowModal" tabindex="-1" aria-labelledby="stopWorkflowModalLabel"
  aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title text-danger" id="stopWorkflowModalLabel">
          <i class="bi bi-stop-circle-fill me-2"></i>Stop Workflow
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <p>This will gracefully stop execution after the current step finishes.</p>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="stopCleanupCheckbox">
          <label class="form-check-label" for="stopCleanupCheckbox">
            Proceed to cleanup steps
          </label>
        </div>
        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" value="" id="continueQueueCheckbox">
          <label class="form-check-label" for="continueQueueCheckbox">
            <strong>Continue execution queue</strong>
          </label>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="stopWorkflowConfirmBtn">Stop Workflow</button>
      </div>
    </div>
  </div>
</div>

<!-- Abort Pending Modal -->
<div class="modal fade" id="abortPendingModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Stop After This Iteration?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p>This will gracefully stop after this iteration finishes.</p>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="cleanup-checkbox">
          <label class="form-check-label" for="cleanup-checkbox">
            Proceed to cleanup steps
          </label>
        </div>
        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" id="continueQueuePendingCheckbox">
          <label class="form-check-label" for="continueQueuePendingCheckbox">
            <strong>Continue execution queue</strong>
          </label>
        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger" id="abortPendingConfirm">
          Confirm
        </button>
      </div>
    </div>
  </div>
</div>


<!-- Queue Details Modal -->
<div class="modal fade" id="queueDetailsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Task Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div id="conditions-error" class="alert alert-danger py-2 d-none" role="alert"></div>
        <pre id="queue-details-content" class="bg-light p-3 border rounded"></pre>
        <div id="conditions-editor" class="d-none"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary d-none" id="cancel-conditions-btn" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary d-none" id="save-conditions-btn" onclick="saveConditions()">Save</button>
        <button type="button" class="btn btn-secondary" id="close-details-btn" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script src="{{ url_for('static', filename='js/run_panel.js') }}"></script>