<!DOCTYPE html>
<div class="row align-items-center justify-content-between position-relative">
    <!-- Line -->
    <div class="line blank"></div>
    <div class="line blue"></div>

    <!-- Main Button 1: Manage Project -->
    <div class="col-auto expanding-button text-center">
        <button type="button" class="btn btn-light btn-circle btn-xl" id="tab-group-project" title="Manage Project">
            <i class="bi bi-archive main-icon"></i>
            <div class="row sub-buttons d-none nav">
                <!-- Sub-Button: Project Settings -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary last-opened " data-bs-toggle="tab"
                    data-bs-target="#tab-edit-project"
                    data-url="{{ url_for('project.tab_edit_project', projectname=project.name) }}">
                    <i class="bi bi-pen fs-4"></i>
                </div>
                <!-- Sub-Button: Upload Data -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-import-data"
                    data-url="{{ url_for('data.tab_import_data', projectname=project.name)}}">
                    <i class="bi bi-archive fs-4"></i>
                </div>
            </div>
        </button>
    </div>

    <!-- Main Button 2: Manage Collections -->
    <div class="col-auto text-center">
        <button type="button" class="btn btn-light btn-circle btn-xl" id="tab-group-collections"
            title="Manage Collections">
            <i class="bi bi-pencil"></i>
            <div class="row sub-buttons d-none nav">
                <!-- Sub-Button: Select Data -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-select-directories"
                    data-url="{{ url_for('collection.tab_select_directories', projectname=project.name)}}">
                    <i class="bi bi-list-nested fs-4"></i>
                </div>
                <!-- Sub-Button: Manage Metadata -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-set-collections"
                    data-url="{{ url_for('collection.tab_manage_collections', projectname=project.name)}}">
                    <i class="bi bi-pen fs-4"></i>
                </div>
                <!-- Sub-Button: Check Settings & Metadata -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-check-metadata"
                    data-url="{{ url_for('collection.tab_validate_metadata', projectname=project.name)}}">
                    <i class="bi bi-list-check fs-4"></i>
                </div>
            </div>
        </button>
    </div>
    <!-- Main Button 3: Upload & Publish to TextGrid -->
    <div class="col-auto text-center">
        <button type="button" class="btn btn-light btn-circle btn-xl" id="tab-group-upload">
            <i class="bi bi-cloud"></i>
            <div class="row sub-buttons d-none nav">
                <!-- Sub-Button: TG-Sesssion-ID, -Project-ID & -Upload -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-prepare-upload"
                    data-url="{{ url_for('publication.tab_upload', projectname=project.name)}}">
                    <i class="bi bi-key fs-4"></i>
                </div>
                <!-- Sub-Button: Check TG-Project -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-check-results"
                    data-url="{{ url_for('publication.tab_check_result', projectname=project.name) }}">
                    <i class="bi bi-arrow-repeat fs-4"></i>
                </div>
                <!-- Sub-Button: TG-Publish -->
                <div class="col-4 mx-3 btn-circle btn-sm btn-outline-secondary" data-bs-toggle="tab"
                    data-bs-target="#tab-publication"
                    data-url="{{ url_for('publication.tab_publication', projectname=project.name)}}">
                    <i class="bi bi-cloud-upload fs-4"></i>
                </div>
            </div>
        </button>
    </div>
</div>