{% extends "base.html" %}
{% block title %}Board of Directors · {{ portal_name }}{% endblock %}
{% block content %}

<div class="page-head board-head">
  <div>
    <h1>Board of Directors</h1>
    <p class="page-sub">Your elected representatives.</p>
  </div>
  {% if staff_ui %}
    <div class="board-tools">
      <span class="staff-flag">Staff only</span>
      <button type="button" class="btn" id="board-add">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 5v14"/><path d="M5 12h14"/></svg>
        Add member
      </button>
      <button type="button" class="btn ghost" id="board-reorder">
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg>
        Reorder
      </button>
    </div>
  {% endif %}
</div>

{% if members %}
<ul class="board-grid" id="board-grid">
  {% for member in members %}
    <li class="member-card{% if member.photo %} has-photo{% endif %}" data-id="{{ member.pk }}">
      {% if member.photo %}
        <div class="member-stage">
          <img class="member-photo" src="{% url 'documents:board_photo' member.pk %}" alt="Portrait of {{ member.name }}">
        </div>
      {% endif %}
      <div class="member-body">
        <h2 class="member-name">{{ member.name }}</h2>
        {% if member.title %}<p class="member-title">{{ member.title }}</p>{% endif %}
        {% if member.bio %}
          <div class="member-bio" id="bio-{{ member.pk }}">{{ member.bio_html }}</div>
        {% endif %}
        <div class="member-links">
          {% if member.bio %}
            <button type="button" class="bio-toggle" aria-expanded="false" aria-controls="bio-{{ member.pk }}">
              <span class="bt-label">Read the full profile</span>
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>
            </button>
          {% endif %}
          {% if member.contact_email %}
            <a class="member-mailto" href="mailto:{{ member.contact_email }}">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
              Contact
            </a>
          {% endif %}
        </div>
        {% if staff_ui %}
          <div class="member-admin">
            <button type="button" class="mini edit-member"
                    data-id="{{ member.pk }}" data-name="{{ member.name }}"
                    data-title="{{ member.title }}" data-email="{{ member.contact_email }}"
                    data-bio="{{ member.bio }}">Edit</button>
            <form method="post" action="{% url 'backoffice:board_remove' member.pk %}"
                  data-confirm="{{ member.name }} comes off the board. They stay in the removed list, so you can put them back at any time."
                  data-confirm-title="Remove {{ member.name }}?" data-confirm-action="Remove">
              {% csrf_token %}<button class="mini danger">Remove</button>
            </form>
          </div>
        {% endif %}
      </div>
    </li>
  {% endfor %}
</ul>
{% else %}
  <div class="empty-state">
    <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="8" r="4"/><path d="M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1"/></svg>
    <h2>No board members listed</h2>
    <p>{% if staff_ui %}Use <strong>Add member</strong> above to start.{% else %}Board members will appear here once they've been added.{% endif %}</p>
  </div>
{% endif %}

{% if staff_ui and removed %}
  <details class="removed-block">
    <summary class="more-toggle">Removed members ({{ removed|length }})</summary>
    <ul class="removed-list">
      {% for member in removed %}
        <li>
          <span class="rm-name">{{ member.name }}</span>
          <span class="muted small">removed {{ member.removed_at|date:"j M Y" }}</span>
          <form method="post" action="{% url 'backoffice:board_restore' member.pk %}">
            {% csrf_token %}<button class="mini">Put back</button>
          </form>
        </li>
      {% endfor %}
    </ul>
  </details>
{% endif %}

{% if staff_ui %}
<dialog id="member-dialog" class="sheet">
  <form method="post" enctype="multipart/form-data" id="member-form"
        action="{% url 'backoffice:board_add' %}">
    {% csrf_token %}
    <div class="sheet-head">
      <h2 id="member-heading">Add a board member</h2>
      <button type="button" class="sheet-close" data-close-sheet aria-label="Close">&times;</button>
    </div>
    <div class="sheet-body stack">
      <div class="batch-grid">
        <div class="field"><label for="m-name">Name</label>
          <input type="text" id="m-name" name="name" required></div>
        <div class="field"><label for="m-title">Role</label>
          <input type="text" id="m-title" name="title" placeholder="Chair, Director…"></div>
        <div class="field span-2"><label for="m-email">Contact email <span class="muted small">(optional — shown to owners)</span></label>
          <input type="email" id="m-email" name="contact_email"></div>
        <div class="field span-2"><label for="m-photo">Photo <span class="muted small">(optional)</span></label>
          <input type="file" id="m-photo" name="photo" accept="image/*"></div>
      </div>
      <div class="field">
        <label for="m-bio">Biography</label>
        <div class="editor">
          <div class="editor-bar" role="toolbar" aria-label="Formatting">
            <button type="button" data-cmd="bold" title="Bold"><strong>B</strong></button>
            <button type="button" data-cmd="italic" title="Italic"><em>I</em></button>
            <button type="button" data-cmd="insertUnorderedList" title="Bulleted list">&bull;</button>
            <button type="button" data-cmd="insertOrderedList" title="Numbered list">1.</button>
            <button type="button" data-cmd="removeFormat" title="Clear formatting">&times;</button>
          </div>
          <div class="editor-area" id="m-bio" contenteditable="true" role="textbox" aria-multiline="true"></div>
        </div>
        <input type="hidden" name="bio" id="m-bio-input">
      </div>
    </div>
    <div class="sheet-foot">
      <button type="submit" class="btn">Save member</button>
      <button type="button" class="btn ghost" data-close-sheet>Cancel</button>
    </div>
  </form>
