{% extends "admin/base_admin.html" %}
{% block page_title %}About Us Values{% endblock %}

{% block admin_content %}
<div class="admin-card">
  <h2>Add Value</h2>
  <form class="admin-form" method="POST">
    <div class="form-grid">
      <div class="field"><label>Title</label><input type="text" name="title" placeholder="e.g. Integrity" required></div>
      <div class="field"><label>Display Order</label><input type="number" name="order" value="0"></div>
    </div>
    <div class="field"><label>Description</label><textarea name="description" rows="3"></textarea></div>
    <button type="submit" class="btn btn-primary">Add Value</button>
  </form>
</div>

<div class="admin-card">
  <h2>Existing Values ({{ items|length }})</h2>
  <p style="color:var(--gray); font-size:13.5px; margin-top:-10px;">The About Us page is designed to feature 3 core values.</p>
  <table class="admin-table">
    <thead><tr><th>#</th><th>Title</th><th>Description</th><th></th></tr></thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ item.order }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.description }}</td>
        <td>
          <form method="POST" action="{{ url_for('admin.delete_value', item_id=item.id) }}" onsubmit="return confirm('Delete this value?')">
            <button class="btn btn-sm btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="4">No values added yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}