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

<div class="container-fluid">
    <div class="row">
        <label style="display:flex;
            flex-direction:column;
            align-items: center;">
            <h3>
                Welcome to Extremum, please choose your data
            </h3>
        </label>
        <div class="col-sm d-flex justify-content-center" style="padding-top: 50px;">
            <div class="dataset">
                {% csrf_token %}
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="breast-cancer">
                    <label class="form-check-label" for="flexRadioDefault1">
                    Breast Cancer Dataset
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="stroke">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Stroke prediction Dataset
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="ecg">
                    <label class="form-check-label" for="flexRadioDefault2">
                    ECG Dataset (time-series)
                </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="flexRadioDefault" id="other">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Other (import your dataset)
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" id="loader" style="display: none;">
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <span class="loader">
            </span>
        </div>
    </div>
</div>

<div class="container-fluid" id="import" style="display: none;">
    <div class="row" >
        <div class="col-sm d-flex justify-content-center">
            <form id="csv_form">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h3>
                        <i class="fas fa-upload"></i> Import a file
                    </h3>
                </label>
                <input type="file"
                    id="doc"
                    title="Upload excel file"
                    name="excel_file"
                    style="border: 1px solid black; padding: 5px;"
                    required="required">
                <input type="submit"
                    onclick="import()"
                    value="Upload"
                    name="csv"
                    id="upload_btn"
                    style="border: 1px solid green; padding:5px; border-radius: 2px; cursor: pointer;">
            </form>
        </div>
    </div>
</div>



<div class="container-fluid" id="df" style="display: none;">
    <div class="row">
        <div class="col-sm d-flex justify-content-center" id="selection">
            
        </div>
        <div class="col-sm d-flex justify-content-center">
            
        </div>
    </div>
    <div class="row">
        <div class="col-sm d-flex justify-content-center" id="stats_div">
        </div>
        
        <div class="col-sm d-flex justify-content-center">
            <div class="scrollit" id="df_div">
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" id="ts" style="display: none;">
    <div class="row">
        <div class="col-sm d-flex justify-content-center" id="ts_selection">
            
        </div>
    </div>
    <div class="row">
        <div class="col-sm d-flex justify-content-center" id="ts_stats">
            
        </div>
    </div>
</div>

<div class="container-fluid" id="model" style="display: none;">
    <div class="row justify-content-center">
        <label style="display:flex;
            flex-direction:column;
            align-items: center;">
            <h4>
                Model selection
            </h4>
        </label>
        <div class="col-4" style="padding-top: 50px;">
            <div class="model" style="display:flex;
                flex-direction:column;
                align-items: center;">
                <label>
                    <h5>
                        Pre trained
                    </h5>
                </label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" value="lr">
                    <label class="form-check-label">
                    Logistic Regression (LR)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" value="svm">
                    <label class="form-check-label">
                    Support Vector Machine (SVM)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" value="rf">
                    <label class="form-check-label">
                    Random Forest (RF)
                </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" value="dt">
                    <label class="form-check-label">
                    Decision Tree (DT)
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" value="xgb">
                    <label class="form-check-label">
                    XGBoost (XGB)
                    </label>
                </div>
            </div>
        </div>

        <div class="col-4" style="padding-top: 50px;">
            <div class="model" style="display:flex;
            flex-direction:column;
            align-items: center;">
                <label>
                    <h5>
                        Other 
                    </h5>
                </label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" id="import_model">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Import
                    </label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="modeling_options" id="train_model">
                    <label class="form-check-label" for="flexRadioDefault2">
                    Train a new model
                    </label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" id="preprocessing" style="display: none;">
    <div class="row justify-content-center">
        <div class="col-4" style="padding-top: 10px;">
            <div class="vstack gap-2" style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h5>
                        <i class="fas fa-cog"></i> Preprocessing
                    </h5>
                </label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="std" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox1">Standardization</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="onehot" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox2">One Hot Encoding</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="imp" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox3">Imputations</label>
                </div>
            </div>
        </div>

        <div class="col-4">
            <label style="display:flex;
                flex-direction:column;
                align-items: center;">
                <h5>
                    <i class="fas fa-magic"></i>Pick a model
                </h5>
                <select id="model_name" name="model_names">
                    <option type="submit" value="svm">Support Vector Machine</option>
                    <option type="submit" value="lr" selected>Logistic Regression</option>
                    <option type="submit" value="xgb">XGBoost</option>
                    <option type="submit" value="dt">Decision Tree</option>
                    <option type="submit" value="rf">Random Forest</option>
                </select>
            </label>
        </div>

        <div class="col-4" >
            <label style="display:flex;
                flex-direction:column;
                align-items: center;" id="class_label_train">
                <h5>
                    Pick a class label
                </h5>
                
            </label>
        </div>

        <div class="col-4">
            <label style="display:flex;
                flex-direction:column;
                align-items: center;">
                <h5>
                    Test set ratio
                </h5>
                <input name="test_set_ratio" id="test_set_ratio" type="range" min="0" max="1" step="0.1" style="width: 200px;"/>
                <output id="value"></output>
            </label>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-4" style="display:flex;
        flex-direction:column;
        align-items: center;">
        <button class="button-6 train_test" role="button">Go!</button>
        </div>
    </div>
