{% extends "base.html" %}

{% block content %}
<div class="dashboard-container dashboard-stack">

  <div class="detail-header">
    <div class="detail-crumbs">
      <a href="/">Dashboard</a> › Configs
    </div>
    <h1 style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
      Recon Configs
      <a href="/configs/new" class="btn btn-primary">+ New Config</a>
    </h1>
  </div>

  <div class="table-scroll" style="flex:1">
    <table class="data-table">
      <thead>
        <tr>
          <th>Reference</th>
          <th>Name</th>
          <th>Business Process</th>
          <th>Frequency</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for c in configs %}
        <tr>
          <td><code>{{ c.reference }}</code></td>
          <td>{{ c.name }}</td>
          <td>{{ c.business_process }}</td>
          <td>{{ c.frequency }}</td>
          <td>
            <span class="badge badge-config-{{ c.status }}">{{ c.status }}</span>
          </td>
          <td style="text-align:right">
            <a href="/configs/{{ c.reference }}/edit" class="btn btn-secondary btn-sm">Edit</a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="6" style="text-align:center; padding:40px; color:#64748b">
            No configs yet. <a href="/configs/new" style="color:var(--asb-yellow)">Create one.</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

</div>
{% endblock %}