</dialog>

<dialog id="reorder-dialog" class="sheet sheet-narrow">
  <div class="sheet-head">
    <h2>Reorder the board</h2>
    <button type="button" class="sheet-close" data-close-sheet aria-label="Close">&times;</button>
  </div>
  <div class="sheet-body">
    <p class="muted small">Drag a name to move it. This is the order owners see.</p>
    <ul class="reorder-list" id="reorder-list">
      {% for member in members %}
        <li class="reorder-row" draggable="true" data-id="{{ member.pk }}">
          <span class="grip" aria-hidden="true">
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M9 6h.01"/><path d="M9 12h.01"/><path d="M9 18h.01"/><path d="M15 6h.01"/><path d="M15 12h.01"/><path d="M15 18h.01"/></svg>
          </span>
          {% if member.photo %}
            <img class="rm-thumb" src="{% url 'documents:board_photo' member.pk %}" alt="">
          {% else %}
            <span class="rm-thumb member-initials">{{ member.name|slice:":1" }}</span>
          {% endif %}
          <span class="rm-name">{{ member.name }}</span>
        </li>
      {% endfor %}
    </ul>
  </div>
  <div class="sheet-foot">
    <button type="button" class="btn" id="reorder-save">Save order</button>
    <button type="button" class="btn ghost" data-close-sheet>Cancel</button>
    <span class="muted small" id="reorder-status"></span>
  </div>
</dialog>
{% endif %}

<script>
(function () {
  const $ = id => document.getElementById(id);
  document.querySelectorAll('[data-close-sheet]').forEach(b =>
    b.addEventListener('click', () => b.closest('dialog').close()));
  document.querySelectorAll('dialog.sheet').forEach(d =>
    d.addEventListener('click', e => { if (e.target === d) d.close(); }));

  /* Excerpt-to-full: the clamp is CSS; the button just flips it. A bio short
     enough to fit inside the clamp gets no button — nothing is hidden. */
  document.querySelectorAll('.bio-toggle').forEach(btn => {
    const card = btn.closest('.member-card');
    const bio = card.querySelector('.member-bio');
    if (bio && bio.scrollHeight <= bio.clientHeight + 8) { btn.hidden = true; return; }
    btn.addEventListener('click', () => {
      const open = card.classList.toggle('is-open');
      btn.setAttribute('aria-expanded', open ? 'true' : 'false');
      btn.querySelector('.bt-label').textContent = open ? 'Show less' : 'Read the full profile';
    });
  });

  {% if staff_ui %}
  const dlg = $('member-dialog'), form = $('member-form');
  const area = $('m-bio'), hidden = $('m-bio-input');

  function openMember(data) {
    $('member-heading').textContent = data ? 'Edit board member' : 'Add a board member';
    form.action = data
      ? '{% url "backoffice:board_save" 0 %}'.replace(/0\/save\/$/, data.id + '/save/')
      : '{% url "backoffice:board_add" %}';
    $('m-name').value  = data && data.name  ? data.name  : '';
    $('m-title').value = data && data.title ? data.title : '';
    $('m-email').value = data && data.email ? data.email : '';
    area.innerHTML     = data && data.bio   ? data.bio   : '';
    $('m-photo').value = '';
    dlg.showModal();
    $('m-name').focus();
  }
  $('board-add').addEventListener('click', () => openMember(null));
  document.querySelectorAll('.edit-member').forEach(b =>
    b.addEventListener('click', () => openMember(Object.assign({}, b.dataset))));

  document.querySelectorAll('.editor-bar button').forEach(b =>
    b.addEventListener('click', () => { area.focus(); document.execCommand(b.dataset.cmd, false, null); }));
  form.addEventListener('submit', () => { hidden.value = area.innerHTML; });

  const rdlg = $('reorder-dialog'), list = $('reorder-list');
  $('board-reorder').addEventListener('click', () => rdlg.showModal());
  let held = null;
  if (list) {
    list.addEventListener('dragstart', e => {
      held = e.target.closest('.reorder-row');
      if (held) held.classList.add('is-held');
      e.dataTransfer.effectAllowed = 'move';
    });
    list.addEventListener('dragend', () => { if (held) held.classList.remove('is-held'); held = null; });
    list.addEventListener('dragover', e => {
      e.preventDefault();
      const over = e.target.closest('.reorder-row');
      if (!over || !held || over === held) return;
      const box = over.getBoundingClientRect();
      list.insertBefore(held, (e.clientY - box.top) / box.height > .5 ? over.nextSibling : over);
    });
  }
  $('reorder-save').addEventListener('click', async () => {
    const order = [...list.querySelectorAll('.reorder-row')].map(r => r.dataset.id);
    $('reorder-status').textContent = 'Saving…';
    try {
      const res = await fetch('{% url "backoffice:board_reorder" %}', {
        method: 'POST',
        headers: { 'X-CSRFToken': form.querySelector('[name=csrfmiddlewaretoken]').value,
                   'Content-Type': 'application/json' },
        body: JSON.stringify({ order: order }),
      });
      if (!res.ok) throw new Error();
      window.location.reload();
    } catch (err) { $('reorder-status').textContent = 'Could not save — please try again.'; }
  });
  {% endif %}
})();
</script>
{% endblock %}