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


<!-- Main Content -->
<div id="content">

    <!-- Intro Section -->
    <div id="home_intro" class="intro-section py-5 text-center position-relative">
        <div class="container">
            <!-- Animated Background Graphics -->
            <div class="background-shape shape-1"></div>
            <div class="background-shape shape-2"></div>

            <!-- Main Heading -->
            <div class="intro-content position-relative">
                <div class="logos d-flex justify-content-center align-items-center mb-4 fade-in">
                    <img src="{% static 'img/su_logo.png' %}" alt="Stockholm University Logo" class="logo su-logo mx-3">
                    <img src="{% static 'img/digital_features.png' %}" alt="Digital Features Logo" class="logo df-logo mx-3">
                </div>
                <h1 class="display-4 text-dark mb-4 fade-in">
                    Welcome to the <a href="https://www.su.se/english/research/research-catalogue/research-projects/6/extremum" target="_blank" class="text-primary">Extremum Dashboard</a>
                </h1>
                <p class="lead text-muted fade-in mx-auto" style="max-width: 800px;">
                    Your gateway to exploring health informatics and time-series datasets with ease.
                </p>
            </div>
        </div>
    </div>


    <div class="about-project-section py-5 position-relative">
        <div class="container" style="padding-top:250px;">
            <!-- Main Section with Split Layout -->
            <div class="about-project-section py-5 position-relative fade-in">
                <div class="container">
                    <div class="row align-items-center">
                        <!-- Content Section -->
                        <div class="col-lg-7">
                            <h2 class="h4 text-dark mb-3 fade-in">About the Extremum Dashboard</h2>
                            <p class="text-muted fade-in">
                                The <strong>Extremum Dashboard</strong>, developed by <strong>Stockholm University</strong>, is part of the 
                                <a href="https://www.su.se/english/research/research-catalogue/research-projects/6/extremum" target="_blank" class="text-primary">EXTREMUM project</a>. It combines advanced AI with ethical practices to improve healthcare outcomes.
                            </p>
                            <ul class="list-unstyled mt-4 fade-in">
                                <li class="mb-3">
                                    <i class="fas fa-layer-group text-primary mr-2"></i>
                                    <strong>Unified Data Representation:</strong> Seamlessly integrate complex medical datasets.
                                </li>
                                <li class="mb-3">
                                    <i class="fas fa-brain text-success mr-2"></i>
                                    <strong>Explainable Predictive Models:</strong> Build AI solutions that are interpretable and reliable.
                                </li>
                                <li class="mb-3">
                                    <i class="fas fa-balance-scale text-warning mr-2"></i>
                                    <strong>Ethical Compliance:</strong> Ensure AI aligns with ethical and legal standards.
                                </li>
                            </ul>
                            <a href="https://www.su.se/english/research/research-catalogue/research-projects/6/extremum" target="_blank" class="btn btn-outline-primary rounded-pill">
                                Learn More
                            </a>
                        </div>
            
                        <!-- Image Section -->
                        <div class="col-lg-5 text-center">
                            <div class="d-flex align-items-center justify-content-center
                                        rounded shadow-lg fade-in bg-light"
                                style="height:250px;">
                                <div>
                                    <i class="fas fa-project-diagram fa-3x text-primary mb-3"></i>
                                    <div class="fw-semibold">Data Science Research Group</div>
                                    <a href="https://utbildning.su.se/english/research/research-catalogue/research-groups/6/data-science-research-group"
                                    target="_blank"
                                    class="small text-primary">
                                    View at Stockholm University
                                    </a>
                                </div>
                            </div>
                        </div>

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

            <!-- <div class="collapse mt-4 fade-in" id="extremumDetails">
                <div class="text-muted mx-auto" style="max-width: 700px;">
                    <h4 class="h5 text-dark text-center mb-3">About the EXTREMUM Project</h4>
                    <p>
                        The <strong>EXTREMUM Project</strong> focuses on developing an explainable machine learning platform to analyze complex medical data. It addresses two key healthcare areas:
                    </p>
                    <ul class="list-unstyled text-center my-4">
                        <li class="mb-3">
                            <i class="fas fa-heartbeat text-danger"></i>
                            <span class="ml-2">Adverse Drug Event Detection</span>
                        </li>
                        <li>
                            <i class="fas fa-stethoscope text-info"></i>
                            <span class="ml-2">Cardiovascular Disease Detection</span>
                        </li>
                    </ul>
                    <p>
                        This project integrates medical data sources, builds interpretable predictive models, and ensures ethical integrity in machine learning.
                    </p>
                    <p class="text-center">
                        <a href="https://datascience.dsv.su.se/projects/extremum.html" target="_blank" class="btn btn-outline-primary rounded-pill">
                            Learn More
                        </a>
                    </p>
                </div>
            </div>
             -->

            <!-- Feature Carousel Section -->
            <div class="feature-carousel py-5 bg-light mt-5 fade-in">
                <div class="container">
                    <h3 class="h4 text-dark text-center mb-4">Key Innovations in EXTREMUM</h3>
                    <p class="text-muted text-center mx-auto mb-5" style="max-width: 700px;">
                        Discover the powerful tools and methodologies developed under the EXTREMUM project, designed to revolutionize explainable AI for healthcare applications.
                    </p>
                    <div id="carouselFeatures" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="hover">
                        <ol class="carousel-indicators">
                            <li data-target="#carouselFeatures" data-slide-to="0" class="active" tabindex="0" aria-label="Feature 1"></li>
                            <li data-target="#carouselFeatures" data-slide-to="1" tabindex="0" aria-label="Feature 2"></li>
                        </ol>

                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div class="feature-card p-5 shadow rounded text-center">
                                    <i class="fas fa-wave-square text-info fa-3x mb-4"></i>
                                    <h5 class="text-dark">Wildboar</h5>
                                    <p class="text-muted">
                                        Created by <strong>Isak Samsten</strong>, Wildboar is a Python library for temporal machine learning, offering tools for classification, regression, and explainability.
                                    </p>
                                    <a href="https://github.com/wildboar-foundation/wildboar" target="_blank" class="btn btn-primary rounded-pill px-4 py-2 mt-3">
                                        Learn More <i class="fas fa-external-link-alt ml-2"></i>
                                    </a>
                                </div>
                            </div>

                            <div class="carousel-item">
                                <div class="feature-card p-5 shadow rounded text-center">
                                    <i class="fas fa-snowflake text-primary fa-3x mb-4"></i>
                                    <h5 class="text-dark">Glacier</h5>
                                    <p class="text-muted">
                                        Developed by <strong>Zhendong Wang</strong>, Glacier generates counterfactual explanations for time series classification, ensuring realistic and interpretable results.
                                    </p>
                                    <a href="https://github.com/zhendong3wang/learning-time-series-counterfactuals" target="_blank" class="btn btn-primary rounded-pill px-4 py-2 mt-3">
                                        Learn More <i class="fas fa-external-link-alt ml-2"></i>
                                    </a>
                                </div>
                            </div>
                        </div>

                        <a class="carousel-control-prev" href="#carouselFeatures" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselFeatures" role="button" data-slide="next">
                            <span class="carousel-control-next-icon bg-dark rounded-circle p-2" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Call to Action Section -->
    <div class="separator-section py-5 text-center bg-light">
        <div class="container">
            <h3 class="h5 text-dark mb-4 fade-in">Ready to start your journey?</h3>
            <button class="btn btn-outline-primary fade-in" onclick="document.getElementById('dataset_selection').scrollIntoView({behavior: 'smooth'})">
                Explore Datasets <i class="fas fa-arrow-down ml-2"></i>
            </button>
        </div>
    </div>

