{% extends 'main.html' %}
{% block content %} 
{% load static %}

<!-- Main Content -->
<div id="content">
    <!-- Begin Page Content -->
    <div class="container-fluid">
        <!-- Header -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h4 mb-0 text-gray-800">Counterfactuals and Explainability</h1>
        </div>
        {% if dataset_type == "timeseries" %}
            <div class="row mb-4">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-sm bg-light">
                        <div class="card-header d-flex justify-content-between align-items-center bg-light">
                            <h5 class="text-primary mb-0">Understanding Counterfactuals & Explainable AI</h5>
                            <button class="btn btn-outline-primary btn-sm px-3 py-1" type="button" data-toggle="collapse" data-target="#introContent" aria-expanded="false" aria-controls="introContent" id="toggleIntro">
                                <span class="mr-1">Read More</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div id="introContent" class="collapse">
                            <div class="card-body">
                                <p class="text-muted">
                                    Counterfactual explanations are a crucial component of explainable AI (XAI). They answer "what-if" questions, illustrating how changing certain features of an input can alter the model's prediction.
                                </p>
                                
                                <h5 class="text-success mb-3">About WILDBOAR</h5>
                                <p class="text-muted">
                                    <strong>WILDBOAR</strong> is a Python package designed for efficient and scalable counterfactual analysis on time-series data. It provides robust tools to generate counterfactual explanations and supports various algorithms for explainability.
                                </p>
                                
                                <h5 class="text-info mb-3">Workflow for Counterfactual Analysis</h5>
                                <p class="text-muted">
                                    Follow these steps to generate and analyze counterfactual explanations:
                                </p>
                                <ol class="text-muted pl-3">
                                    <li>
                                        <i class="fas fa-check-circle text-primary mr-2"></i>
                                        <strong>Step 1:</strong> Pick a pre-trained classifier from the list provided.
                                    </li>
                                    <li>
                                        <i class="fas fa-clipboard-list text-success mr-2"></i>
                                        <strong>Step 2:</strong> Pick a time-series sample by deciding on its class label and selecting one of the 10 examples from the "Example Entries" dropdown list.
                                    </li>
                                    <li>
                                        <i class="fas fa-play-circle text-warning mr-2"></i>
                                        <strong>Step 3:</strong> Click "Run Counterfactual" to see the generated explanation and how changes impact the model's prediction.
                                    </li>
                                </ol>
                                <p class="text-muted mb-0">Gain deeper insights into model behavior with our interactive counterfactual analysis tools.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% elif dataset_type == "tabular" %}
            <div class="row mb-4">
                <div class="col-lg-12">
                    <div class="card border-0 shadow-sm bg-light">
                        <div class="card-header d-flex justify-content-between align-items-center bg-light">
                            <h5 class="text-primary mb-0">Understanding Counterfactuals for Tabular Data with DICE ML</h5>
                            <button class="btn btn-outline-primary btn-sm px-3 py-1" type="button" data-toggle="collapse" data-target="#introContent" aria-expanded="false" aria-controls="introContent" id="toggleIntro">
                                <span class="mr-1">Read More</span>
                                <i class="fas fa-chevron-down"></i>
                            </button>
                        </div>
                        <div id="introContent" class="collapse">
                            <div class="card-body">
                                <p class="text-muted">
                                    Counterfactual explanations are a crucial aspect of explainable AI (XAI), offering insights into how changing certain features can alter the prediction outcome. For tabular data, we use <strong>DICE ML</strong> (Diverse Counterfactual Explanations for ML) to generate diverse and actionable counterfactual explanations.
                                </p>
                                <h5 class="text-success mb-3">About DICE ML</h5>
                                <p class="text-muted">
                                    <strong>DICE ML</strong> is a powerful Python library designed for generating diverse counterfactual explanations. It supports a range of machine learning models and provides a flexible framework for understanding model decisions by offering possible alternatives.
                                </p>
                                <h5 class="text-info mb-3">Workflow for Counterfactual Analysis on Tabular Data</h5>
                                <p class="text-muted">
                                    Follow these steps to perform counterfactual analysis on tabular data:
                                </p>
                                <ol class="text-muted pl-3">
                                    <li>
                                        <i class="fas fa-chart-bar text-primary mr-2"></i>
                                        <strong>Step 1:</strong> Pick a pre-trained model and observe the t-SNE plot, which visualizes the data points.
                                    </li>
                                    <li>
                                        <i class="fas fa-crosshairs text-success mr-2"></i>
                                        <strong>Step 2:</strong> Click on a data point in the t-SNE plot to view its feature values and understand its position.
                                    </li>
                                    <li>
                                        <i class="fas fa-sliders-h text-warning mr-2"></i>
                                        <strong>Step 3:</strong> Decide on the features you want to vary for counterfactual generation. This selection helps guide the creation of meaningful counterfactual points.
                                    </li>
                                    <li>
                                        <i class="fas fa-hand-pointer text-danger mr-2"></i>
                                        <strong>Step 4:</strong> Choose from the generated counterfactual points and visualize their impact as they are displayed on the t-SNE plot.
                                    </li>
                                </ol>
                                <p class="text-muted mb-0">This workflow ensures a comprehensive understanding of model predictions and their sensitivities, empowering you to make data-driven decisions.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
        

        <!-- Display Selected Dataset -->
        {% if df_name %}
            <div class="alert alert-info py-3" role="alert">
                <strong>Selected Dataset: </strong> {{df_name}}
            </div>
        {% endif %}

        <!-- Main Row -->
        
        <div class="row" style="padding-top: 50px;">
            <!-- Available Pretrained Models/Classifiers Column -->
            <div class="col-xl-6 col-lg-6 mb-5">
                <!-- Step Title Header -->
                <div class="row mb-3">
                    <div class="col-12">
                        <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 1: Pick a Pre-trained Model/Classifier</h5>
                    </div>
                </div>
        
                <div class="card shadow-sm border-0 h-100 animate-card">
                    <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold">Available Pretrained Models/Classifiers</h6>
                        <!-- New animated modal trigger button -->
                        <button class="info-button" data-toggle="modal" data-target="#glacierInfoModal">
                            <i class="fas fa-info-circle"></i>
                        </button>
                    </div>
                    <div class="card-body" id="radio_buttons">
                        {% csrf_token %}
                        {% if not df_name %}
                            <p class="text-muted">
                                The available pre-trained models will show up here. You first need to 
                                <a href="/" class="text-primary font-weight-semibold">pick or upload a dataset</a>.
                            </p>
                        {% elif not available_pretrained_models_info %}
                            <p class="text-danger">
                                There are no available pre-trained models for <strong>{{df_name}}</strong>. 
                                Please <a href="/train.html" class="text-primary font-weight-semibold">train a model</a>.
                            </p>
                        {% elif dataset_type == "tabular" %}
                            <div id="pre_trained_models">
                                {% for value, text in available_pretrained_models_info %}
                                    <div class="form-check py-2 border-bottom">
                                        <input class="form-check-input mr-2" type="radio" name="modeling_options" value="{{value}}">
                                        <label class="form-check-label">{{text}}</label>
                                    </div>
                                {% endfor %}
                            </div>
                        {% elif dataset_type == "timeseries" %}
                            <div class="mb-2">
                                <h6 class="text-muted mb-2">Method</h6>
                                <select id="classifier" class="form-control selectpicker">
                                    <option value="" disabled selected hidden>Pick a Pre-trained Classifier</option>
                                    {% for value, text in available_pretrained_models_info %}
                                        <option value="{{value}}">{{text}}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>
        
            <!-- Experiment Details Column -->
            <div class="col-xl-6 col-lg-6 mb-5" style="display: none;" id="saved_experiments">
                <!-- Step Title Header -->
                <div class="row mb-3">
                    <div class="col-12">
                        <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 2: Select a Constraint/Experiment</h5>
                    </div>
                </div>
                <div class="card border-0 shadow-sm h-100 animate-card">
                    <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold">Experiment Details</h6>
                        <button class="info-button" data-toggle="modal" data-target="#glacierConstraintModal">
                            <i class="fas fa-info-circle"></i>
                        </button>
                    </div>
                    <div class="card-body">
                        <div id="saved_experiments_elements">
                            {% if available_pre_computed_counterfactuals %}
                                {% for experiment in available_pre_computed_counterfactuals %}
                                    <div class="form-check py-2 border-bottom">
                                        <input class="form-check-input" type="radio" name="experiment" value="{{experiment}}">
                                        <label class="form-check-label">{{experiment}}</label>
                                    </div>
                                {% endfor %}
                            {% else %}
                                <div class="alert alert-warning text-center mb-0" id="no-pre-computed">No pre-computed experiments available.</div>
                            {% endif %}
                        </div> 
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Modal for Glacier Overview -->
        <div class="modal fade" id="glacierInfoModal" tabindex="-1" role="dialog" aria-labelledby="glacierInfoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centeread" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title font-weight-bold" id="glacierInfoModalLabel">Available Methods for Time Series Counterfactuals</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- Modal Body with Scrollbar -->
                    <div class="modal-body" style="max-height: 400px; overflow-y: auto;">
                        <!-- Glacier Section -->
                        <h6 class="font-weight-bold text-primary">Glacier: Guided Counterfactual Explanations</h6>
                        <p><strong>Glacier</strong> is a model-agnostic method for generating locally constrained counterfactual explanations in time series classification. It utilizes gradient search on either the original time series data or in a learned latent space, allowing researchers flexibility to apply constraints that promote realistic and context-sensitive modifications.</p>
                        <p>This approach is particularly suited for binary classification tasks with time series data, using constraints that guide changes to specific data segments while discouraging modifications to others. Glacier's flexibility extends to four configurations:</p>
                        <ul class="pl-3">
                            <li><strong>Unconstrained:</strong> Applies changes across the entire time series.</li>
                            <li><strong>Example-specific:</strong> Focuses on specific time points in each example using LIMESegment.</li>
                            <li><strong>Global:</strong> Prioritizes important segments across all test examples.</li>
                            <li><strong>Uniform:</strong> Minimizes changes across the series for a broader application.</li>
                        </ul>
                        <p>Glacier is compatible with modern classifiers and has been tested across 40 datasets from the UCR archive, supporting critical insights into model decisions by visualizing counterfactual impacts on time series classifications.</p>
                        
                        <!-- Wildboar Section -->
                        <h6 class="font-weight-bold text-primary mt-4">Wildboar: Shapelet-Based Time Series Classification</h6>
                        <p><strong>Wildboar</strong> is a shapelet-based method for time series classification that leverages shapelet transforms to identify significant patterns within the time series data. By using an efficient search strategy, Wildboar can extract shapelets (subsequences) that differentiate between classes, supporting both interpretability and high classification performance.</p>
                        <p>Wildboar is particularly suited for binary classification tasks where key patterns in the series can be leveraged to distinguish classes. With options to control the number of shapelets and depth of classification trees, Wildboar offers a highly customizable approach to time series counterfactuals. Key highlights include:</p>
                        <ul class="pl-3">
                            <li><strong>Efficiency:</strong> Optimized shapelet discovery and tree-based classification.</li>
                            <li><strong>Interpretability:</strong> Shapelet-based features offer insights into the decision boundaries.</li>
                            <li><strong>Flexibility:</strong> Tunable parameters for different classification needs.</li>
                        </ul>
                        <p>Wildboar provides a powerful alternative to gradient-based methods and is ideal for time series datasets where feature interpretability is essential.</p>
                        
                        <p class="mb-0">To get started, select or upload a dataset and choose either Glacier or Wildboar as the classifier to generate counterfactual explanations for time series data.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="glacierConstraintModal" tabindex="-1" role="dialog" aria-labelledby="glacierConstraintModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-light">
                        <h5 class="modal-title font-weight-bold" id="glacierConstraintModalLabel">Glacier Constriants: Guided Counterfactual Explanations</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p><strong>Glacier</strong> is a model-agnostic method for generating locally constrained counterfactual explanations in time series classification. It utilizes gradient search on either the original time series data or in a learned latent space, allowing researchers flexibility to apply constraints that promote realistic and context-sensitive modifications.</p>
                        
                        <p>This approach is particularly suited for binary classification tasks with time series data, using constraints that guide changes to particular data segments while discouraging modifications to others, which results in more feasible counterfactuals. Glacier's flexibility extends to four configurations:</p>
                        
                        <ul class="pl-3">
                            <li><strong>Unconstrained:</strong> Applies changes across the entire time series.</li>
                            <li><strong>Example-specific:</strong> Focuses on specific time points in each example using LIMESegment.</li>
                            <li><strong>Global:</strong> Prioritizes important segments across all test examples.</li>
                            <li><strong>Uniform:</strong> Minimizes changes across the series for a broader application.</li>
                        </ul>
                        
                        <p>Designed to be compatible with modern classifiers, Glacier has been tested across 40 datasets from the UCR archive. This allows users to visualize how counterfactual explanations impact time series classifications and supports critical insights into model decision-making processes.</p>
                        
                        <p>For full functionality, select or upload a dataset and pick a pre-trained model to start generating counterfactuals with Glacier.</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Right Column: New Experiment Details -->
        <!-- <div class="row" id="new_experiment_details" style="display:none;" style="padding-top: 50px;">
            <div class="col-xl-4 col-lg-4 mb-4">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold">New Experiment Details</h6>
                    </div>
                    <div class="card-body">
                        <h6 class="text-muted mb-3">Constraint</h6>
                        <select required id="constraint" class="form-control selectpicker mb-3">
                            <option value="" disabled selected hidden>Select constraints for counterfactuals</option>
                            <option value="unconstrained">Unconstrained</option>
                            <option value="local">Local</option>
                            <option value="global">Global</option>
                            <option value="uniform">Uniform</option>
                        </select>

                        <h6 class="text-muted mb-3">Predicted Margin Weight</h6>
                        <input name="w_value" id="slider" type="range" min="0" max="1" step="0.1" class="w-100 mb-2">
                        <output id="value" class="d-block text-center font-weight-bold"></output>

                        <div class="d-flex justify-content-center mt-4">
                            <div id="error_message_new_x" class="alert alert-danger text-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
                                <i class="fas fa-exclamation-triangle"></i> Please correct errors before proceeding.
                            </div>
                            <span class="loader" id="cfbtn_loader_2" style="display: none;"></span>
                            <button class="btn btn-primary mt-3 w-100 compute_counterfactual" id="cfbtn_2" role="button" name="cf">Run New Experiment!</button>
                        </div>
                    </div>
                </div>
            </div>
        </div> -->

        <!-- Modal Structure -->
        <div class="modal fade" id="newExperimentModal" tabindex="-1" role="dialog" aria-labelledby="newExperimentModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content shadow-lg">
                    <!-- Modal Header -->
                    <div class="modal-header bg-primary text-white">
                        <h5 class="modal-title" id="newExperimentModalLabel">New Experiment Details</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <!-- Modal Body -->
                    <div class="modal-body p-4">
                        <!-- Constraint Selection -->
                        <div class="form-group mb-4">
                            <label for="constraint" class="font-weight-bold text-muted">Constraint</label>
                            <select required id="constraint" class="form-control" aria-describedby="constraintHelp">
                                <option value="" disabled selected hidden>Select constraints for counterfactuals</option>
                                <option value="unconstrained">Unconstrained</option>
                                <option value="local">Local</option>
                                <option value="global">Global</option>
                                <option value="uniform">Uniform</option>
                            </select>
                            <small id="constraintHelp" class="form-text text-muted">Choose the type of constraint for the experiment.</small>
                        </div>
        
                        <!-- Predicted Margin Weight -->
                        <div class="form-group mb-4">
                            <label for="slider" class="font-weight-bold text-muted">Predicted Margin Weight</label>
                            <input name="w_value" id="slider" type="range" min="0" max="1" step="0.1" class="form-control-range">
                            <output id="value" class="d-block text-center font-weight-bold mt-2">0.5</output>
                        </div>
        
                        <!-- Error Message -->
                        <div id="error_message_new_x" class="alert d-none" role="alert"></div>
        
                        <!-- Success Message -->
                        <div id="success_message" class="alert alert-success d-none" role="alert"></div>
        
                        <!-- Run Experiment Button -->
                        <div class="d-flex justify-content-center mt-4">
                            <button class="btn btn-primary btn-lg compute_counterfactual d-flex align-items-center" id="cfbtn_2" role="button" name="cf">
                                <i class="fas fa-play-circle mr-2"></i> Run New Experiment!
                            </button>
                        </div>
                        <div class="row justify-content-center align-items-center my-4">
                            <div id="cfbtn_loader_2" class="col-auto" style="display:none;">
                                <div class="d-flex align-items-center text-muted">
                                    <div class="spinner-border spinner-border-sm text-primary mr-2" role="status"></div>
                                    <span>Processing...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

