{% extends "base.html" %}
{% load static %}

{% block title %}Create Team{% endblock %}

{% block content %}
<div class="container mt-4" data-testid="team-create-page">

    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'index' %}">Home</a></li>
            <li class="breadcrumb-item"><a href="/teams/">Teams</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create Team</li>
        </ol>
    </nav>

    <div class="row justify-content-center">
        <div class="col-12 col-lg-7">
            <h2 class="mb-1"><i class="fa-solid fa-users-plus me-2"></i>Create Team</h2>
            <p class="text-muted mb-4">Organise your professional network and share playbooks with the right collaborators.</p>

            <form method="post" action="." data-testid="team-create-form" novalidate>
                {% csrf_token %}

                <!-- Team Name -->
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="team-name">
                        Team Name <span class="text-danger" aria-hidden="true">*</span>
                    </label>
                    <input type="text"
                           id="team-name"
                           class="form-control {% if errors.name %}is-invalid{% endif %}"
                           name="name"
                           maxlength="100"
                           placeholder="e.g. UX, Front-End Guild, Acme INC"
                           value="{{ form_data.name|default:'' }}"
                           data-testid="team-name-input"
                           data-bs-toggle="tooltip"
                           title="Unique name for this team. Max 100 characters."
                           aria-required="true"
                           aria-describedby="team-name-error team-name-hint">
                    {% if errors.name %}
                    <div id="team-name-error" class="invalid-feedback" data-testid="team-name-error">
                        {{ errors.name }}
                    </div>
                    {% endif %}
                    <div id="team-name-hint" class="form-text mt-1">
                        <small class="text-muted">Must be unique across all teams.</small>
                    </div>
                </div>

                <!-- Description -->
                <div class="mb-3">
                    <label class="form-label fw-semibold" for="team-description">Description</label>
                    <textarea id="team-description"
                              class="form-control"
                              name="description"
                              rows="3"
                              placeholder="What is this team about? What methodologies do you focus on?"
                              data-testid="team-description-input"
                              data-bs-toggle="tooltip"
                              title="Optional description shown on the team card and detail page."
                              aria-describedby="description-hint">{{ form_data.description|default:'' }}</textarea>
                    <div id="description-hint" class="form-text">
                        Shown on the team card and detail page.
                    </div>
                </div>

                <!-- Visibility + Join Policy (side by side on larger screens) -->
                <div class="row g-3 mb-3">
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-semibold" for="team-visibility">Visibility</label>
                        <select id="team-visibility"
                                class="form-select"
                                name="visibility"
                                data-testid="team-visibility-input"
                                data-bs-toggle="tooltip"
                                title="Public: discoverable by all users. Hidden: only visible to members."
                                aria-describedby="visibility-hint">
                            {% for v in visibility_choices %}
                            <option value="{{ v }}" {% if form_data.visibility == v or not form_data and v == 'Public' %}selected{% endif %}>{{ v }}</option>
                            {% endfor %}
                        </select>
                        <div id="visibility-hint" class="form-text">
                            Hidden teams only appear to members.
                        </div>
                    </div>
                    <div class="col-12 col-sm-6">
                        <label class="form-label fw-semibold" for="team-join-policy">Join Policy</label>
                        <select id="team-join-policy"
                                class="form-select"
                                name="join_policy"
                                data-testid="team-join-policy-input"
                                data-bs-toggle="tooltip"
                                title="Controls how users can join this team."
                                aria-describedby="join-policy-hint">
                            {% for jp in join_policy_choices %}
                            <option value="{{ jp }}" {% if form_data.join_policy == jp or not form_data and jp == 'Auto-approve' %}selected{% endif %}>{{ jp }}</option>
                            {% endfor %}
                        </select>
                        <div id="join-policy-hint" class="form-text">
                            Invite Only: new members must be added by an admin.
                        </div>
                    </div>
                </div>

                <!-- Category -->
                <div class="mb-4">
                    <label class="form-label fw-semibold" for="team-category">Category</label>
                    <select id="team-category"
                            class="form-select"
                            name="category"
                            data-testid="team-category-input"
                            data-bs-toggle="tooltip"
                            title="Used for filtering teams in the team browser.">
                        <option value="" disabled {% if not form_data.category %}selected{% endif %}>Select a category…</option>
                        {% for cat in categories %}
                        <option value="{{ cat }}" {% if form_data.category == cat %}selected{% endif %}>{{ cat }}</option>
                        {% endfor %}
                    </select>
                </div>

                <!-- Actions -->
                <div class="d-flex justify-content-between align-items-center">
                    <a href="/teams/"
                       class="btn btn-outline-secondary"
                       data-testid="team-create-cancel"
                       data-bs-toggle="tooltip" title="Cancel and return to Teams">
                        <i class="fa-solid fa-xmark me-1"></i> Cancel
                    </a>
                    <button type="submit"
                            class="btn btn-primary"
                            data-testid="team-create-submit"
                            data-bs-toggle="tooltip" title="Create this team">
                        <i class="fa-solid fa-users-plus me-1"></i> Create Team
                    </button>
                </div>
            </form>
        </div>

        <!-- Right panel: info box -->
        <div class="col-12 col-lg-4 offset-lg-1 mt-4 mt-lg-0">
            <div class="card border bg-light">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">
                        <i class="fa-solid fa-circle-info me-2 text-primary"></i>Team Visibility
                    </h6>
                    <dl class="small mb-0">
                        <dt>Public</dt>
                        <dd class="text-muted mb-2">Appears in the team browser. Any authenticated user can discover and (depending on Join Policy) join.</dd>
                        <dt>Hidden</dt>
                        <dd class="text-muted mb-0">Does not appear in the browser for non-members. Accessible only by direct link or invitation.</dd>
                    </dl>
                </div>
            </div>
            <div class="card border bg-light mt-3">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">
                        <i class="fa-solid fa-door-open me-2 text-primary"></i>Join Policies
                    </h6>
                    <dl class="small mb-0">
                        <dt>Auto-approve</dt>
                        <dd class="text-muted mb-2">Members join immediately with no admin action required.</dd>
                        <dt>Requires Approval</dt>
                        <dd class="text-muted mb-2">Users send a request; admin approves or rejects.</dd>
                        <dt>Invite Only</dt>
                        <dd class="text-muted mb-0">Admin adds members directly; no self-service join button shown.</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    console.log('[teams:create] page loaded');

    const form = document.querySelector('[data-testid="team-create-form"]');
    if (form) {
        form.addEventListener('submit', function () {
            const nameVal = document.getElementById('team-name').value.trim();
            console.log('[teams:create] submit clicked | name=' + nameVal);
        });
    }

    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
        new bootstrap.Tooltip(el);
    });
});
</script>
{% endblock %}