{% extends "base.html" %}

{% block title %}Team-Members{% endblock %}

{% block content %}
<div class="row mb-4">
  <div class="col">
    <h1 class="mb-3">
      <span style="font-size: 2rem;">👥</span> Team-Members
    </h1>
    <p class="text-muted">
      Verwalte die registrierten Team-Mitglieder des Diversity-Ball Wien 2026. 
      Das Self-Learning System lernt automatisch neue Absender kennen.
    </p>
  </div>
</div>

{% if team_members %}
<div class="row">
  {% for member in team_members %}
  <div class="col-md-6 col-lg-4 mb-4">
    <div class="card h-100">
      <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
          <h5 class="card-title mb-0">{{ member.name }}</h5>
          {% if member.active %}
          <span class="badge bg-success">Aktiv</span>
          {% else %}
          <span class="badge bg-secondary">Inaktiv</span>
          {% endif %}
        </div>
        
        <h6 class="text-muted mb-3">{{ member.role }}</h6>
        
        <div class="mb-3">
          <small class="text-muted d-block mb-1">Email:</small>
          <a href="mailto:{{ member.email }}" class="text-decoration-none">
            {{ member.email }}
          </a>
        </div>
        
        <div class="mb-3">
          <small class="text-muted d-block mb-1">Aufgaben:</small>
          <p class="small mb-0" style="white-space: pre-line;">{{ member.responsibilities }}</p>
        </div>
        
        {% if member.telegram_id %}
        <div class="mb-2">
          <small class="text-muted">📱 Telegram: {{ member.telegram_id }}</small>
        </div>
        {% endif %}
        
        <div class="text-muted small">
          <small>Erstellt: {{ member.created_at }}</small>
        </div>
      </div>
      
      <div class="card-footer bg-transparent border-top-0">
        <div class="d-flex gap-2">
          <button class="btn btn-sm btn-outline-primary" onclick="editMember({{ member.id }})">
            ✏️ Bearbeiten
          </button>
          {% if member.active %}
          <button class="btn btn-sm btn-outline-warning" onclick="deactivateMember({{ member.id }})">
            🚫 Deaktivieren
          </button>
          {% else %}
          <button class="btn btn-sm btn-outline-success" onclick="activateMember({{ member.id }})">
            ✅ Aktivieren
          </button>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="alert alert-info">
  <strong>ℹ️ Keine Team-Members gefunden</strong><br>
  Das Self-Learning System wird automatisch Team-Members hinzufügen, wenn neue Absender Emails senden.
</div>
{% endif %}

<div class="row mt-4">
  <div class="col">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title mb-3">➕ Neues Team-Mitglied hinzufügen</h5>
        <form method="POST" action="/team/add">
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Name</label>
              <input type="text" class="form-control" name="name" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Email</label>
              <input type="email" class="form-control" name="email" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Rolle</label>
              <input type="text" class="form-control" name="role" required>
            </div>
            <div class="col-md-6">
              <label class="form-label">Telegram Chat ID (optional)</label>
              <input type="text" class="form-control" name="telegram_chat_id" placeholder="z.B. 123456789">
            </div>
            <div class="col-12">
              <label class="form-label">Aufgaben / Verantwortlichkeiten</label>
              <textarea class="form-control" name="responsibilities" rows="3" required></textarea>
            </div>
            <div class="col-12">
              <button type="submit" class="btn btn-primary">
                ➕ Team-Member hinzufügen
              </button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">✏️ Team-Member bearbeiten</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" action="/team/edit" id="editForm">
        <div class="modal-body">
          <input type="hidden" name="member_id" id="edit_member_id">
          
          <div class="mb-3">
            <label class="form-label">Name</label>
            <input type="text" class="form-control" name="name" id="edit_name" required>
          </div>
          
          <div class="mb-3">
            <label class="form-label">Email</label>
            <input type="email" class="form-control" name="email" id="edit_email" required>
          </div>
          
          <div class="mb-3">
            <label class="form-label">Rolle</label>
            <input type="text" class="form-control" name="role" id="edit_role" required>
          </div>
          
          <div class="mb-3">
            <label class="form-label">Telegram Chat ID (optional)</label>
            <input type="text" class="form-control" name="telegram_chat_id" id="edit_telegram_id" placeholder="z.B. 123456789">
          </div>
          
          <div class="mb-3">
            <label class="form-label">Aufgaben / Verantwortlichkeiten</label>
            <textarea class="form-control" name="responsibilities" id="edit_responsibilities" rows="4" required></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
          <button type="submit" class="btn btn-primary">💾 Speichern</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
// Team member data for editing
const teamMembers = {{ team_members | tojson }};

function editMember(id) {
  const member = teamMembers.find(m => m.id === id);
  if (!member) {
    alert('Team-Member nicht gefunden');
    return;
  }
  
  // Fill form
  document.getElementById('edit_member_id').value = member.id;
  document.getElementById('edit_name').value = member.name;
  document.getElementById('edit_email').value = member.email;
  document.getElementById('edit_role').value = member.role;
  document.getElementById('edit_telegram_id').value = member.telegram_id || '';
  document.getElementById('edit_responsibilities').value = member.responsibilities;
  
  // Show modal
  const modal = new bootstrap.Modal(document.getElementById('editModal'));
  modal.show();
}

function deactivateMember(id) {
  if (confirm('Team-Member wirklich deaktivieren?')) {
    fetch(`/team/${id}/deactivate`, { method: 'POST' })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          location.reload();
        } else {
          alert('Fehler: ' + data.error);
        }
      });
  }
}

function activateMember(id) {
  if (confirm('Team-Member wieder aktivieren?')) {
    fetch(`/team/${id}/activate`, { method: 'POST' })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          location.reload();
        } else {
          alert('Fehler: ' + data.error);
        }
      });
  }
}
</script>

{% endblock %}