{%- import "partials/_ui.html" as ui -%}
<div class="tab-docs"><a href="/docs/splits">Docs: Collaborators &rarr;</a></div>

<div class="data-section">
    <h2 class="subsection-title">Members & Payouts</h2>
    <p class="section-lead">
        Add collaborators and set their share of revenue. The project owner receives the remainder.
    </p>

    <div class="proj-members-summary">
        <div class="proj-members-summary-row">
            <div>
                <div class="text-xs dimmed">Owner's share</div>
                <div class="proj-members-stat">{{ owner_split }}%</div>
            </div>
            <div>
                <div class="text-xs dimmed">Members</div>
                <div class="proj-members-stat">{{ members.len() }}</div>
            </div>
        </div>
    </div>

    <details class="form-section proj-members-add">
        <summary><h2 class="subsection-title">Add Member</h2></summary>
        <form hx-post="/api/projects/{{ project_id }}/members"
              hx-swap="none"
              hx-on::after-request="if(event.detail.successful) { this.reset(); htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/members', '#tab-content'); }">
            <div class="proj-members-add-grid">
                <div>
                    <label for="member-username" class="proj-members-field-label">Username</label>
                    <input type="text" id="member-username" name="username" required
                           placeholder="Enter username" class="proj-members-input-full w-full">
                </div>
                <div>
                    <label for="member-split" class="proj-members-field-label">Split %</label>
                    <input type="number" id="member-split" name="split_percent" required
                           min="1" max="99" value="50" class="proj-members-input-split w-80">
                </div>
                <div>
                    <button class="btn-primary" type="submit">Add</button>
                </div>
            </div>
            <div>
                <label for="member-role" class="proj-members-field-label proj-members-field-label--spaced">Role (optional)</label>
                <input type="text" id="member-role" name="role"
                       placeholder="e.g. Producer, Artist, Engineer" class="proj-members-input-full w-full">
            </div>
            <div id="member-add-result" class="proj-members-add-result"></div>
        </form>
    </details>

    {% if members.is_empty() %}
    {% call ui::empty_state("", "No collaborators yet. Add team members above to share revenue automatically. The project owner receives 100% until splits are configured.") %}
    {% else %}
    <table class="data-table">
        <thead>
            <tr>
                <th>Member</th>
                <th>Role</th>
                <th>Split</th>
                <th>Stripe</th>
                <th>Added</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {% for member in members %}
            <tr>
                <td>
                    <a href="/u/{{ member.username }}" class="proj-members-name-link">
                        <strong>{{ member.display_name.as_deref().unwrap_or(&member.username) }}</strong>
                    </a>
                    <div class="text-xs dimmed">@{{ member.username }}</div>
                </td>
                <td>{{ member.role }}</td>
                <td class="proj-members-split-cell">{{ member.split_percent }}%</td>
                <td>
                    {% if member.stripe_connected %}
                    <span class="badge active">Connected</span>
                    {% else %}
                    <span class="badge pending">Not connected</span>
                    {% endif %}
                </td>
                <td class="text-xs">{{ member.added_at }}</td>
                <td>
                    <button class="btn-danger proj-members-remove-btn"
                            hx-delete="/api/projects/{{ project_id }}/members/{{ member.user_id }}"
                            hx-swap="none"
                            hx-on::after-request="if(event.detail.successful) htmx.ajax('GET', '/dashboard/project/{{ project_slug }}/tabs/members', '#tab-content');"
                            hx-confirm="Remove {{ member.display_name.as_deref().unwrap_or(&member.username) }} from this project?">Remove</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>