<script>
    // Add visibility to fade-in elements on scroll
    const fadeElements = document.querySelectorAll('.fade-in');

    const elementInView = (el, percentageScroll = 100) => {
        const elementTop = el.getBoundingClientRect().top;
        return elementTop <= (window.innerHeight || document.documentElement.clientHeight) * (percentageScroll / 100);
    };

    const displayFadeElement = (element) => {
        element.classList.add('visible');
    };

    const handleFadeAnimation = () => {
        fadeElements.forEach((el) => {
            if (elementInView(el)) {
                displayFadeElement(el);
            }
        });
    };

    window.addEventListener('scroll', () => {
        handleFadeAnimation();
    });

    // Initial check for elements already in view
    handleFadeAnimation();
</script>
</div>
<!-- Page Heading -->

<!-- Combined Heading and Button Group for Dataset Selection -->
<style>
    /* Section Styling */
    .dataset-section {
        padding: 100px 20px;
        background-color: #f8f9fa;
        text-align: center;
    }

    .dataset-section h2 {
        font-size: 1.5rem;
        font-weight: 600;
        color: #333;
        margin-bottom: 1rem;
    }

    .dataset-section p {
        font-size: 0.95rem;
        color: #666;
        margin-bottom: 2rem;
        max-width: 600px;
        margin: 0 auto;
        line-height: 1.5;
    }

    /* Button Styling */
    .btn-dataset {
        font-size: 1rem;
        font-weight: 500;
        border: 1px solid #ccc;
        color: #333;
        background-color: white;
        border-radius: 5px;
        padding: 12px 20px;
        margin: 10px;
        transition: all 0.2s ease;
        width: 200px;
    }

    .btn-dataset:hover {
        border-color: #007bff;
        color: #007bff;
    }

    .btn-dataset.active {
        background-color: #007bff;
        color: white;
        border-color: #007bff;
    }

    /* Responsive Alignment */
    .dataset-section .row {
        justify-content: center;
        gap: 1rem;
    }

    @media (max-width: 768px) {
        .btn-dataset {
            width: 180px;
            padding: 10px 15px;
        }
    }
