<div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="modal-header align-items-center">
            <h5 class="mb-0">Manage TextGrid Projects</h5>
            <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="row">
                <!-- Add New Project Card -->
                <div class="col-12 col-md-6 col-lg-4 mb-3">
                    <div class="card h-100 border-secondary shadow-sm border-dashed">
                        <div class="card-body p-4 text-center">
                            <div class="rounded-circle bg-secondary-subtle text-secondary d-inline-flex align-items-center justify-content-center mb-3"
                                style="width: 56px; height: 56px;">
                                <i class="bi bi-plus-lg fs-4"></i>
                            </div>
                            <h6 class="mb-3">Create New Project</h6>
                            <form method="POST" class="js-modal-submit"
                                action="{{ url_for('publication.create_tg_project', projectname=projectname, action='upload', instance=instance, sessionid=sessionid) }}">
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" name="tg_projectname"
                                        placeholder="Project name" required>
                                    <button type="submit" class="btn btn-primary">
                                        <i class="bi bi-plus-lg"></i>
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                {% for tg_project in tg_client.get_assigned_projects() %}
                <div class="col-12 col-md-6 col-lg-4 mb-3">
                    <div
                        class="card h-100 {{'border-primary' if tg_project_id == tg_project.id else 'border-secondary'}}">
                        <div class="card-body p-3">
                            <div class="row">
                                <div class="col-12 mb-1">
                                    <span class="fw-bold d-flex align-items-center">
                                        <i class="bi bi-folder2-open me-2"></i>{{ tg_project.name }}
                                    </span>
                                </div>
                                <div class="col-12 mb-1 text-muted small">
                                    <i>Project ID:</i>
                                    <span title="Project ID">{{ tg_project.id }}</span>
                                </div>
                                <div class="col-12">
                                    <span class="badge bg-primary me-1" title="TEI Files">TEI: {{ tg_project.tei_count
                                        }}</span>
                                    <span class="badge bg-success me-1" title="Images">Img: {{ tg_project.img_count
                                        }}</span>
                                    <span class="badge bg-secondary" title="Other Files">Other: {{
                                        tg_project.other_count }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer d-flex justify-content-between align-items-center">
                            <form method="POST" class="js-modal-submit"
                                action="{{ url_for('publication.save_tg_project_id', projectname=projectname, action='upload', instance=instance, tg_project_id=tg_project.id, sessionid=sessionid) }}">
                                <button type="submit" class="btn btn-sm btn-outline-primary">
                                    {% if current_tg_project_id == tg_project.id %}
                                    <span class="bi bi-check-circle-fill text-primary"></span> Selected
                                    {% else %}
                                    <span class="bi bi-circle"></span> Select
                                    {% endif %}
                                </button>
                            </form>
                            <form method="POST" class="js-tab-submit"
                                action="{{ url_for('publication.clear_tg_project', projectname=projectname, action='upload', instance=instance, tg_project_id=tg_project.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-warning text-secondary"
                                    title="Clear project">
                                    <span class="bi bi-eraser"></span> Clear
                                </button>
                            </form>
                            <form method="POST" class="js-tab-submit"
                                action="{{ url_for('publication.delete_tg_project_id', projectname=projectname, action='upload', instance=instance, tg_project_id=tg_project.id) }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete project">
                                    <span class="bi bi-trash"></span> Delete
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>