<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <title>Cactool - Projects</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="/static/assets/favicon.ico" />
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="/static/css/styles.css" rel="stylesheet" />
    </head>
    <body class="d-flex flex-column h-100">
        <main class="flex-shrink-0">
            <!-- Navigation-->
            {% include 'navigation.html' %}
            {% include 'flash.html' %}
            <!-- Page Content-->
            <section class="py-5">
                <div class="container px-5 my-5">
                    <div class="text-center mb-5">
                        <h1 class="fw-bolder">Projects</h1>
                    </div>
                    <div class="row gx-5">
                            <div class="accordion mb-5" id="accordionExample">
                                {% for project in projects %}
                                    <div class="accordion-item">
                                        <h3 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">{{ project.name }}</button></h3>
                                        <div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                                            <div class="accordion-body">
                                                <strong>Contains {{ project.datasets | length }} datasets</strong>
                                                <br>
                                                {{ project.description }}
                                                <br>
                                                <br>
                                                <a href="/project/{{ project.id }}" class="btn btn-outline-dark">Open</a>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        <a href="/project/create" class="btn btn-outline-dark">Create project</a>
                    </div>
                </div>
            </section>
        </main>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>