</style>

<div class="dataset-section" style="padding-top:300px;">
    <!-- Title -->
    <h2 id="dataset_selection">Choose Your Dataset</h2>
    <p>
        Select a dataset to visualize its graphs and perform advanced operations like using pre-trained models 
        or computing counterfactuals. Your choice will be used throughout the session.
    </p>

    <!-- Dataset Selection Buttons -->
    <div class="row">
        {% csrf_token %}

        <!-- Breast Cancer Dataset -->
        <button type="button" class="btn btn-dataset {% if df_name == 'breast-cancer' %}active{% endif %}" id="breast-cancer">
            Breast Cancer
        </button>

        <!-- Stroke Dataset -->
        <button type="button" class="btn btn-dataset {% if df_name == 'stroke' %}active{% endif %}" id="stroke">
            Stroke
        </button>

        <!-- Timeseries Dataset -->
        <button type="button" class="btn btn-dataset {% if dataset_type == 'timeseries' and upload == 0 %}active{% endif %}" id="timeseries">
            Timeseries
        </button>

        <!-- Upload Dataset (Optional) -->
        <!-- Uncomment if needed -->
        <button type="button" class="btn btn-dataset {% if upload == 1 %}active{% endif %}" id="upload">
            Upload Dataset
        </button>
       
    </div>
</div>


