<!DOCTYPE html>
{% extends 'layout.html' %}
{% block content %}
<section class="">
    <div class="container bg" id="navbar">
        <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>
    </div>
    <div class="container tab-area mt-4 p-4 rounded-3">
        <div class="tab-content">
            <div class="tab-pane" id="tab-edit-project" role="tabpanel" aria-labelledby="tab-edit-project-tab"></div>
            <div class="tab-pane" id="tab-edit-other-files" role="tabpanel" aria-labelledby="tab-edit-other-files-tab">
            </div>
            <div class="tab-pane" id="tab-import-data" role="tabpanel" aria-labelledby="tab-import-data-tab">
            </div>
            <div class="tab-pane" id="tab-select-directories" role="tabpanel" aria-labelledby="tab-set-collections-tab">
            </div>
            <div class="tab-pane" id="tab-set-collections" role="tabpanel" aria-labelledby="tab-set-collections-tab">
            </div>
            <div class="tab-pane" id="tab-prepare-metadata" role="tabpanel" aria-labelledby="tab-prepare-metadata-tab">
            </div>
            <div class="tab-pane" id="tab-check-metadata" role="tabpanel" aria-labelledby="tab-check-metadata-tab">
            </div>
            <div class="tab-pane" id="tab-prepare-upload" role="tabpanel" aria-labelledby="tab-prepare-upload-tab">
            </div>
            <div class="tab-pane" id="tab-check-results" role="tabpanel" aria-labelledby="tab-check-results-tab">
            </div>
            <div class="tab-pane" id="tab-publication" role="tabpanel" aria-labelledby="tab-publication-tab"></div>
        </div>
    </div>
</section>
{% endblock %}