{% extends 'base.html' %}
{% load widget_tweaks %}

{% block conteudo %}
<div class="row mt-3">
  <div class="col">
    <div class="d-flex justify-content-between align-items-center mb-4">
      <div>
        <h3 class="mb-1">
          <i class="bi bi-list-task text-primary me-2"></i>
          Logs de Pré-análise de Processos
        </h3>
        <small class="text-muted">{{ total_logs }} registro{{ total_logs|pluralize }}</small>
      </div>
    </div>

    <div class="row mb-2">
      <div class="col-md-4 mb-2">
        <div class="card border-0">
          <div class="card-body text-center">
            <i class="bi bi-clock-history text-warning fs-3 mb-2"></i>
            <h5 class="card-title">{{ status_counts.iniciado }}</h5>
            <p class="card-text text-muted">Iniciado{{ status_counts.iniciado|pluralize }}</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-2">
        <div class="card border-0">
          <div class="card-body text-center">
            <i class="bi bi-check-circle-fill text-success fs-3 mb-2"></i>
            <h5 class="card-title">{{ status_counts.sucesso }}</h5>
            <p class="card-text text-muted">Sucesso{{ status_counts.sucesso|pluralize }}</p>
          </div>
        </div>
      </div>
      <div class="col-md-4 mb-2">
        <div class="card border-0">
          <div class="card-body text-center">
            <i class="bi bi-exclamation-circle-fill text-danger fs-3 mb-2"></i>
            <h5 class="card-title">{{ status_counts.erro }}</h5>
            <p class="card-text text-muted">Erro{{ status_counts.erro|pluralize }}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="card mb-4 border-0 shadow-sm">
      <div class="card-header bg-white border-0">
        <h6 class="mb-0">
          <i class="bi bi-funnel me-2"></i>
          Filtros
          <button class="btn btn-sm btn-outline-secondary float-end" type="button" data-bs-toggle="collapse"
            data-bs-target="#filtrosCollapse">
            <i class="bi bi-chevron-down"></i>
          </button>
        </h6>
      </div>
      <div class="collapse show" id="filtrosCollapse">
        <div class="card-body">
          <form method="get" class="row g-3">
            <div class="col-md-4">
              <label class="form-label">
                <i class="bi bi-search me-1"></i>
                Número do Processo
              </label>
              {{ filter.form.numero_processo }}
            </div>
            <div class="col-md-3">
              <label class="form-label">
                <i class="bi bi-flag me-1"></i>
                Status
              </label>
              {{ filter.form.status }}
            </div>
            <div class="col-md-5">
              <label class="form-label">
                <i class="bi bi-calendar-range me-1"></i>
                Período de Criação
              </label>
              <div class="row">
                <div class="col">
                  {{ filter.form.criado }}
                </div>
              </div>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">
                <i class="bi bi-search me-1"></i>
                Filtrar
              </button>
              <a href="{% url 'automacoes:seeu:pre_analise_processo_logs' %}" class="btn btn-outline-secondary">
                <i class="bi bi-x-circle me-1"></i>
                Limpar
              </a>
              <a href="{% url 'automacoes:seeu:pre_analise_processo' %}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left me-1"></i>
                Automação
              </a>
            </div>
          </form>
        </div>
      </div>
    </div>

    {% if logs %}
    <div class="card" style="border: none; border-radius: 5px">
      <table class="card-body table table-hover mb-0 bg-white" style="border-radius: 5px">
        <thead class="table-light">
          <tr>
            <th scope="col" class="border-0">
              Login
            </th>
            <th scope="col" class="border-0">
              Processo
            </th>
            <th scope="col" class="border-0">
              Status
            </th>
            <th scope="col" class="border-0">
              Observação
            </th>
            <th scope="col" class="border-0">
              Criado
            </th>
            <th scope="col" class="border-0">
              Modificado
            </th>
            <th scope="col" class="border-0 text-center">
              Ações
            </th>
          </tr>
        </thead>
        <tbody>
          {% for log in logs %}
          <tr class="align-middle">
            <td>
              <div class="d-flex align-items-center">
                <div>
                  <div class="fw-medium">{{ log.login }}</div>
                  <small class="text-muted">ID: {{ log.id }}</small>
                </div>
              </div>
            </td>
            <td>
              <div class="d-flex align-items-center">
                {% if log.numero_processo %}
                <div>
                  <div class="fw-medium">{{ log.numero_processo }}</div>
                </div>
                {% else %}
                <span class="text-muted">
                  <i class="bi bi-dash"></i>
                </span>
                {% endif %}
              </div>
            </td>
            <td>
              {% if log.status == log.Status.INICIADO %}
              <span class="badge bg-opacity-20 text-dark border border-warning border-opacity-50">
                <i class="bi bi-clock-history me-1 text-warning"></i>
                {{ log.status_display }}
              </span>
              {% elif log.status == log.Status.SUCESSO %}
              <span class="badge bg-opacity-20 text-dark border border-success border-opacity-50">
                <i class="bi bi-check-circle-fill me-1 text-success"></i>
                {{ log.status_display }}
              </span>
              {% elif log.status == log.Status.ERRO %}
              <span class="badge bg-opacity-20 text-dark border border-danger border-opacity-50">
                <i class="bi bi-exclamation-circle-fill me-1 text-danger"></i>
                {{ log.status_display }}
              </span>
              {% endif %}
            </td>
            <td>
              {% if log.observacao %}
              <div class="d-flex align-items-center">
                <div>
                  <div class="fw-medium " title="{{ log.observacao }}">
                    {{ log.observacao }}
                  </div>
                </div>
              </div>
              {% else %}
              <span class="text-muted">
                <i class="bi bi-dash"></i>
              </span>
              {% endif %}
            </td>
            <td>
              <div class="d-flex flex-column">
                <span class="fw-medium">{{ log.criado|date:'d/m/Y' }}</span>
                <small class="text-muted">{{ log.criado|date:'H:i:s' }}</small>
              </div>
            </td>
            <td>
              <div class="d-flex flex-column">
                <span class="fw-medium">{{ log.modificado|date:'d/m/Y' }}</span>
                <small class="text-muted">{{ log.modificado|date:'H:i:s' }}</small>
              </div>
            </td>
            <td class="text-center">
              <div class="dropdown">
                <button class="btn btn-sm btn-light dropdown-toggle" type="button" data-bs-toggle="dropdown"><i
                    class="bi bi-three-dots-vertical"></i></button>
                <ul class="dropdown-menu dropdown-menu-end">
                  <li>
                    <a class="dropdown-item" href="#">
                      <i class="bi bi-eye me-2"></i>
                      Visualizar
                    </a>
                  </li>
                  <li>
                    <a class="dropdown-item" href="#">
                      <i class="bi bi-arrow-clockwise me-2"></i>
                      Reprocessar
                    </a>
                  </li>
                  <li>
                    <hr class="dropdown-divider" />
                  </li>
                  <li>
                    <a class="dropdown-item text-danger" href="#">
                      <i class="bi bi-trash me-2"></i>
                      Excluir
                    </a>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if is_paginated %}
    <div class="card my-2">
      <div class="card-body pb-0">
        {% include 'includes/paginador.html' %}
      </div>
      <div class="card-footer">
        <div class="text-center">
          <small class="text-muted">
            Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}
            ({{ page_obj.start_index }}-{{ page_obj.end_index }} de {{ page_obj.paginator.count }} registros)
          </small>
        </div>
      </div>
    </div>
    {% endif %}
    {% else %}
    <div class="text-center py-5 bg-white shadow-sm rounded">
      <i class="bi bi-inbox display-4 text-muted mb-3"></i>
      <h5 class="text-muted">Nenhum log encontrado</h5>
      <p class="text-muted">Não há registros que correspondam aos filtros aplicados.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}