</div>

<div class="container-fluid" id="ts_preprocessing" style="display: none;">
    <div class="row justify-content-center">
        <div class="col-4" style="padding-top: 10px;">
            <div class="vstack gap-2" style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h5>
                        <i class="fas fa-cog"></i> Preprocessing
                    </h5>
                </label>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="std" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox1">Standardization</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="denoise" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox2">Denoising</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="outlier" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox2">Outlier Detection</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="checkbox" value="imp" name="boxes">
                    <label class="form-check-label" for="inlineCheckbox3">Imputations</label>
                </div>
            </div>
        </div>
        <div class="col-4">
            <label style="display:flex;
                flex-direction:column;
                align-items: center;">
                <h5>
                    Test set ratio
                </h5>
                <input name="test_set_ratio" id="test_set_ratio" type="range" min="0" max="1" step="0.1" style="width: 200px;"/>
                <output id="value"></output>
            </label>
        </div>
    </div>
    
    <div class="row justify-content-center">
        <div class="col-4" style="display:flex;
        flex-direction:column;
        align-items: center;">
        <button class="button-6 train_test" role="button">Go!</button>
        </div>
    </div>
</div>


<div class="container-fluid" id="loader_train" style="display: none;">
    <div class="row">
        <div class="col-sm d-flex justify-content-center">
            <span class="loader">
            </span>

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

<div class="container-fluid" id="figs" style="display: none;">
    <div class="row" id="details_cr_container">
        
    </div>
    <div class="row" id="pca_fi_container">
        
    </div>
</div>

<div class="container-fluid" style="display: none;" id="counterfactuals">
    <div class="row">
        <section>
            <label style="display:flex;
                    flex-direction:column;
                    align-items: center;">
                    <h4>
                        <i class="fas fa-cog"></i> Counterfactuals
                    </h4>
                    <h5>
                        Pick a point on the graph
                    </h5>
                </label>
        </section>
    </div>
    <div class="row" id="tsne_container">
       
    </div>

    <div class="row" id="cftable_container">
        <div class="col-md d-flex justify-content-center">
            <div class="scrollit" id="cftable" style="border: 1px solid #bbb; padding: 5px; display: none; max-width: 65%;">
            </div>
        </div>
    </div>
    <div class="row" id="cfbtn_container">
        
        <div class="col-sm d-flex justify-content-center">
            <span class="loader" id="cfbtn_loader" style="display: none;">
            </span>
            <button id="cfbtn" class="button-6 run_counterfactual" role="button" name="cf" style="display:none;">Run Counterfactuals!</button>
        </div>
    </div>

    <div class="row" id="og_cf_headers" style="display:none;">
        <div class="col d-flex justify-content-center">
            <h2>
                Original data
            </h2>
        </div>
        <span class="loader" id="run_counterfactual_loader" style="display: none;">
        </span>
        <span style="display: none; width: 48px; height: 48px;" id="reset_div">
        </span>
        <div class="col d-flex justify-content-center" id="cf_selection">
        </div>
    </div>

    <div class="row" id="og_cf_row" style="display:none;">
        <div class="col-md d-flex justify-content-center" >
            <div class="scrollit" id="original_data">
               
            </div>
        </div>
        <div class="col-md d-flex justify-content-center" >
            <div class="scrollit" id="counterfactual">
                
            </div>
        </div>
    </div>
    <br>
    <br>
</div>

<br>
<br>
<div class="container-fluid">
</div>
<br>
<br>



{% endblock content%}