{%- import "partials/_ui.html" as ui -%}
{% if git_enabled %}
<div class="tab-docs"><a href="/docs/git">Docs: Git &rarr;</a> <a href="/dashboard#tab-ssh-keys" class="proj-code-docs-link">Manage SSH Keys &rarr;</a></div>

<div class="form-section" id="git-repos-section">
    <h2 class="subsection-title">Git Repositories</h2>

    {% if !linked_repos.is_empty() %}
    <div class="proj-code-linked-list">
        <label>Linked Repositories</label>
        {% for repo in &linked_repos %}
        <div class="proj-code-repo">
            <div class="proj-code-repo-row">
                <a href="/git/{{ repo.name }}" class="proj-code-repo-link">{{ repo.name }}</a>
                <button class="btn-danger"
                        hx-delete="/api/projects/{{ project.id }}/repos/{{ repo.name }}"
                        hx-target="#git-repos-section"
                        hx-swap="outerHTML"
                        hx-confirm="Unlink '{{ repo.name }}' from this project?">Unlink</button>
            </div>
            {% if !repo.collaborators.is_empty() %}
            <div class="proj-code-collab-block">
                <label class="proj-code-collab-label">Collaborators</label>
                {% for c in &repo.collaborators %}
                <div class="proj-code-collab-row">
                    <span class="proj-code-collab-name">@{{ c.username }}{% if !c.can_push %} <span class="proj-code-collab-readonly">(read only)</span>{% endif %}</span>
                    <button class="btn-danger small"
                            hx-delete="/api/repos/{{ repo.id }}/collaborators/{{ c.user_id }}"
                            hx-target="#git-repos-section"
                            hx-swap="outerHTML"
                            hx-confirm="Remove @{{ c.username }} from {{ repo.name }}?">Remove</button>
                </div>
                {% endfor %}
            </div>
            {% endif %}
            <div class="proj-code-collab-block">
                <div class="proj-code-add-collab-row">
                    <input type="text" placeholder="Username" class="collab-username-input" data-repo-id="{{ repo.id }}">
                    <button class="btn-secondary small collab-add-btn" data-repo-id="{{ repo.id }}">Add Collaborator</button>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    <script>
    (function() {
        document.querySelectorAll('.collab-add-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                var repoId = btn.dataset.repoId;
                var input = document.querySelector('.collab-username-input[data-repo-id="' + repoId + '"]');
                var username = input.value.trim();
                if (!username) return;
                btn.disabled = true;
                var body = new URLSearchParams();
                body.append('username', username);
                fetch('/api/repos/' + repoId + '/collaborators', {
                    method: 'POST',
                    headers: {...csrfHeaders(), 'Content-Type': 'application/x-www-form-urlencoded'},
                    body: body.toString()
                }).then(function(r) {
                    if (r.ok) {
                        htmx.ajax('GET', '/dashboard/project/{{ project.slug }}/tabs/code', {target: '#tab-content', swap: 'innerHTML'});
                    } else {
                        return r.json().then(function(data) {
                            alert(data.error || 'Failed to add collaborator');
                        });
                    }
                }).catch(function() {
                    alert('Network error');
                }).finally(function() {
                    btn.disabled = false;
                });
            });
        });
    })();
    </script>
    {% endif %}

    {% if !available_repos.is_empty() %}
    <div>
        <label for="link-repo-select">Link a Repository</label>
        <div class="proj-code-link-row">
            <select id="link-repo-select">
                <option value="">Select a repository...</option>
                {% for repo in &available_repos %}
                <option value="{{ repo.name }}">{{ repo.name }}</option>
                {% endfor %}
            </select>
            <button class="btn-secondary" id="link-repo-btn">Link</button>
        </div>
        <div class="hint">Choose from your unlinked repositories.</div>
    </div>
    <script>
    (function() {
        var btn = document.getElementById('link-repo-btn');
        var sel = document.getElementById('link-repo-select');
        if (!btn || !sel) return;
        btn.addEventListener('click', function() {
            var name = sel.value;
            if (!name) return;
            fetch('/api/projects/{{ project.id }}/repos', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', ...csrfHeaders()},
                body: JSON.stringify({name: name})
            }).then(function() {
                htmx.ajax('GET', '/dashboard/project/{{ project.slug }}/tabs/code', {target: '#tab-content', swap: 'innerHTML'});
            }).catch(function() {
                var status = document.getElementById('create-repo-status');
                if (status) {
                    status.textContent = 'Failed to link repository. Please try again.';
                    status.classList.add('is-error');
                }
            });
        });
    })();
    </script>
    {% else if linked_repos.is_empty() %}
    {% call ui::empty_state("", "No repositories available. Create one below or push to the server.") %}
    {% endif %}

    <div class="proj-code-create-section">
        <label for="create-repo-name">Create Repository</label>
        <div class="proj-code-link-row">
            <input type="text" id="create-repo-name" placeholder="repo-name" pattern="[a-zA-Z0-9._-]+" title="Letters, numbers, hyphens, underscores, and dots">
            <button class="btn-secondary" id="create-repo-btn">Create</button>
        </div>
        <div class="hint">Creates a bare git repository on the server.</div>
        <div id="create-repo-status" class="proj-code-create-status"></div>
    </div>
    <script>
    (function() {
        var btn = document.getElementById('create-repo-btn');
        var input = document.getElementById('create-repo-name');
        var status = document.getElementById('create-repo-status');
        if (!btn || !input) return;
        btn.addEventListener('click', function() {
            var name = input.value.trim();
            if (!name) return;
            btn.disabled = true;
            fetch('/api/repos', {
                method: 'POST',
                headers: {'Content-Type': 'application/json', ...csrfHeaders()},
                body: JSON.stringify({name: name})
            }).then(function(r) {
                if (r.ok) {
                    htmx.ajax('GET', '/dashboard/project/{{ project.slug }}/tabs/code', {target: '#tab-content', swap: 'innerHTML'});
                } else {
                    return r.json().then(function(data) {
                        status.textContent = data.error || 'Failed to create repository';
                        status.classList.add('is-error');
                    });
                }
            }).catch(function() {
                status.textContent = 'Network error';
                status.classList.add('is-error');
            }).finally(function() {
                btn.disabled = false;
            });
        });
    })();
    </script>
</div>
{% else %}
<div class="proj-code-disabled">
    <p>Git hosting is not configured on this server.</p>
</div>
{% endif %}