<script>
    // Update slider output dynamically
    const slider = document.getElementById("slider");
    const output = document.getElementById("value");
    slider.addEventListener("input", () => {
        output.textContent = slider.value;
    });
</script>
        <!-- Optional Column: Class Label -->
        {% if dataset_type == "timeseries" %}
            <div class="row" id="class_label_container" style="display: none; padding-top: 70px;">
                <!-- Step Title Header -->
                <div class="col-12 mb-4">
                    <h5 class="text-left font-weight-bold">Step 2: Pick a Sample Data</h5>
                </div>
            
                <!-- Left Column: Data Samples for Experiment -->
                <div class="col-xl-4 col-lg-4 mb-4">
                    <div class="card border-0 shadow-sm h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold">Data Samples for Experiment</h6>
                        </div>
                        <div class="card-body">
                            <h6 class="text-muted mb-3">Class Label</h6>
                            {% for target_label_value, target_label_text in target_label_info %}
                                <div class="form-check py-2 border-bottom">
                                    <input class="form-check-input" type="radio" name="class_label" value="{{ target_label_value }}">
                                    <label class="form-check-label">{{ target_label_text }} ({{ target_label_value }})</label>
                                </div>
                            {% endfor %}
            
                            <!-- Example Entries Selection -->
                            <div id="entries_container" class="pt-4">
                                <h6 class="text-muted mb-3">Example Entries</h6>
                                <select id="entries" class="form-control selectpicker">
                                    <option value="" disabled selected hidden>Select a timeseries entry</option>
                                    {% for id in range %}
                                        <option value="{{ id }}">Timeseries {{ id }}</option>
                                    {% endfor %}
                                </select>
                            </div>
            
                            <!-- Plot Sample Button -->
                            <div class="d-flex justify-content-center mt-4">
                                <button class="btn btn-primary w-100 plot_sample" id="cfbtn_3" role="button" name="cf">Plot Sample!</button>
                                <span class="loader ml-2" id="cfbtn_loader_3" style="display: none;"></span>
                            </div>
                            <div class="d-flex justify-content-center align-items-center mt-3">
                                <span class="loader" id="class_label_loader" style="display: none;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- Right Column: Selected Data Sample -->
                <div class="col-xl-8 col-lg-8 mb-4" id="ecg_data_container" style="display: none;">
                    <div class="card border-0 shadow-sm h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold">Selected Data Sample</h6>
                            <i class="fas fa-wave-square text-muted"></i>
                        </div>
                        <div class="card-body d-flex justify-content-center align-items-center" id="ecg_data">
                            <!-- Original Timeseries data visualization will go here -->
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}
         
        <div class="d-flex justify-content-center mt-4">
            <div id="error_message_new_x_2" class="alert alert-danger alert-dismissible text-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
                <i class="fas fa-exclamation-triangle"></i> 
                <span>Please correct errors before proceeding.</span>
                <button type="button" class="close" aria-label="Close" onclick="$('#error_message_new_x_2').hide();">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
        
        {% if dataset_type == "tabular" %}
            <!-- Counterfactuals Section for Tabular Data -->
            <div class="row" id="counterfactuals" style="display:none;">
                <!-- Title Row -->
                <div class="col-12 mb-3" style="padding-top: 50px;">
                    <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 2: Pick a point in the graph to view its values</h5>
                </div>

                <!-- Main Content Row -->
                <div class="col-xl-7 col-lg-7 mb-4">
                    <div class="card shadow-sm border-0 h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-semibold">Pick a Point in the Graph (t-SNE) and Compute Its Counterfactuals</h6>
                        </div>
                        <div class="card-body" id="tsne_container">
                            <!-- t-SNE graph content will be dynamically loaded here -->
                        </div>
                    </div>
                </div>

                <!-- Right Column: Original Data Container -->
                <div class="col-xl-5 col-lg-5 mb-4" id="cftable_container" style="display: none;">
                    <div class="card shadow-sm border-0 h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-semibold">Original Data</h6>
                        </div>
                        <div class="card-body">
                            <div class="scrollit table-responsive sticky-top-table" id="cftable" style="width: 100%;"></div>
                            <div class="d-flex justify-content-center mt-3">
                                <span class="loader" id="og_point_loader" style="display: none;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="row justify-content-start" id="features_to_vary" style="display: none;">
                <!-- Features to Vary Card -->
                <div class="col-12 mb-3" style="padding-top: 70px;">
                    <h5 class="text-left font-weight-bold" style="padding-top: 10px;">Step 3: Select the features to vary and execute</h5>
                </div>

                <div class="col-xl-12 col-lg-12">
                    <div class="card shadow-sm border-1 animate-card">
                        <!-- Card Header -->
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0">Features to Vary</h6>
                            <i id="toggle-btn" class="arrow fas fa-chevron-circle-up"></i>
                        </div>
                        <div id="dropdown-div" class="card-body" style="display: block;"> <!-- Initially expanded -->
                            <!-- Feature Selection Container with Scroll -->
                            <div id="features_to_vary_container" style="max-height: 300px; overflow: auto; padding: 20px 20px;">
                                <!-- Search Box -->
                                <input type="text" id="searchInput" class="form-control mb-3" placeholder="Search features...">
                                
                                <!-- Buttons -->
                                <div class="d-flex flex-wrap justify-content-between mb-2">
                                    <button class="btn btn-outline-primary mb-2 flex-fill mr-2" onclick="selectAll(true)">Select All</button>
                                    <button class="btn btn-outline-danger mb-2 flex-fill mr-2" onclick="selectAll(false)">Deselect All</button>
                                    <button class="btn btn-outline-secondary mb-2 flex-fill" onclick="sortByImportance()">Sort by Importance</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endif %}

        <!-- cfbtn_container Section -->
        <div class="row" id="cfbtn_container" style="display: none; padding-top: 20px; padding-bottom: 20px;">
            <div class="col-sm d-flex justify-content- flex-column align-items-center">
                <div id="error-message" class="alert alert-danger align-items-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
                    <i class="fas fa-exclamation-triangle"></i> Please fill out all required fields.
                </div>   
                
                <div id="success-message" class="alert alert-success align-items-center" style="display: none; width: 100%; max-width: 400px;" role="alert">
                    <i class="fas fa-check-circle"></i> Counterfactuals were generated succefully.
                </div>
                <span class="loader" id="cfbtn_loader" style="display: none;"></span>
                
                <button class="btn btn-outline-primary mb-2 flex-fill mr-2 run_counterfactual" id="cfbtn" role="button" name="cf">Run Counterfactuals!</button>
                <button class="btn btn-outline-primary mb-2 flex-fill mr-2" id="cfbtn_check" role="button" style="display: none;">View Counterfactuals</button>
                
            </div>
        </div>

        {% if dataset_type == "tabular" %}
            <div class="row" id="cf_results" style="display: none; padding-top: 200px;">
                <!-- Step 4 Title -->
                <div class="col-12 mb-4 text-center">
                    <h5 class="font-weight-bold">Step 4: Visualization</h5>
                </div>
            
                <!-- Enhanced t-SNE Visualization Card -->
                <div class="col-xl-7 col-lg-7 mb-4" id="enhanced">
                    <div class="card shadow-sm border-0 h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3">
                            <h6 class="m-0 font-weight-semibold">Enhanced t-SNE Visualization</h6>
                        </div>
                        <div class="card-body d-flex justify-content-center align-items-center" id="tsne_enhanced_container">
                        </div>
                    </div>
                </div>
            
                <!-- Generated Counterfactuals Card -->
                <div class="col-xl-5 col-lg-5 mb-4">
                    <div class="card-header bg-light text-dark py-3">
                        <h6 class="m-0 font-weight-semibold">Generated Counterfactuals</h6>
                        <p class="text-muted mt-2 mb-0" style="font-size: 0.85rem;">
                            Select a counterfactual to visualize it alongside the original point in the t-SNE plot. The two points will be highlighted for easy comparison.
                        </p>
                    </div>
                    
                    <!-- Counterfactual Selection Header -->
                    <div class="row justify-content-center mb-3" id="og_cf_headers" style="display: none;">
                        <div class="col-12 text-center">
                            <div id="cf_selection"></div>
                        </div>
                    </div>
            
                    <!-- Counterfactual Data Table -->
                    <div class="row justify-content-center animate-card" id="og_cf_row" style="display: none;">
                        <div class="scrollit table-responsive table-bordered" id="counterfactual" style="max-height: 400px;">
                            <!-- Counterfactual data table content will be dynamically loaded here -->
                        </div>
                    </div>
                </div>
            </div>
        {% elif dataset_type == "timeseries" %}
            <!-- Counterfactual Timeseries Data Card -->
            <div class="row" style="padding-top: 200px;" id="timeseries_cf_generated">
                <div class="col-xl-12 col-lg-12 mb-4" id="cf_ecg_container" style="display: none;">
                    <div class="card border-0 shadow-sm h-100 animate-card">
                        <div class="card-header bg-light text-dark py-3 d-flex justify-content-between align-items-center">
                            <h6 class="m-0 font-weight-bold">Counterfactual Generated for the Data Sample</h6>
                            <i class="fas fa-wave-square text-muted"></i>
                        </div>
                        <div class="card-body" id="cf_ecg_data" style="min-height: 200px; display: flex; align-items: center; justify-content: center;">
                            <!-- Counterfactual Timeseries data visualization will go here -->
                        </div>
                    </div>
                </div>
            </div>
            
        {% endif %}
        
        <div class="row mt-3" id="new_or_load">
            <div class="col d-flex justify-content-center">
                <div class="text-center mt-4 d-flex justify-content-center">
                    <!-- Back to Dataset Selection Button -->
                    <button id="backToDatasetButton" class="btn btn-view-models mr-3">
                        <i class="fas fa-arrow-left mr-2"></i> Try another dataset
                    </button>
                    
                    <!-- View Counterfactuals Button -->
                    <button id="viewPreTrainedButton" class="btn btn-view-models">
                        View another pre trained model <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Include JS Files -->
<script type="module" src="{% static 'js/click_on_graph.js' %}"></script>
<script type="module" src="{% static 'js/counterfactuals.js' %}"></script>
<script type="module" src="{% static 'js/radio_model.js' %}"></script>
<script src="{% static 'js/features_to_vary.js' %}"></script>

{% endblock content %}