{% extends "botapp/base.html" %}

{% block title %}Pipeline {{ pipeline.external_id }} | CI{% endblock %}

{% block content %}
<div class="space-y-6">

  <div class="flex items-end justify-between flex-wrap gap-4">
    <div>
      <h1 class="text-xl sm:text-2xl font-bold tracking-tight text-slate-100">
        <i class="bi bi-play-circle text-sky-400"></i> Pipeline #{{ pipeline.external_id }}
      </h1>
      <p class="text-slate-400 mt-1 text-sm">
        <a class="text-sky-400 hover:underline" href="{% url 'ci_project_detail' pipeline.project.id %}">{{ pipeline.project.path }}</a>
        · {{ pipeline.source|default:"origem desconhecida" }} · {{ pipeline.ref }}
      </p>
    </div>
    <div class="flex items-center gap-2 flex-wrap">
      {% if jobs %}
      <button type="button" class="btn-ghost whitespace-nowrap"
              data-pipeline="{{ pipeline.id }}"
              data-rotulo="Pipeline #{{ pipeline.external_id }} · {{ pipeline.project.path }}"
              onclick="abrirLogsPipeline(this)">
        <i class="bi bi-file-text"></i> Ver logs
      </button>
      {% endif %}
      {% if pipeline.web_url %}<a href="{{ pipeline.web_url }}" target="_blank" rel="noopener" class="btn-ghost whitespace-nowrap"><i class="bi bi-box-arrow-up-right"></i> Abrir no CI</a>{% endif %}
      <a href="{% url 'ci_project_detail' pipeline.project.id %}" class="btn-ghost whitespace-nowrap"><i class="bi bi-arrow-left"></i> Projeto</a>
    </div>
  </div>

  {% if pipeline.has_masked_error %}
  <div class="fx-header rounded-xl p-4 border-l-4 border-amber-500">
    <div class="text-sm text-amber-300 font-semibold">
      <i class="bi bi-exclamation-triangle-fill"></i> Sucesso com erro no log
    </div>
    <p class="text-xs text-slate-300 mt-1">
      O pipeline terminou com status de sucesso, mas o log contém padrão de
      erro. Confira o log antes de considerar a execução concluída.
    </p>
  </div>
  {% endif %}

  <div class="fx-header rounded-xl overflow-hidden">
    <div class="px-4 py-3 border-b border-slate-700">
      <h2 class="font-semibold text-slate-100"><i class="bi bi-cpu"></i> Jobs</h2>
    </div>
    <div class="overflow-x-auto">
      <table class="fx-table w-full text-sm">
        <thead><tr>
          <th class="text-left">Job</th><th class="text-left">Stage</th>
          <th class="text-left">Status</th><th class="text-left">Runner</th>
          <th class="text-left">Duração</th><th class="text-left">Log</th>
        </tr></thead>
        <tbody>
          {% for j in jobs %}
          <tr>
            <td>
              {{ j.name }}
              {% if j.matched_pattern %}<span class="text-amber-400 text-xs" title="padrão encontrado">({{ j.matched_pattern }})</span>{% endif %}
            </td>
            <td class="text-slate-400">{{ j.stage|default:"—" }}</td>
            <td>{% if j.status == 'success' %}<span class="text-emerald-400">success</span>{% else %}<span class="text-red-400">{{ j.status }}</span>{% endif %}</td>
            <td class="text-slate-400">{{ j.runner_description|default:"—" }}</td>
            <td class="text-slate-400">{{ j.duration|default:"—" }}</td>
            <td>
              <div class="flex gap-2 flex-wrap items-center">
                <button type="button" class="btn-ghost text-xs py-1 whitespace-nowrap"
                        data-pipeline="{{ pipeline.id }}" data-job="{{ j.id }}"
                        data-rotulo="Pipeline #{{ pipeline.external_id }} · {{ j.name }}"
                        onclick="abrirLogsPipeline(this)">
                  <i class="bi bi-file-text"></i> Ver log
                </button>
                <a class="text-slate-400 hover:underline text-xs" target="_blank" rel="noopener"
                   href="{% url 'ci_job_log' j.id %}">abrir em aba</a>
                {% if j.log_excerpt %}<a class="text-slate-400 hover:underline text-xs" target="_blank" rel="noopener" href="{% url 'ci_job_excerpt' j.id %}">cauda guardada</a>{% endif %}
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="6" class="text-slate-400 py-4 text-center">Nenhum job.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    <p class="px-4 py-3 text-xs text-slate-500 border-t border-slate-700">
      Log carregado do servidor de CI a cada abertura. Trate o conteúdo como
      informação restrita.
    </p>
  </div>

  {% include "botapp/_ci_log_modal.html" %}

</div>
{% endblock %}