{% extends 'admin/master.html' %}

{% block body %}
<style>
  .project-header {
    margin: 16px 0 24px 0;
    padding: 16px 20px;
    background: var(--surface-subtle, #f1f5f9);
    border-left: 4px solid #2563eb;
    border-radius: 4px;
    color: var(--surface-text, inherit);
  }
  .project-header h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
  }
  .project-header .meta {
    color: var(--surface-muted, #475569);
    font-size: 13px;
  }
  .project-header .description {
    margin-top: 8px;
    color: var(--surface-text, #334155);
  }
  .project-section {
    margin-bottom: 24px;
    border: 1px solid var(--surface-border, #e2e8f0);
    border-radius: 4px;
    background: var(--surface-bg, #fff);
    color: var(--surface-text, inherit);
    overflow: hidden;
  }
  .project-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--surface-subtle, #f8fafc);
    border-bottom: 1px solid var(--surface-border, #e2e8f0);
  }
  .project-section-head h3 {
    margin: 0;
    font-size: 16px;
  }
  .project-section-head h3 .fa {
    color: var(--surface-muted, #64748b);
    margin-right: 8px;
  }
  .project-section-head .desc {
    color: var(--surface-muted, #64748b);
    font-size: 12px;
    margin-top: 2px;
  }
  .project-section-head .actions { white-space: nowrap; }
  .project-rules {
    width: 100%;
    border-collapse: collapse;
  }
  .project-rules th, .project-rules td {
    padding: 8px 16px;
    text-align: left;
    border-bottom: 1px solid var(--surface-divider, #f1f5f9);
    vertical-align: middle;
  }
  .project-rules th {
    background: var(--surface-subtle, #fafbfc);
    font-size: 12px;
    color: var(--surface-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .project-rules tr:last-child td { border-bottom: none; }
  .project-rules td { vertical-align: top; }
  .project-rules .badge-disabled {
    background: #cbd5e1;
    color: #1e293b;
  }
  .project-empty {
    padding: 16px;
    color: var(--surface-muted, #94a3b8);
    font-style: italic;
    text-align: center;
  }
  /* Condition / outcome chips — theme-aware via surface tokens. */
  .rule-chips { display: flex; flex-wrap: wrap; gap: 4px; }
  .rule-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.4;
    padding: 1px 6px;
    border-radius: 3px;
    border: 1px solid var(--surface-border, #e2e8f0);
    background: var(--surface-subtle, #f8fafc);
    color: var(--surface-text, #334155);
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rule-chip .k { font-family: monospace; font-weight: 600; }
  .rule-chip .m { color: var(--surface-muted, #64748b); font-style: italic; }
  .rule-chip .v { font-family: monospace; }
  .rule-chip-more {
    font-size: 11px;
    color: var(--surface-muted, #94a3b8);
    align-self: center;
  }
  .rule-none { color: var(--surface-muted, #94a3b8); font-size: 12px; }
  /* Status badge rendered as a toggle button. */
  .rule-toggle { border: none; cursor: pointer; font-size: 100%; font-weight: normal; }
  .rule-toggle:hover { filter: brightness(0.92); }
</style>

<div class="project-header">
  <h2>{{ project.name }}</h2>
  <div class="meta">
    {% if project.enabled %}
      <span class="badge badge-success">enabled</span>
    {% else %}
      <span class="badge badge-secondary">disabled</span>
    {% endif %}
    &middot; provider:
    <code>{% if project.name == 'Default' %}ansible{% else %}{{ project.name }}{% endif %}</code>
    &middot;
    <a href="{{ url_for('ansibleproject.edit_view', id=project.pk) }}">Edit project</a>
    &middot;
    <a href="{{ url_for('ansibleproject.index_view') }}">Back to all projects</a>
  </div>
  {% if project.description %}
  <div class="description">{{ project.description }}</div>
  {% endif %}
  {% if seed_templates %}
  <div style="margin-top:12px;">
    <span class="text-muted" style="font-size:12px; margin-right:6px;">Seed starter rules:</span>
    {% for tpl in seed_templates %}
    <form method="POST"
          action="{{ url_for('ansibleproject.seed_rules', project_id=project.pk, seed_key=tpl.key) }}"
          style="display:inline;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="btn btn-sm btn-outline-primary"
              title="Create a ready-made set of rules (idempotent — existing rules are kept)">
        <i class="fa fa-magic"></i> {{ tpl.label }}
      </button>
    </form>
    {% endfor %}
  </div>
  {% endif %}
</div>

{% set return_url = url_for('ansibleproject.project_detail', project_id=project.pk) %}

{% for section in sections %}
<div class="project-section">
  <div class="project-section-head">
    <div>
      <h3><i class="fa {{ section.icon }}"></i>{{ section.title }}</h3>
      <div class="desc">{{ section.description }}</div>
    </div>
    <div class="actions">
      <a class="btn btn-sm btn-outline-secondary"
         href="{{ url_for(section.endpoint ~ '.index_view') }}"
         title="Open the full cross-project list view">
        <i class="fa fa-list"></i> All
      </a>
      <a class="btn btn-sm btn-primary"
         href="{{ url_for(section.endpoint ~ '.create_view',
                          project=project.pk,
                          url=return_url) }}">
        <i class="fa fa-plus"></i> New
      </a>
    </div>
  </div>

  {% if section.rules %}
  <table class="project-rules">
    <thead>
      <tr>
        <th style="width:24%;">Name</th>
        <th style="width:34%;">Conditions</th>
        <th style="width:34%;">Outcomes</th>
        <th style="width:8%;">Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for row in section.rules %}
      {% set rule = row.obj %}
      <tr>
        <td>
          <a href="{{ url_for(section.endpoint ~ '.edit_view',
                              id=rule.pk,
                              url=return_url) }}">
            {{ rule.name or '(unnamed)' }}
          </a>
          {% if rule.documentation %}
            <div class="text-muted" style="font-size:12px;">
              {{ rule.documentation[:120] }}{% if rule.documentation|length > 120 %}…{% endif %}
            </div>
          {% endif %}
        </td>
        <td>
          <div style="margin-bottom:4px;">
            <span class="badge badge-{{ row.conditions.typ_css }}">{{ row.conditions.typ }}</span>
          </div>
          {% if row.conditions.chips %}
          <div class="rule-chips">
            {% for cond in row.conditions.chips %}
            <span class="rule-chip" title="{{ cond.key }} {{ cond.match }} {{ cond.value }}">
              <span class="k">{{ cond.key }}</span>
              <span class="m">{{ cond.match }}</span>
              {% if cond.value %}<span class="v">{{ cond.value }}</span>{% endif %}
            </span>
            {% endfor %}
          </div>
          {% else %}
          <span class="rule-none">matches every host</span>
          {% endif %}
        </td>
        <td>
          {% if row.outcomes %}
          <div class="rule-chips">
            {% for outcome in row.outcomes %}
            <span class="rule-chip" title="{{ outcome }}">{{ outcome }}</span>
            {% endfor %}
            {% if row.outcomes_overflow %}
            <span class="rule-chip-more">+{{ row.outcomes_overflow }} more</span>
            {% endif %}
          </div>
          {% else %}
          <span class="rule-none">—</span>
          {% endif %}
        </td>
        <td>
          <form method="POST" style="display:inline;"
                action="{{ url_for('ansibleproject.toggle_rule', kind=section.kind, rule_id=rule.pk) }}">
            <input type="hidden" name="url" value="{{ return_url }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            {% if rule.enabled %}
            <button type="submit" class="badge badge-success rule-toggle"
                    title="Click to disable this rule">enabled</button>
            {% else %}
            <button type="submit" class="badge badge-disabled rule-toggle"
                    title="Click to enable this rule">disabled</button>
            {% endif %}
          </form>
          <div class="text-muted" style="font-size:11px; margin-top:2px;">order {{ rule.sort_field }}</div>
        </td>
        <td style="text-align:right; white-space:nowrap;">
          <a class="btn btn-sm btn-outline-secondary"
             href="{{ url_for(section.endpoint ~ '.edit_view',
                              id=rule.pk, url=return_url) }}"
             title="Edit rule">
            <i class="fa fa-pencil"></i>
          </a>
          <form method="POST" style="display:inline;"
                action="{{ url_for(section.endpoint ~ '.delete_view') }}"
                onsubmit="return confirm('Delete rule &quot;{{ rule.name }}&quot;? This cannot be undone.');">
            <input type="hidden" name="id" value="{{ rule.pk }}">
            <input type="hidden" name="url" value="{{ return_url }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete rule">
              <i class="fa fa-trash"></i>
            </button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="project-empty">No {{ section.title|lower }} in this project yet.</div>
  {% endif %}
</div>
{% endfor %}
{% endblock %}