{% extends 'main/base.html' %}

{% block content %}

<style>
    .custom-tab {
        background-color: #43e369;
        color: #155724;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }
    .custom-tab:hover {
        background-color: #09a52e;
        color: #0c4128;
    }
    .custom-tab.active {
        background-color: #198754 !important;
        color: white !important;
    }
</style>

<div class="container mt-5">
    <h2 class="text-center">Test and Compare Sustainability Tools in Action</h2>

    <div class="row">
        <!-- Code Energy Consumption -->
        <div class="col-md-12 mb-4">
            <div class="card shadow h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="card-title">Code Energy Consumption</h4>
                        <a href="{% url 'tool_testing' tool_name='energy' %}" class="btn btn-success">Live Testing</a>
                    </div>
                    <p>Tools to measure energy consumption of code execution.</p>

                    <div class="row">
                        <div class="col-md-4">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>Packaged Tools</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>Intel Performance Monitor, Joule Meter</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#energyPackagedModal">Check Details</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>Hardware Methodologies</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>GSMP, GSMM</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#energyHardwareModal">Check Details</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>Software Methodologies</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>Energibridge, Web Energy Patterns</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#energySoftwareModal">Check Details</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Green Refactoring & Workload Management -->
        <div class="col-md-5 mb-4">
            <div class="card shadow h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="card-title">Green Refactoring</h4>
                        <a href="{% url 'tool_testing' tool_name='refactoring' %}" class="btn btn-success">Live Testing</a>
                    </div>
                    <p>Tools to refactor code for sustainability.</p>

                    <div class="row d-flex justify-content-center">
                        <div class="col-md-8">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>Packaged Tools</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>SonarQube EcoCode, Leafactor</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#refactoringPackagedModal">Check Details</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="col-md-7 mb-4">
            <div class="card shadow h-100">
                <div class="card-body">
                    <h4 class="card-title">Workload Management</h4>
                    <p>Tools to balance developer and team workload efficiently.</p>

                    <div class="row">
                        <div class="col-md-6">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>Existing Tools</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>Trello, Jira, Git Milestones</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#workloadExistingModal">Check Details</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card shadow-sm h-100">
                                <div class="card-header text-center">
                                    <h6>AI Tools</h6>
                                </div>
                                <div class="card-body text-center">
                                    <p>GitHub CoPilot, Tabnine</p>
                                    <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#workloadAIModal">Check Details</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

    </div>
</div>

{% for tool, details in tool_data.items %}
<div class="modal fade" id="{{ tool }}Modal" tabindex="-1" aria-labelledby="{{ tool }}Label" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="{{ tool }}Label">{{ details.name }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <ul class="nav nav-tabs border-0">
                    <li class="nav-item me-2"> 
                        <a class="nav-link fw-bold custom-tab active" id="overview-tab" data-bs-toggle="tab" href="#overview-{{ tool }}">Overview</a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link fw-bold custom-tab" id="input-tab" data-bs-toggle="tab" href="#input-{{ tool }}">Input Data</a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link fw-bold custom-tab" id="output-tab" data-bs-toggle="tab" href="#output-{{ tool }}">Output</a>
                    </li>
                    <li class="nav-item me-2">
                        <a class="nav-link fw-bold custom-tab" id="video-tab" data-bs-toggle="tab" href="#video-{{ tool }}">Installation</a>
                    </li>
                </ul>

                <div class="tab-content mt-3">
                    <div class="tab-pane fade show active" id="overview-{{ tool }}">
                        {% autoescape off %}
                            <p>{{ details.description }}</p>
                        {% endautoescape %}
                    </div>
                    <div class="tab-pane fade" id="input-{{ tool }}">
                        {% autoescape off %}
                            <p><strong>Input Data:</strong> {{ details.input }}</p>
                        {% endautoescape %}
                    </div>
                    <div class="tab-pane fade" id="output-{{ tool }}">
                        {% autoescape off %}
                            <p><strong>Output:</strong> {{ details.output }}</p>
                        {% endautoescape %}
                    </div>
                    <div class="tab-pane fade" id="video-{{ tool }}">
                        {% autoescape off %}
                            <p>{{ details.video_description }}</p>
                        {% endautoescape %}
                        {%  if details.video %}
                            {%  if details.video_text %}
                                <p><strong>{{ details.video_text }}</strong></p>
                            {% else %}
                                <p><strong>Installation Video:</strong></p>
                            {% endif  %}
                            <iframe width="100%" height="400" src="{{ details.video }}" frameborder="0" 
                            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
                        {% endif  %}
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
{% endfor %}

{% endblock %}