<div class="mb-6">
  <a href="<%= base %>/jobs" class="text-sm text-gray-500 hover:text-gray-700 transition-colors">
    ← Back to jobs
  </a>
</div>

<div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6 mb-6">
  <div class="flex flex-wrap items-start justify-between gap-4">
    <div>
      <div class="flex items-center gap-3 mb-1">
        <h1 class="text-2xl font-bold text-gray-900">Job #<%= job.id %></h1>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= state_classes(job.state) %>">
          <%= job.state %>
        </span>
      </div>
      <p class="text-sm text-gray-500 font-mono"><%= job.worker %></p>
    </div>
  </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
  <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-widest mb-4">Details</h2>
    <dl class="space-y-3">
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Queue</dt>
        <dd class="text-gray-900"><%= job.queue %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Priority</dt>
        <dd class="text-gray-900"><%= job.priority %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Attempt</dt>
        <dd class="text-gray-900 tabular-nums"><%= job.attempt %>/<%= job.max_attempts %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Tags</dt>
        <dd class="text-gray-900"><%= Enum.join(job.tags, ", ") %></dd>
      </div>
    </dl>
  </div>

  <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
    <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-widest mb-4">Timestamps</h2>
    <dl class="space-y-3">
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Inserted</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.inserted_at) %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Scheduled</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.scheduled_at) %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Attempted</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.attempted_at) %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Completed</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.completed_at) %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Cancelled</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.cancelled_at) %></dd>
      </div>
      <div class="flex justify-between text-sm">
        <dt class="font-medium text-gray-500">Discarded</dt>
        <dd class="text-gray-900 tabular-nums"><%= format_dt(job.discarded_at) %></dd>
      </div>
    </dl>
  </div>
</div>

<div class="space-y-6">
  <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 bg-gray-50">
      <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-widest">Args</h2>
    </div>
    <pre class="px-5 py-4 text-sm text-gray-800 overflow-x-auto font-mono"><%= Jason.encode!(job.args, pretty: true) %></pre>
  </div>

  <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
      <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-widest">Errors</h2>
      <span class="text-xs text-gray-400"><%= length(job.errors) %></span>
    </div>
    <%= if job.errors == [] do %>
    <p class="px-5 py-4 text-sm text-gray-400">No errors.</p>
    <% else %>
    <div class="divide-y divide-gray-100">
      <%= for error <- job.errors do %>
      <details class="group">
        <summary class="flex items-center justify-between px-5 py-3 cursor-pointer hover:bg-gray-50 transition-colors">
          <span class="text-sm font-medium text-gray-700">
            Attempt <%= error["attempt"] %>
          </span>
          <span class="text-xs text-gray-400"><%= error["at"] %></span>
        </summary>
        <pre class="px-5 py-4 text-xs text-red-700 bg-red-50 overflow-x-auto font-mono border-t border-red-100"><%= error["error"] %></pre>
      </details>
      <% end %>
    </div>
    <% end %>
  </div>

  <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
    <div class="px-5 py-3 border-b border-gray-100 bg-gray-50">
      <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-widest">Meta</h2>
    </div>
    <pre class="px-5 py-4 text-sm text-gray-800 overflow-x-auto font-mono"><%= Jason.encode!(job.meta, pretty: true) %></pre>
  </div>
</div>