{% extends "admin/base_admin.html" %}
{% block page_title %}Practice Areas{% endblock %}

{% block admin_content %}
<div class="admin-card">
  <h2>Add Practice Area</h2>
  <form class="admin-form" method="POST" enctype="multipart/form-data">
    <div class="form-grid">
      <div class="field"><label>Title</label><input type="text" name="title" placeholder="e.g. Industrial Case" required></div>
      <div class="field"><label>Display Order</label><input type="number" name="order" value="0"></div>
    </div>
    <div class="field">
      <label>Cover Photo / Image (optional)</label>
      <input type="file" name="image" accept="image/*">
    </div>
    <div class="field"><label>Description</label><textarea name="description" rows="3"></textarea></div>
    <button type="submit" class="btn btn-primary">Add Practice Area</button>
  </form>
</div>

<div class="admin-card">
  <h2>Existing Practice Areas</h2>
  <table class="admin-table">
    <thead><tr><th>#</th><th>Image</th><th>Title</th><th>Description</th><th></th></tr></thead>
    <tbody>
      {% for item in items %}
      <tr>
        <td>{{ item.order }}</td>
        <td>
          {% if item.image_path %}
            <img src="{{ url_for('static', filename=item.image_path) }}" style="width: 50px; height: 50px; object-fit: cover; border-radius: 6px;">
          {% else %}
            <span style="color:#aaa;">No image</span>
          {% endif %}
        </td>
        <td>{{ item.title }}</td>
        <td>{{ item.description }}</td>
        <td>
          <form method="POST" action="{{ url_for('admin.delete_practice_area', item_id=item.id) }}" onsubmit="return confirm('Delete this practice area?')">
            <button class="btn btn-sm btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="5">No practice areas added yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}