<%- include('../partials/header', { title }) %>

<div class="admin-page-head">
  <h2><%= member ? 'Edit Team Member' : 'Add Team Member' %></h2>
  <a href="/admin/team" class="btn btn-outline btn-sm">← Back to Team</a>
</div>

<form action="<%= member ? `/admin/team/${member.id}` : '/admin/team' %>" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_csrf" value="<%= csrfToken %>" />

  <div class="admin-form-grid">
    <div class="admin-panel">
      <h3>Profile</h3>
      <div class="field-row">
        <div class="field">
          <label for="name">Full name</label>
          <input id="name" name="name" type="text" required value="<%= member?.name || '' %>" data-slug-source="slug" />
        </div>
        <div class="field">
          <label for="slug">URL slug</label>
          <input id="slug" name="slug" type="text" value="<%= member?.slug || '' %>" />
        </div>
      </div>
      <div class="field">
        <label for="title">Title</label>
        <input id="title" name="title" type="text" required value="<%= member?.title || '' %>" placeholder="e.g. Managing Partner" />
      </div>
      <div class="field">
        <label for="bio">Biography <span class="hint">(blank lines become paragraph breaks)</span></label>
        <textarea id="bio" name="bio" rows="6"><%= member?.bio || '' %></textarea>
      </div>
      <div class="field">
        <label for="focusAreas">Focus areas <span class="hint">(comma separated)</span></label>
        <input id="focusAreas" name="focusAreas" type="text" value="<%= member?.focus_areas || '' %>" />
      </div>

      <div class="field-row">
        <div class="field">
          <label for="linkedinUrl">LinkedIn URL</label>
          <input id="linkedinUrl" name="linkedinUrl" type="url" placeholder="https://" value="<%= member?.linkedin_url || '' %>" />
        </div>
        <div class="field">
          <label for="twitterUrl">Twitter/X URL</label>
          <input id="twitterUrl" name="twitterUrl" type="url" placeholder="https://" value="<%= member?.twitter_url || '' %>" />
        </div>
      </div>
      <div class="field">
        <label for="websiteUrl">Website / external profile URL <span class="hint">(optional — use this for a personal site or a profile page that isn't LinkedIn/Twitter)</span></label>
        <input id="websiteUrl" name="websiteUrl" type="url" placeholder="https://" value="<%= member?.website_url || '' %>" />
      </div>
      <div class="field">
        <label for="email">Email <span class="hint">(optional)</span></label>
        <input id="email" name="email" type="email" value="<%= member?.email || '' %>" />
      </div>
    </div>

    <div>
      <div class="admin-panel">
        <h3>Publishing</h3>
        <div class="field">
          <label for="department">Department</label>
          <select id="department" name="department">
            <% ['leadership','investment','platform','operations'].forEach(function(d) { %>
              <option value="<%= d %>" <%= (member?.department || 'investment') === d ? 'selected' : '' %>><%= d %></option>
            <% }); %>
          </select>
        </div>
        <div class="field">
          <label for="sortOrder">Sort order</label>
          <input id="sortOrder" name="sortOrder" type="number" value="<%= member?.sort_order || 0 %>" />
        </div>
        <div class="checkbox-field">
          <input id="isActive" name="isActive" type="checkbox" value="1" <%= (member ? member.is_active : true) ? 'checked' : '' %> />
          <label for="isActive">Show on team page</label>
        </div>
      </div>

      <div class="admin-panel">
        <h3>Photo</h3>
        <div class="image-preview is-square" id="photo-preview">
          <% if (member?.photo_path) { %><img src="<%= member.photo_path %>" alt="" /><% } else { %><span>No photo</span><% } %>
        </div>
        <input type="file" name="photo" accept="image/*" data-image-input="photo-preview" />
      </div>
    </div>
  </div>

  <div class="form-sticky-actions">
    <button class="btn btn-primary" type="submit">Save Team Member</button>
    <a href="/admin/team" class="btn btn-outline">Cancel</a>
  </div>
</form>

<%- include('../partials/footer') %>