<!-- Upload Form Section -->
<div class="row justify-content-center">
    <div class="col-xl-5 col-lg-6" id="upload_col" {% if upload %} style="display: block;" {% else %} style="display: none;" {% endif %}>
        <div class="card shadow-sm border-0 animate-card">
            <div class="card-header bg-primary text-muted d-flex align-items-center">
                <h6 class="mb-0">Upload Dataset</h6>
                <i class="fas fa-upload ml-auto"></i>
            </div>
            <div class="card-body bg-light">
                <div class="row align-items-start">
                    <!-- Left Column: Form Section -->
                    <div class="col-md-7 col-sm-12 mb-4">
                        <form id="csv_form" method="POST" enctype="multipart/form-data">
                            {% csrf_token %}
                            
                            <!-- Data Type Selection -->
                            <fieldset class="form-group mb-4">
                                <legend class="col-form-label small text-secondary font-weight-semibold">Data Type</legend>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="dataset_type" id="tabular" value="tabular" required>
                                    <label class="form-check-label" for="tabular">Tabular</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="dataset_type" id="timeseries" value="timeseries" required>
                                    <label class="form-check-label" for="timeseries">Timeseries</label>
                                </div>
                            </fieldset>
                            
                            <!-- File Upload -->
                            <div class="form-group mb-4">
                                <label class="small text-secondary font-weight-semibold" for="doc">Select File</label>
                                <input class="form-control-file" type="file" id="doc" name="excel_file" required>
                                <small class="text-muted d-block mt-1">Supported format: CSV</small>
                            </div>
                        </form>
                    </div>
                    
                    <!-- Right Column: Uploaded Files Section -->
                    <div class="col-md-5 col-sm-12 mb-5">
                        <fieldset class="form-group mb-4">
                            <legend class="col-form-label small text-secondary font-weight-semibold">Uploaded Files</legend>
                            <div id="radio_buttons">
                                {% if uploaded_files %}
                                    {% for uploaded_file in uploaded_files %}
                                        <div class="form-check mb-2 d-flex align-items-start">
                                            <!-- Radio Button -->
                                            <input class="form-check-input mr-2" type="radio" {% if df_name == uploaded_file %} checked {% endif %} name="uploaded_file" id="element_{{ forloop.counter }}" value="{{ uploaded_file }}" required>
                                            
                                            <!-- Label -->
                                            <label class="form-check-label mr-auto text-break" for="element_{{ forloop.counter }}">
                                                {{ uploaded_file }}
                                            </label>
                                            
                                            <!-- Delete Button -->
                                            <button type="button" class="delete-file-icon p-0 ml-2 text-muted close align-self-start" data-file="{{ uploaded_file }}" aria-label="Delete {{ uploaded_file }}">
                                                <span aria-hidden="true">&times;</span>
                                            </button>
                                        </div>
                                    {% endfor %}
                                    <p class="small text-muted" id="default-non-uploaded" style="display:none;">No files uploaded yet. Please upload a dataset to select it here.</p>
                                {% else %}
                                    <p class="small text-muted" id="default-non-uploaded">No files uploaded yet. Please upload a dataset to select it here.</p>
                                {% endif %}
                            </div>
                        </fieldset>
                    </div>
                </div>
                
                <div class="row align-items-center">
                    <div class="col d-flex align-items-center">
                        <!-- Upload Button -->
                        <input class="btn btn-primary btn-sm mr-3" type="submit" value="Upload" id="upload_btn">
                        
                        <!-- Loader Icon -->
                        <div class="loader ml-2" id="cfbtn_loader" style="display:none;">
                        </div>
                        
                        <!-- Success Message -->
                        <div id="success-message" class="alert alert-success ml-3 mb-0 flex-grow-1" style="display:none; max-width: 400px;" role="alert">
                            <button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <span class="ml-2">File uploaded successfully.</span>
                        </div>
                        
                        <!-- Error Message -->
                        <div id="error-message" class="alert alert-warning ml-3 mb-0 flex-grow-1" style="display:none; max-width: 400px;" role="alert" aria-live="assertive" aria-atomic="true">
                            <button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                </div>
                            
            </div>
            <div class="card-footer bg-white text-center">
                <small class="text-muted">Manage your datasets effectively. Ensure data is accurate and up-to-date.</small>
            </div>
        </div>
    </div>
</div>

