{% extends "base.html" %}
{% block content %}
<div class="container my-5">
  <div class="row">
    <!-- Sidebar Navigation -->
    <div class="col-md-3 mb-4">
      <div class="list-group shadow-sm border-light">
        <a href="{% url 'loader_dashboard' %}" class="list-group-item list-group-item-action">
          <i class="fas fa-th-large mr-2"></i>Dashboard
        </a>
        <a href="{% url 'loader_history' %}" class="list-group-item list-group-item-action active">
          <i class="fas fa-history mr-2"></i>History Panel
        </a>
        <a href="{% url 'loader_permissions' %}" class="list-group-item list-group-item-action">
          <i class="fas fa-user-lock mr-2"></i>Permissions
        </a>
      </div>
    </div>

    <!-- History Panel Content -->
    <div class="col-md-9">
      <div class="card shadow-sm border-light p-4">
        <div class="d-flex align-items-center justify-content-between mb-4">
          <div>
            <h2 class="h4 font-weight-bold mb-1">Command History</h2>
            <p class="text-muted small mb-0">Monitor background loader executions, check exit status codes, and view run logs.</p>
          </div>
          <button class="btn btn-sm btn-outline-secondary" onclick="location.reload();">
            <i class="fas fa-sync-alt mr-1"></i> Refresh
          </button>
        </div>

        <div style="overflow-x: auto;">
          <table class="table table-hover table-sm border-bottom mb-0">
            <thead class="thead-light">
              <tr>
                <th class="border-top-0">ID</th>
                <th class="border-top-0">Command</th>
                <th class="border-top-0">PID</th>
                <th class="border-top-0">Started At</th>
                <th class="border-top-0">Finished At</th>
                <th class="border-top-0">Status</th>
                <th class="border-top-0 text-right">Logs</th>
              </tr>
            </thead>
            <tbody>
              {% for h in histories %}
                <tr>
                  <td><code>#{{ h.history_id }}</code></td>
                  <td><code class="text-primary font-weight-bold">{{ h.command }}</code></td>
                  <td><small class="text-muted">{% if h.pid %}{{ h.pid|stringformat:"d" }}{% else %}-{% endif %}</small></td>
                  <td><small class="text-muted">{{ h.created_at|date:"Y-m-d H:i:s" }}</small></td>
                  <td><small class="text-muted">{% if h.finished_at %}{{ h.finished_at|date:"Y-m-d H:i:s" }}{% else %}-{% endif %}</small></td>
                  <td>
                    {% if h.status == "PENDING" %}
                      <span class="badge badge-secondary">Waiting</span>
                    {% elif h.status == "RUNNING" %}
                      <span class="badge badge-primary m-pulse-badge">Running</span>
                    {% elif h.status == "SUCCESS" %}
                      <span class="badge badge-success">Success</span>
                    {% elif h.status == "FAILURE" %}
                      <span class="badge badge-danger">Failed</span>
                    {% elif h.status == "DEAD" %}
                      <span class="badge badge-dark">Dead</span>
                    {% else %}
                      <span class="badge badge-info">{{ h.status }}</span>
                    {% endif %}
                  </td>
                  <td class="text-right">
                    <button class="btn btn-xs btn-outline-info" data-toggle="modal" data-target="#modal-{{ h.history_id }}">
                      View Logs
                    </button>
                    
                    <!-- Logs Modal -->
                    <div class="modal fade text-left" id="modal-{{ h.history_id }}" tabindex="-1" role="dialog" aria-hidden="true">
                      <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                        <div class="modal-content shadow-lg border-light">
                          <div class="modal-header pt-4 px-4 border-0">
                            <h5 class="modal-title font-weight-bold">
                              <i class="fas fa-terminal text-muted mr-2"></i>Logs: {{ h.command }} (ID: {{ h.history_id }})
                            </h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body px-4 pb-4">
                            <h6 class="text-muted small font-weight-bold text-uppercase mb-2">Parameters:</h6>
                            <pre class="bg-light p-3 border rounded mb-4"><small class="text-dark">{{ h.params }}</small></pre>
                            
                            <h6 class="text-muted small font-weight-bold text-uppercase mb-2">Standard Output (STDOUT):</h6>
                            <pre class="bg-dark text-light p-3 rounded mb-4" style="max-height: 220px; overflow-y: auto; font-family: var(--font-mono);"><small>{{ h.stdout|default:"(No output logs recorded)" }}</small></pre>
                            
                            <h6 class="text-muted small font-weight-bold text-uppercase mb-2">Standard Error (STDERR):</h6>
                            <pre class="bg-dark text-danger p-3 rounded mb-3" style="max-height: 220px; overflow-y: auto; font-family: var(--font-mono);"><small>{{ h.stderr|default:"(No execution errors recorded)" }}</small></pre>
                            
                            {% if h.exit_code is not None %}
                              <div class="mt-3 text-muted small">
                                <strong>Exit Code:</strong> <span class="badge badge-light border text-dark">{{ h.exit_code }}</span>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      </div>
                    </div>
                  </td>
                </tr>
              {% empty %}
                <tr>
                  <td colspan="7" class="text-center py-4 text-muted">No loader history records found.</td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .m-pulse-badge {
    animation: m-pulse-animation 1.5s infinite;
  }
  @keyframes m-pulse-animation {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
  }
  .btn-xs {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    border-radius: var(--radius-sm);
  }
</style>

<script>
  {% if any_running %}
  setInterval(function(){
      location.reload();
  }, 5000);
  {% endif %}
</script>
{% endblock %}