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

{% block title %}Contributors - {{ project.title }}{% endblock %}

{% block content %}
<h1><i class="fas fa-users"></i> Contributors — {{ project.title }}</h1>
<p><a href="{% url 'library:project_detail' project.slug %}">&larr; Back to project</a></p>

<div class="card">
    <h2>Add contributor</h2>
    <form method="post" class="contributor-form" id="contributor-form">
        {% csrf_token %}
        <input type="hidden" name="action" value="add">
        <div class="form-group contributor-input-group">
            {{ contributor_form.username.errors }}
            <label for="{{ contributor_form.username.id_for_label }}">Username</label>
            {{ contributor_form.username }}
            <div class="user-suggestions" id="user-suggestions" hidden></div>
        </div>
        <button type="submit" class="btn btn-primary"><i class="fas fa-user-plus"></i> Add</button>
    </form>
</div>

<div class="card">
    <h2>Current contributors</h2>
    {% if contributors %}
        <ul class="contributor-list">
            <li class="contributor-row">
                <span class="contributor-name"><i class="fas fa-crown"></i> {{ project.owner.username }} <small>(owner)</small></span>
            </li>
            {% for contributor in contributors %}
                <li class="contributor-row">
                    <span class="contributor-name"><i class="fas fa-user"></i> {{ contributor.user.username }}</span>
                    <form method="post" class="inline-form">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="remove">
                        <input type="hidden" name="contributor_id" value="{{ contributor.pk }}">
                        <button type="submit" class="btn btn-danger btn-sm"><i class="fas fa-user-minus"></i> Remove</button>
                    </form>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <p class="empty-hint">No additional contributors yet.</p>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
(function () {
    const input = document.getElementById('{{ contributor_form.username.id_for_label }}');
    if (!input) return;
    const suggestions = document.getElementById('user-suggestions');
    let timer = null;
    input.addEventListener('input', () => {
        clearTimeout(timer);
        const q = input.value.trim();
        if (!q) { suggestions.hidden = true; return; }
        timer = setTimeout(async () => {
            try {
                const resp = await fetch("{% url 'library:api_users_autocomplete' %}?q=" + encodeURIComponent(q), { headers: { 'Accept': 'application/json' } });
                const results = await resp.json();
                suggestions.innerHTML = '';
                for (const u of results.slice(0, 8)) {
                    const item = document.createElement('button');
                    item.type = 'button';
                    item.className = 'tag-suggestion';
                    item.textContent = u.username;
                    item.addEventListener('click', () => { input.value = u.username; suggestions.hidden = true; });
                    suggestions.appendChild(item);
                }
                suggestions.hidden = results.length === 0;
            } catch (e) {
                suggestions.hidden = true;
            }
        }, 200);
    });
    input.addEventListener('keydown', (e) => { if (e.key === 'Escape') suggestions.hidden = true; });
    document.addEventListener('click', (e) => {
        if (!e.target.closest('.contributor-input-group')) suggestions.hidden = true;
    });
})();
</script>
{% endblock %}