{% extends "base.html" %}

{% block title %}{% if user %}Edit{% else %}Add{% endif %} Member - {{ lab_name }}{% endblock %}

{% block content %}
<div class="card" style="max-width: 600px; margin: 0 auto;">
    <div class="card-header">
        {% if user %}Edit Member{% else %}Add New Member{% endif %}
    </div>
    
    <form method="POST">
        <div class="form-group">
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" class="form-control" required
                   value="{% if user %}{{ user.name }}{% endif %}"
                   placeholder="Enter full name">
        </div>
        
        <div class="form-group">
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" class="form-control" required
                   value="{% if user %}{{ user.email }}{% endif %}"
                   placeholder="email@iisc.ac.in">
            {% if not user %}
            <small style="color: var(--text-light); display: block; margin-top: 0.5rem;">
                User will receive an activation email to set their password.
            </small>
            {% endif %}
        </div>
        
        <div class="form-group">
            <div class="checkbox-group">
                <input type="checkbox" id="is_admin" name="is_admin" 
                       {% if user and user.is_admin %}checked{% endif %}>
                <label for="is_admin" style="margin-bottom: 0;">Administrator Access</label>
            </div>
            <small style="color: var(--text-light); display: block; margin-top: 0.5rem;">
                Administrators can manage users, groups, and all content.
            </small>
        </div>
        
        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn btn-primary">
                {% if user %}Update Member{% else %}Add Member{% endif %}
            </button>
            <a href="{{ url_for('users') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}