<!-- viewer error modal -->
<div class="modal fade" id="error-viewer-modal" tabindex="-1" role="dialog" aria-labelledby="error-viewer-modal-label" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="error-viewer-modal-title">Error in Viewer</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="alert alert-danger" id="error-viewer-modal-message" role="alert">
          </div>
          <div class="d-flex justify-content-between align-items-center mt-3 mb-2">
            <button type="button" class="btn btn-sm btn-info" id="toggle-error-viewer-log-btn">Show Log Details</button>
            <span id="error-viewer-log-status" class="small text-muted d-none">Loading logs...</span>
          </div>
          <div id="error-viewer-log-container" class="d-none">
            <div id="error-viewer-log-content" class="bg-dark text-light p-3 rounded log-content" style="max-height: 300px; overflow-y: auto; font-family: monospace; font-size: 0.85rem;">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary d-none copy-log-btn" id="copy-error-viewer-log-btn">Copy Log</button>
        </div>
      </div>
    </div>
</div>
