{% extends "admin/base_admin.html" %}
{% block page_title %}Our Team{% endblock %}

{% block admin_content %}
<div class="admin-card">
  <h2>Add Team Member</h2>
  <form class="admin-form" method="POST" enctype="multipart/form-data">
    <div class="field">
      <label>Photo</label>
      <img class="preview-thumb round" id="team-preview" style="display:none">
      <input type="file" name="photo" accept="image/*" data-preview="#team-preview">
    </div>
    <div class="form-grid">
      <div class="field"><label>Full Name</label><input type="text" name="name" required></div>
      <div class="field"><label>Short Title</label><input type="text" name="title" placeholder="e.g. Senior Advocate"></div>
    </div>
    <div class="form-grid">
      <div class="field"><label>Phone Number</label><input type="tel" name="phone" placeholder="e.g. +977-9800000000"></div>
      <div class="field" style="max-width:160px;"><label>Display Order</label><input type="number" name="order" value="0"></div>
    </div>
    <div class="field"><label>Short Description / Bio</label><textarea name="bio" rows="3"></textarea></div>
    <button type="submit" class="btn btn-primary">Add Team Member</button>
  </form>
</div>

<div class="admin-card">
  <h2>Existing Team Members</h2>
  <table class="admin-table">
    <thead><tr><th>Photo</th><th>Name</th><th>Title</th><th>Phone</th><th></th></tr></thead>
    <tbody>
      {% for m in members %}
      <tr>
        <td>{% if m.photo_path %}<img class="thumb" src="{{ url_for('static', filename=m.photo_path) }}">{% else %}—{% endif %}</td>
        <td>{{ m.name }}</td>
        <td>{{ m.title }}</td>
        <td>{{ m.phone or "—" }}</td>
        <td>
          <form method="POST" action="{{ url_for('admin.delete_team_member', member_id=m.id) }}" onsubmit="return confirm('Delete this member?')">
            <button class="btn btn-sm btn-danger" type="submit">Delete</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="5">No team members added yet.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}