{% 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 .badge-disabled {
    background: #cbd5e1;
    color: #1e293b;
  }
  .project-empty {
    padding: 16px;
    color: var(--surface-muted, #94a3b8);
    font-style: italic;
    text-align: center;
  }
</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 %}
</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>Name</th>
        <th>Status</th>
        <th>Order</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for rule in section.rules %}
      <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>
          {% if rule.enabled %}
            <span class="badge badge-success">enabled</span>
          {% else %}
            <span class="badge badge-disabled">disabled</span>
          {% endif %}
        </td>
        <td>{{ rule.sort_field }}</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) }}">
            <i class="fa fa-pencil"></i>
          </a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="project-empty">No {{ section.title|lower }} in this project yet.</div>
  {% endif %}
</div>
{% endfor %}
{% endblock %}