<!-- Minimal Delete Confirmation Modal -->
<div class="modal fade" id="deleteFileModal" tabindex="-1" role="dialog" aria-labelledby="deleteFileModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-sm">
            <div class="modal-header border-0">
                <h6 class="modal-title text-danger" id="deleteFileModalLabel">Confirm Deletion</h6>
                <button type="button" class="close text-muted" data-dismiss="modal" aria-label="Close" style="font-size: 1.2rem;">
                    &times;
                </button>
            </div>
            
            <div class="modal-body text-center py-3">
                <p class="mb-1">Are you sure you want to delete <span id="fileToDeleteName" class="font-weight-bold"></span> dataset?</p>
                <small class="text-muted">This action is permanent.</small>
                <div class="loader" id="loader_modal_delete" style="display: none;"></div>
                <div id="success-message-modal-delete" class="alert alert-success ml-3 mb-0 flex-grow-1" style="display:none; max-width: 400px;" role="alert">
                    <button type="button" class="close close-alert ml-auto p-0" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <span class="ml-2">File deleted successfully.</span>
                </div>
            </div>            

            <div class="modal-footer justify-content-center border-0" id="cancel_delete_buttons_modal_delete">
                <button type="button" class="custom-btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="custom-btn-danger" id="confirmDeleteButton">Delete</button>
            </div>
            
        </div>
    </div>
</div>
<!-- Timeseries Dataset Selection -->
<div class="row justify-content-center">
    <div class="col-lg-5" {% if dataset_type != "timeseries" or upload != 0 %} style="display:none;" {% endif %} id="timeseries-datasets">
        <div class="card border-0 shadow-sm mb-3 animate-card"> 
            <div class="card-body">
                {% csrf_token %}
                <fieldset class="form-group">
                    <legend class="h6 mb-4 text-muted">Select a Timeseries Dataset</legend>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="two-lead-ecg" value="two-lead-ecg" {% if df_name == "two-lead-ecg" %} checked {% endif %}>
                        <label class="form-check-label" for="two-lead-ecg">Two lead ECG</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="gun-point" value="gun-point" {% if df_name == "gun-point" %} checked {% endif %}>
                        <label class="form-check-label" for="gun-point">Gun Point</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="ecg-five-days" value="ecg-five-days" {% if df_name == "ecg-five-days" %} checked {% endif %}>
                        <label class="form-check-label" for="ecg-five-days">ECG Five Days</label>
                    </div>
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="italy-power-demand" value="italy-power-demand" {% if df_name == "italy-power-demand" %} checked {% endif %}>
                        <label class="form-check-label" for="italy-power-demand">Italy Power Demand</label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="timeseries_dataset" id="ford-a" value="ford-a" {% if df_name == "ford-a" %} checked {% endif %}>
                        <label class="form-check-label" for="ford-a">Ford-A</label>
                    </div>
                </fieldset>    
            </div>
        </div>
    </div>
</div>

