{% extends 'base.html' %}
{% load static %}

{% block title %}InferAge - Design Agent{% endblock %}

{% block content %}
<!-- Global Navigation Bar -->
<nav class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">InferAge</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav mx-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#">Dashboard</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Design Agent</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Design SLM Agent</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Analyse Agents</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Configuration</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!-- Main Content -->
<main class="main-content container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-8">
            <h1 class="mb-4">Design Agent</h1>

            <!-- Agent Selection Accordion -->
            <div class="accordion" id="agentAccordion">

                <!-- MLOps Agents -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingMlOps">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseMlOps" aria-expanded="false" aria-controls="collapseMlOps">
                            MLOps Agents
                        </button>
                    </h2>
                    <div id="collapseMlOps" class="accordion-collapse collapse" aria-labelledby="headingMlOps" data-bs-parent="#agentAccordion">
                        <div class="accordion-body">
                            Streamline your machine learning operations.
                        </div>
                    </div>
                </div>

                <!-- DevOps Agents -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingDevOps">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDevOps" aria-expanded="false" aria-controls="collapseDevOps">
                            DevOps Agents
                        </button>
                    </h2>
                    <div id="collapseDevOps" class="accordion-collapse collapse" aria-labelledby="headingDevOps" data-bs-parent="#agentAccordion">
                        <div class="accordion-body">
                            Automate your DevOps workflows.
                        </div>
                    </div>
                </div>

                <!-- Security Agents -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingSecurity">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSecurity" aria-expanded="false" aria-controls="collapseSecurity">
                            Security Agents
                        </button>
                    </h2>
                    <div id="collapseSecurity" class="accordion-collapse collapse" aria-labelledby="headingSecurity" data-bs-parent="#agentAccordion">
                        <div class="accordion-body">
                            Enhance your application security.
                        </div>
                    </div>
                </div>

                <!-- Quality Assurance Agents -->
                <div class="accordion-item">
                    <h2 class="accordion-header" id="headingQA">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseQA" aria-expanded="false" aria-controls="collapseQA">
                            Quality Assurance Agents
                        </button>
                    </h2>
                    <div id="collapseQA" class="accordion-collapse collapse" aria-labelledby="headingQA" data-bs-parent="#agentAccordion">
                        <div class="accordion-body">
                            Ensure software quality and reliability.
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</main>
{% endblock %}
