{% extends "base.html" %}
{% block title %}Merge Member — {{ source }}{% endblock %}

{% block content %}
<h3><i class="bi bi-people"></i> Merge Member</h3>
<p class="text-muted">Club: <strong>{{ club.name }}</strong></p>

<div class="card mb-4" style="max-width: 520px;">
  <div class="card-body">
    <p>Merging <strong>{{ source }}</strong> into the selected member will:</p>
    <ul>
      <li>Copy any non-empty fields from <strong>{{ source }}</strong> into the target where the target field is empty.</li>
      <li>Merge roles from <strong>{{ source }}</strong> into the target.</li>
      <li>Remove <strong>{{ source }}</strong> from the club (soft-delete).</li>
    </ul>

    <form method="post">
      {% csrf_token %}
      <div class="mb-3">
        <label for="target" class="form-label">Merge <strong>{{ source }}</strong> into:</label>
        <select class="form-select" id="target" name="target" required>
          <option value="">— Select a member —</option>
          {% for other in others %}
          <option value="{{ other.pk }}">{{ other }}{% if other.email %} ({{ other.email }}){% endif %}</option>
          {% endfor %}
        </select>
      </div>
      <div class="alert alert-warning">
        <i class="bi bi-exclamation-triangle me-1"></i>
        This action cannot be undone.
      </div>
      <div class="d-flex gap-2">
        <a href="{% url 'club_admin' club.slug %}" class="btn btn-secondary">Cancel</a>
        <button type="submit" class="btn btn-danger"><i class="bi bi-people me-1"></i>Merge</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}