{% extends "projects/base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}Add Member - {{ project.name }} - Pychestrate{% endblock %}

{% block content %}
<nav aria-label="Breadcrumb">
    <ol class="breadcrumb">
        <li><a href="{{ url_for('projects.project_list') }}">Projects</a></li>
        <li><a href="{{ url_for('projects.project_detail', project_id=project.id) }}">{{ project.name }}</a></li>
        <li><a href="{{ url_for('projects.member_list', project_id=project.id) }}">Members</a></li>
        <li aria-current="page">Add</li>
    </ol>
</nav>

<div class="page-header">
    <h1>Add Member</h1>
    <p>Add a new member to the project</p>
</div>

<div class="card narrow">
    <form method="get" action="{{ url_for('projects.member_add', project_id=project.id) }}" class="actions-row mb" role="search">
        <label for="member-search" class="visually-hidden">Find a user</label>
        <input type="search" id="member-search" name="q" class="form-control" value="{{ user_search }}"
               placeholder="Find a user by name, username or email">
        <button type="submit" class="btn btn-secondary">{{ ui.icon("search") }} Find</button>
        {% if user_search %}
        <a href="{{ url_for('projects.member_add', project_id=project.id) }}" class="btn btn-secondary">Clear</a>
        {% endif %}
    </form>

    {% if not available_users %}
    {% if can_create_users %}
    {{ ui.empty_state(('No active user matching "' ~ user_search ~ '" can be added.') if user_search else 'Every active user is already a member of this project.', "To add someone new, create their account first.", url_for('config.user_create'), "Create a user") }}
    {% else %}
    {{ ui.empty_state(('No active user matching "' ~ user_search ~ '" can be added.') if user_search else 'Every active user is already a member of this project.', "Ask an administrator to create an account for the person you want to add.") }}
    {% endif %}
    {% endif %}

    {{ ui.error_summary(errors, error_labels) }}
    <form method="post">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">

        <div class="form-group">
            <label for="user_id">User *</label>
            <select id="user_id" name="user_id" class="form-control" required{{ ui.invalid_attrs(errors, "user_id") }}>
                <option value="">Select a user...</option>
                {% for user in available_users %}
                <option value="{{ user.id }}" {% if form_data and form_data.user_id == user.id|string %}selected{% endif %}>{{ user.username }}{% if user.display_name %} ({{ user.display_name }}){% endif %}</option>
                {% endfor %}
            </select>
            {{ ui.field_error(errors, "user_id") }}
        </div>
        
        <div class="form-group">
            <label for="role">Role *</label>
            <select id="role" name="role" class="form-control" required{{ ui.invalid_attrs(errors, "role", "role-help") }}>
                {% for role in roles %}
                <option value="{{ role }}" {% if (form_data and form_data.role == role) or (not form_data and role == 'developer') %}selected{% endif %}>{{ role_descriptions[role] if role in role_descriptions else role }}</option>
                {% endfor %}
            </select>
            {{ ui.field_error(errors, "role") }}
            <div class="form-text" id="role-help">
                The role applies to this project only. To give someone the same
                access to every project, an administrator can assign the matching
                global role (project-owner, project-editor or project-viewer) on
                their user page.
            </div>
        </div>
        
        <div class="actions-row mt-lg">
            <button type="submit" class="btn btn-primary">
                {{ ui.icon("person_add") }} Add Member
            </button>
            <a href="{{ url_for('projects.member_list', project_id=project.id) }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}