{% extends "base.html" %}
{% block content %}
{% set job_error = response_error(job) %}
{% set logs_error = response_error(logs) %}
{% set job_data = response_data(job) %}
{% set logs_data = response_data(logs) %}
<div class="w-full max-w-full space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">Idle Jobs</h1>
      <p class="mt-1 text-sm text-slate-500">
        <code class="text-cyan-400">octa_client.idle_jobs.find</code> + <code class="text-cyan-400">octa_client.idle_jobs.logs</code> — inspect a specific job by <code class="text-cyan-400">node_id</code> and <code class="text-cyan-400">job_id</code>.
      </p>
    </div>
    {% if playground_mock_active %}
      <div class="flex items-center gap-3">
        <span class="rounded bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">Mock: {{ playground_mock_scenario }}</span>
      </div>
    {% endif %}
  </div>

  <div class="rounded-xl border border-slate-800 bg-slate-900 p-5">
    <form action="/playground/idle-jobs" method="get" class="grid gap-4 md:grid-cols-[minmax(0,10rem)_minmax(0,10rem)_auto]">
      <div>
        <label class="mb-1.5 block text-[10px] font-medium uppercase tracking-wider text-slate-500">Node ID</label>
        <input type="text" name="node_id" value="{{ node_id }}" class="w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 font-mono text-xs text-slate-200 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500">
      </div>
      <div>
        <label class="mb-1.5 block text-[10px] font-medium uppercase tracking-wider text-slate-500">Job ID</label>
        <input type="text" name="job_id" value="{{ job_id }}" class="w-full rounded-md border border-slate-700 bg-slate-800 px-3 py-2 font-mono text-xs text-slate-200 focus:border-cyan-500 focus:outline-none focus:ring-1 focus:ring-cyan-500">
      </div>
      <div class="flex items-end">
        <button type="submit" class="rounded border border-cyan-500/20 bg-cyan-500/10 px-3 py-2 text-xs font-medium text-cyan-400 transition-colors hover:bg-cyan-500/20 hover:text-cyan-300">Load Job</button>
      </div>
    </form>
  </div>

  <div class="grid gap-6 lg:grid-cols-2">
    <div class="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="mb-4 flex items-center justify-between gap-4">
        <div>
          <h2 class="text-sm font-semibold text-slate-100">Status</h2>
          <code class="mt-0.5 text-[11px] text-cyan-500">octa_client.idle_jobs.find(node_id: {{ node_id }}, job_id: {{ job_id }})</code>
        </div>
      </div>

      {% if not requested %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-500">Enter a node ID and job ID to load the job.</div>
      {% elif job_error %}
        {% set error = job_error %}
        {% set max_height = "max-h-56" %}
        {% include "shared/error_card.html" %}
      {% elif job_data %}
        {% set data = job_data %}
        {% set max_height = "max-h-[28rem]" %}
        {% include "shared/json_viewer.html" %}
      {% else %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-500">No job response available.</div>
      {% endif %}
    </div>

    <div class="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="mb-4 flex items-center justify-between gap-4">
        <div>
          <h2 class="text-sm font-semibold text-slate-100">Logs</h2>
          <code class="mt-0.5 text-[11px] text-violet-400">octa_client.idle_jobs.logs(node_id: {{ node_id }}, job_id: {{ job_id }})</code>
        </div>
      </div>

      {% if not requested %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-500">Logs are loaded together with job details.</div>
      {% elif logs_error %}
        {% set error = logs_error %}
        {% set max_height = "max-h-56" %}
        {% include "shared/error_card.html" %}
      {% elif logs_data %}
        {% set data = logs_data %}
        {% set max_height = "max-h-[28rem]" %}
        {% include "shared/json_viewer.html" %}
      {% else %}
        <div class="rounded-lg border border-dashed border-slate-800 bg-slate-950/40 px-4 py-6 text-center text-sm text-slate-500">No log response available.</div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}