<!-- Data and Stats Display -->
<div class="row mb-4">
    <!-- Data Section -->
    <div class="col-lg-6" id="df" style="display: none;">
        <div class="card border-0 shadow-sm h-100 animate-card">
            <div class="card-header bg-light py-3 border-bottom">
                <h6 class="m-0 font-weight-semibold text-dark">Data</h6>
            </div>
            <div class="card-body">
                <div class="scrollit table-responsive table table-bordered sticky-top-table" id="df_div">
                    {% if data_to_display %}
                        <div id="df_container">
                            {{ data_to_display|safe }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Stats Section -->
    <div class="col-lg-6" id="df_stats" style="display: none;">
        <div class="card border-0 shadow-sm h-100 animate-card-delay">
            <div class="card-header bg-light py-3 border-bottom">
                <h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
            </div>
            <div class="card-body">
                <div class="d-flex flex-column align-items-stretch" id="stats_div">
                    {% if data_to_display %}
                        <div class="d-flex mb-3 " id="selection">
                            <select class="custom-select mr-2" id="feature1">
                                {% for feature in features %}
                                    <option value="{{ feature }}" {% if feature == feature1 %}selected{% endif %}>{{ feature }}</option>
                                {% endfor %}
                            </select>
                            <select class="custom-select mr-2" id="feature2">
                                {% for feature in features %}
                                    <option value="{{ feature }}" {% if feature == feature2 %}selected{% endif %}>{{ feature }}</option>
                                {% endfor %}
                            </select>
                            <select class="custom-select" id="label">
                                {% for label in labels %}
                                    <option value="{{ label }}" {% if label == curlabel %}selected{% endif %}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="plotly_fig" id="stats_container">{{ fig|safe }}</div>
                    {% endif %}
                </div>
                <div class="d-flex justify-content-center">
                    <span class="loader" id="loader_stats" style="display: none;"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Timeseries Confidence and Stats -->
    <div class="col-lg-6" id="ts_confidence" style="display: none;">
        <div class="card border-0 shadow-sm h-100 animate-card">
            <div class="card-header bg-light py-3 border-bottom">
                <h6 class="m-0 font-weight-semibold text-dark">Confidence</h6>
            </div>
            <div class="card-body">
                <div id="ts_confidence_div">
                    {% if fig1 %}
                        <div class="plotly_fig" id="ts_confidence_container">{{ fig1|safe }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Timeseries Stats Section -->
    <div class="col-lg-6" id="ts_stats" style="display: none;">
        <div class="card border-0 shadow-sm h-100 animate-card-delay">
            <div class="card-header bg-light py-3 border-bottom">
                <h6 class="m-0 font-weight-semibold text-dark">Stats</h6>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-center mb-3" id="selection"></div>
                <div class="d-flex justify-content-center">
                    <span class="loader" id="loader_stats" style="display: none;"></span>
                </div>
                <div id="ts_stats_div">
                    {% if fig %}
                        <div class="plotly_fig" id="ts_stats_container">{{ fig|safe }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Window -->
<div class="modal fade" id="labelSelectionModal" tabindex="-1" aria-labelledby="labelSelectionModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content shadow-sm">
            <!-- Modal Header -->
            <div class="modal-header">
                <h5 class="modal-title" id="labelSelectionModalLabel">Assign Positive and Negative Labels</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                {% csrf_token %}
                <p class="text-muted" id="modal-description">
                    Please assign one label as <strong>Positive</strong> and another as <strong>Negative</strong>.
                </p>

                <!-- Positive Label Dropdown -->
                <div class="form-group">
                    <label for="positive-label" class="font-weight-semibold">Positive Label</label>
                    <select id="positive-label" class="form-control" aria-label="Positive Label">
                        <option value="" disabled selected>Select a positive label</option>
                        <!-- Options populated dynamically -->
                    </select>
                </div>

                <!-- Negative Label Dropdown -->
                <div class="form-group mt-3">
                    <label for="negative-label" class="font-weight-semibold">Negative Label</label>
                    <select id="negative-label" class="form-control" aria-label="Negative Label">
                        <option value="" disabled selected>Select a negative label</option>
                        <!-- Options populated dynamically -->
                    </select>
                </div>

                <!-- Error Message -->
                <div id="selection-error" class="alert alert-danger mt-3" style="display:none;" role="alert">
                    <i class="fas fa-exclamation-triangle"></i> Labels must be different. Please select one positive and one negative label.
                </div>

                <!-- Loader -->
                <div id="loader" class="d-none text-center mt-4">
                    <div class="spinner-border text-primary" role="status">
                        <span class="sr-only">Loading...</span>
                    </div>
                    <p class="mt-2 mb-0">Saving your choices...</p>
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary" id="save-label-choices">Save Choices</button>
            </div>
        </div>
    </div>
</div>
<!-- Loader -->
<div class="d-flex justify-content-center">
    <span class="loader" id="loader_ds" style="display: none;"></span>
</div>
<div class="row mt-3" id="new_or_load" style="display:none;">
    <div class="col d-flex justify-content-center">
        <div class="text-center mt-4">
            <button id="viewModelsButton" class="btn btn-view-models">
                View Pre-trained Models
                <i class="fas fa-arrow-right ml-2"></i> <!-- Font Awesome icon for added appeal -->
            </button>
        </div>
    </div>
</div>

<!-- JavaScript -->
<script type="module" src="{% static 'js/home.js' %}"></script>

{% endblock content%}