{% extends "layouts/base.html" %}

{% block title %} Settings {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
        <div>
            <div class="dropdown">
                <button class="btn btn-secondary d-inline-flex align-items-center me-2">
                    <svg class="icon icon-xs me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 16v-8m0 0l-4 4m4-4l4 4"></path>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a2 2 0 002 2h12a2 2 0 002-2v-1"></path>
                    </svg>
                    Importer un fichier texte
                    <input type="file" id="file-upload" style="display:none;" accept=".txt">
                </button>
                <input type="file" id="hidden-file-upload-input" accept=".txt" style="display:none;">
            </div>
        </div>
        <div>
                <button type="button" class="btn btn-gray-800 d-inline-flex align-items-center" data-bs-toggle="dropdown" aria-expanded="false" id="dropdownButton">
                    <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" d="M10 4a1 1 0 011 1v4h4a1 1 0 110 2h-4v4a1 1 0 11-2 0v-4H5a1 1 0 110-2h4V5a1 1 0 011-1z" clip-rule="evenodd"></path>
                    </svg>
                    Filtrer
                </button>
            
                <div class="dropdown-menu dropdown-menu-start mt-2 py-3 px-40 text-white" style="background-color: rgb(31 41 55); border: 1px solid #ddd; border-radius: 8px; padding: 20px;" id="dropdownMenu">
                    <form id="filter-form">
                        <ul class="list-group">
                            <div class="mb-3">
                                <label for="filter-insta-username">Profil Instagram à filtrer</label>
                                <input class="form-control" id="filter-insta-username" name="filter-insta-username" type="text" placeholder="Nom d'utilisateur Insta valide">
                            </div>
                            <div id="insta-username-error"></div>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes privés</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="use-cloned-app" name="use_cloned_app">
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes publics</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_if_public" name="skip_if_public">
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes pro</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_business" name="skip_business" checked>
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes non pro</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_non_business" name="skip_non_business">
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes suivis</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_following" name="skip_following" checked>
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes qui me suivent</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_follower" name="skip_follower" checked>
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes avec un lien dans la bio</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="skip_if_link_in_bio" name="skip_if_link_in_bio" checked>
                                </div>
                            </li>
                            <li class="list-group-item d-flex align-items-center justify-content-between px-2 border-bottom text-gray-800">
                                <div>
                                    <h3 class="h6 mb-1">Ignorer les comptes privés ou publics sans publications&emsp;&emsp;&emsp;</h3>
                                </div>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="follow_private_or_empty" name="follow_private_or_empty">
                                </div>
                            </li>
                        </ul>
                        
                        <div class="mt-3">
                            <button class="btn btn-secondary" type="button" id="apply-button">Appliquer</button> 
                        </div>
                    </form>
                </div>
            <button class="btn btn-gray-800 d-inline-flex align-items-center dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                Planifier
                <svg class="icon icon-xs ms-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            </button>
            <div class="dropdown-menu dashboard-dropdown dropdown-menu-start mt-2 py-1">
                <a class="dropdown-item d-flex align-items-center" href="#working-hours">
                    <svg class="dropdown-icon text-gray-800 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                    Heures d'activité
                </a>
                <div role="separator" class="dropdown-divider my-1"></div>
                <a class="dropdown-item d-flex align-items-center" href="#time-delta">
                    <svg class="dropdown-icon text-gray-400 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 000 2v8a2 2 0 002 2h2.586l-1.293 1.293a1 1 0 101.414 1.414L10 15.414l2.293 2.293a1 1 0 001.414-1.414L12.414 15H15a2 2 0 002-2V5a1 1 0 100-2H3zm11 4a1 1 0 10-2 0v4a1 1 0 102 0V7zm-3 1a1 1 0 10-2 0v3a1 1 0 102 0V8zM8 9a1 1 0 00-2 0v2a1 1 0 102 0V9z" clip-rule="evenodd"></path></svg>
                    Delta de temps
                </a>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12 col-xl-8">
            <div class="card card-body border-0 shadow mb-4">
                <h2 class="h5 mb-4">Ajouter et paramétrer un profil insta</h2>
                <form id="config-form">
                
                    <div class="mb-3">
                        <label for="insta-username">Nom d'utilisateur Instagram</label>
                        <input class="form-control" id="insta-username" name="insta-username" type="text" placeholder="Nom d'utilisateur Insta valide" required>
                    </div>
                    <div class="mb-3">
                        <label for="app-id">ID de l'application</label>
                        <input class="form-control" id="app-id" name="app-id" type="text" value="com.instagram.android" required>
                    </div>
                    <div class="mb-3">
                        <label for="speed-multiplier" class="form-label">Multiplicateur de vitesse</label>
                        <input class="form-control" id="speed-multiplier" name="speed-multiplier" type="text" value="8">
                    </div>

                    <!-- ** -->
                    <div class="mb-3"> 
                        <label for="total-crashes-limit" class="form-label">Nombre maximal autorisé de crashs d'applications (Bot avec ou sans application Instagram)</label>
                        <input class="form-control" id="total-crashes-limit" name="total-crashes-limit" type="text" value="5">
                    </div>

                    <!-- ** -->
                    <div class="mb-3"> 
                        <label for="truncate-sources" class="form-label">Nombre de sources pour interagir(comptes, hashtags ou lieux)</label>
                        <input class="form-control" id="truncate-sources" name="truncate-sources" type="text" value="5">
                    </div>

                    <ul class="list-group">
                        <!-- Case à cocher pour booléens -->
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Utiliser  l'application clonée (valable uniquement sur Xiaomi)</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="use-cloned-app" name="use-cloned-app">
                                <label class="form-check-label" for="use-cloned-app"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Autoriser la version récente d'Instagram (non encore testée)</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="allow-untested-ig-version" name="allow-untested-ig-version">
                                <label class="form-check-label" for="allow-untested-ig-version"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1"> Éteindre l'écran de l'appareil après exécution du bot </h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="screen-sleep" name="screen-sleep">
                                <label class="form-check-label" for="screen-sleep"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Activer l'enregistrement de l'écran</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="screen-record" name="screen-record">
                                <label class="form-check-label" for="screen-record"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Mode débogage</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="debug" name="debug">
                                <label class="form-check-label" for="debug"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Fermer toutes les applications en arrière-plan</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="close-apps" name="close-apps">
                                <label class="form-check-label" for="close-apps"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Stopper l'agent ATX à la fin d'exécution du bot</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="kill-atx-agent" name="kill-atx-agent">
                                <label class="form-check-label" for="kill-atx-agent"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Redémarrer l'agent ATX avant lancement du bot</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="restart-atx-agent" name="restart-atx-agent">
                                <label class="form-check-label" for="restart-atx-agent"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Désactiver la détection des blocages par Instagram</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="disable-block-detection" name="disable-block-detection">
                                <label class="form-check-label" for="disable-block-detection"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Désactiver les filtres (seulement si vous avez appliqué des filtres via le bouton "Filtrer")</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="disable-filters" name="disable-filters">
                                <label class="form-check-label" for="disable-filters"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Ne pas taper les textes caractère par caractère</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="dont-type" name="dont-type">
                                <label class="form-check-label" for="dont-type"></label>
                            </div>
                        </li>     
                        
                        <!-- ** -->
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Compter les plantages des applications(Bot avec application Instagram) </h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="count-app-crashes" name="count-app-crashes">
                                <label class="form-check-label" for="count-app-crashes"></label>
                            </div>
                        </li>     
                        
                        <!-- ** -->
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <div>
                                <h3 class="h6 mb-1">Mélanger l'ordre des actions du bot pour le paramétrage actuel</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="shuffle-jobs" name="shuffle-jobs">
                                <label class="form-check-label" for="shuffle-jobs"></label>
                            </div>
                        </li>     
                    </ul>
                    
                    <br>
                    <!-- Actions -->
                    <h3 class="h6 my-3">ACTIONS</h3>
                    <div class="mb-3">
                        <label for="blogger-followers" class="form-label">Interagir avec les Followers du ou des blogueur(s)</label>
                        <input type="text" id="blogger-followers" name="blogger-followers" class="form-control" value="blogueur1, blogueur2">
                    </div>
                    <div class="mb-3">
                        <label for="blogger-following" class="form-label">Interagir avec les Followings du ou des blogueur(s)</label>
                        <input type="text" id="blogger-following" name="blogger-following" class="form-control" value="blogueur1, blogueur2">
                    </div>
                    <div class="mb-3">
                        <label for="blogger-post-likers" class="form-label">Interagir avec les Likers de publications du ou des blogueur(s)</label>
                        <input type="text" id="blogger-post-likers" name="blogger-post-likers" class="form-control" value="blogueur1, blogueur2">
                    </div>
                    <div class="mb-3">
                        <label for="blogger" class="form-label">Interagir avec le ou les Blogueur(s)</label>
                        <input type="text" id="blogger" name="blogger" class="form-control" value="blogueur1, blogueur2">
                    </div>
                    <div class="mb-3">
                        <label for="hashtag-likers-top" class="form-label">Interagir avec les Likers de publications les plus populaires pour des hashtags spécifiques</label>
                        <input type="text" id="hashtag-likers-top" name="hashtag-likers-top" class="form-control" value="hashtag1, hashtag2">
                    </div>
                    <div class="mb-3">
                        <label for="hashtag-likers-recent" class="form-label">Interagir avec les Likers de publications récentes pour des hashtags spécifiques</label>
                        <input type="text" id="hashtag-likers-recent" name="hashtag-likers-recent" class="form-control" value="hashtag1, hashtag2">
                    </div>
                    <div class="mb-3">
                        <label for="hashtag-posts-top" class="form-label">Interagir avec les publications les plus populaires pour des hashtags spécifiques</label>
                        <input type="text" id="hashtag-posts-top" name="hashtag-posts-top" class="form-control" value="hashtag1, hashtag2">
                    </div>
                    <div class="mb-3">
                        <label for="hashtag-posts-recent" class="form-label">Interagir avec les publications les plus récentes pour des hashtags spécifiques</label>
                        <input type="text" id="hashtag-posts-recent" name="hashtag-posts-recent" class="form-control" value="hashtag1, hashtag2">
                    </div>
                    <div class="mb-3">
                        <label for="place-posts-top" class="form-label">Intéragir avec les publications les plus populaires géolocalisées dans des lieux spécifiques</label>
                        <input type="text" id="place-posts-top" name="place-posts-top" class="form-control" value="lieu1, lieu2">
                    </div>
                    <div class="mb-3">
                        <label for="place-posts-recent" class="form-label">Intéragir avec les publications récentes géolocalisées dans des lieux spécifiques</label>
                        <input type="text" id="place-posts-recent" name="place-posts-recent" class="form-control" value="lieu1, lieu2">
                    </div>
                    <div class="mb-3">
                        <label for="place-likers-top" class="form-label">Interagir avec les Likers de publications les plus populaires géolocalisées dans des lieux spécifiques</label>
                        <input type="text" id="place-likers-top" name="place-likers-top" class="form-control" value="lieu1, lieu2">
                    </div>
                    <div class="mb-3">
                        <label for="place-likers-recent" class="form-label">Interagir avec les Likers de publications récentes géolocalisées dans des lieux spécifiques</label>
                        <input type="text" id="place-likers-recent" name="place-likers-recent" class="form-control" value="lieu1, lieu2">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="interact-from-file" class="form-label">Interagir avec une liste d’utilisateurs contenus dans un ou plusieurs fichiers texte</label>
                        <input type="text" id="interact-from-file" name="interact-from-file" class="form-control" value="usernames_list1.txt 10-15, usernames_list2.txt 3">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="posts-from-file" class="form-label">Interagir avec une liste de URLs de publication contenus dans un ou plusieurs fichiers texte</label>
                        <input type="text" id="posts-from-file" name="posts-from-file" class="form-control" value="group1_posts.txt, group2_posts.txt">
                    </div>
                    <!-- ** -->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="delete-interacted-users" name="delete-interacted-users">
                        <label class="form-check-label" for="delete-interacted-users">Supprimer les utilisateurs/URLs des fichiers texte après interaction</label>
                    </div>
                    <div class="mb-3">
                        <label for="feed-likes" class="form-label">Nombre de likes de publications du fil d'actualité</label>
                        <input type="text" class="form-control" id="feed-likes" name="feed-likes" value="2-5">
                      </div>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="watch-video-time" class="form-label">Durée de pause pour simuler le visionnage de vidéos avant de liker ou commenter</label>
                        <input type="text" class="form-control" id="watch-video-time" name="watch-video-time" value="15-35">
                      </div>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="watch-photo-time" class="form-label">Durée de pause pour simuler le visionnage de photos avant de liker ou commenter</label>
                        <input type="text" class="form-control" id="watch-photo-time" name="watch-photo-time" value="3-4">
                      </div>
                      
                    <br>
                    <!-- Unfollow -->
                    <h3 class="h6 my-3">DESABONNEMENTS</h3>
                    <div class="mb-3">
                       <label for="unfollow" class="form-label">Désabonner les utilisateurs suivis par le bot</label>
                        <input type="text" class="form-control" id="unfollow" name="unfollow" value="10-20">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-any" class="form-label">Désabonner tous les utilisateurs suivis ou non par le bot</label>
                        <input type="text" class="form-control" id="unfollow-any" name="unfollow-any" value="10-20">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-non-followers" class="form-label">Désabonner les utilisateurs suivis par le bot et qui ne me suivent pas en retour</label>
                        <input type="text" class="form-control" id="unfollow-non-followers" name="unfollow-non-followers" value="10-20">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-any-non-followers" class="form-label">Désabonner les utilisateurs suivis ou non par le bot et qui ne me suivent pas en retour</label>
                        <input type="text" class="form-control" id="unfollow-any-non-followers" name="unfollow-any-non-followers" value="10-20">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-any-followers" class="form-label">Désabonner les utilisateurs suivis ou non par le bot et qui me suivent en retour</label>
                        <input type="text" class="form-control" id="unfollow-any-followers" name="unfollow-non-followers" value="10-20">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-from-file" class="form-label">Désabonner une liste d'utilisateurs contenus dans un ou plusieurs fichiers texte</label>
                        <input type="text" class="form-control" id="unfollow-from-file" name="unfollow-from-file" value="usernames_list1.txt 10-15, usernames_list2.txt 3">
                    </div>
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="sort-followers-newest-to-oldest" name="sort-followers-newest-to-oldest" checked>
                        <label class="form-check-label" for="sort-followers-newest-to-oldest">Trier les utilisateurs suivis du plus récent au plus ancien avant désabonnement</label>
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="unfollow-delay" class="form-label">Nombre minimal de jours écoulés depuis la dernière interaction avant désabonnement</label>
                        <input type="text" class="form-control" id="unfollow-delay" name="unfollow-delay" value="15">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                       <label for="remove-followers-from-file" class="form-label">Supprimer de mes abonnés une liste d'utilisateurs contenus dans un ou plusieurs fichiers texte</label>
                        <input type="text" class="form-control" id="remove-followers-from-file" name="remove-followers-from-file" value="remove1.txt 10-15, remove2.txt 3">
                    </div>
                    <!-- ** -->
                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="delete-removed-followers" name="delete-removed-followers">
                        <label class="form-check-label" for="delete-removed-followers">Supprimer automatiquement les abonnés supprimés des fichiers texte utilisés pour les supprimer</label>
                    </div>
                    
                    <br>
                    <!-- Limites -->
                    <h3 class="h6 my-3">LIMITES DE SOURCES</h3>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="interactions-count">Nombre d'interactions par source à chaque action</label>
                            <input class="form-control" id="interactions-count" name="interactions-count" type="text" value="30-40">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="likes-count">Nombre de likes à chaque utilisateur ou source</label>
                            <input class="form-control" id="likes-count" name="likes-count" type="text" value="1-2">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="likes-percentage">Pourcentage de chance pour liker une publication</label>
                            <input class="form-control" id="likes-percentage" name="likes-percentage" type="text" value="100">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="stories-count">Nombre de stories à chaque utilisateur ou source</label>
                            <input class="form-control" id="stories-count" name="stories-count" type="text" value="1-2">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="stories-percentage">Pourcentage de chance pour regarder les stories d’un profil</label>
                            <input class="form-control" id="stories-percentage" name="stories-percentage" type="text" value="100">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="max-comments-pro-user">Nombre maximal de commentaires pour chaque utilisateur</label>
                            <input class="form-control" id="max-comments-pro-user" name="max-comments-pro-user" type="text" value="1-2">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="interact-percentage">Pourcentage de chance d'interagir avec un utilisateur ou un hashtag</label>
                            <input class="form-control" id="interact-percentage" name="interact-percentage" type="text" value="50">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="follow-percentage">Pourcentage des utilisateurs à suivre après interaction</label>
                            <input class="form-control" id="follow-percentage" name="follow-percentage" type="text" value="30-40">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="follow-limit">Limite du nombre de suivis par chaque action</label>
                            <input class="form-control" id="follow-limit" name="follow-limit" type="text" value="50">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="skipped-list-limit">Nombre de tentatives avec des utilisateurs déjà interagi</label>
                            <input class="form-control" id="skipped-list-limit" name="skipped-list-limit" type="text" value="10-15">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="skipped-post-limit">Nombre de posts ignorés avant de passer à la source suivante</label>
                            <input class="form-control" id="skipped-post-limit" name="skipped-post-limit" type="text" value="5">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="min-following">Nombre minimum d'abonnements après lequel le désabonnement s'arrête</label>
                            <input class="form-control" id="min-following" name="min-following" type="text" value="100">
                        </div>
                    </div>
                    
                    <!-- Limites Totales -->
                    <h3 class="h6 my-3">LIMITES TOTALES PAR SESSION</h3>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="total-likes-limit">Limite totale de likes par session</label>
                            <input class="form-control" id="total-likes-limit" name="total-likes-limit" type="text" value="120-150">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="total-comments-limit">Limite totale de commentaires par session</label>
                            <input class="form-control" id="total-comments-limit" name="total-comments-limit" type="text" value="3-5">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-follows-limit">Limite totale de suivis par session</label>
                            <input class="form-control" id="total-follows-limit" name="total-follows-limit" type="text" value="40-50">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-unfollows-limit">Limite totale de désabonnements par session</label>
                            <input class="form-control" id="total-unfollows-limit" name="total-unfollows-limit" type="text" value="40-50">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-watches-limit">Limite totale de vues de stories par session</label>
                            <input class="form-control" id="total-watches-limit" name="total-watches-limit" type="text" value="120-150">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-successful-interactions-limit">Limite totale d'interactions réussies par session</label>
                            <input class="form-control" id="total-successful-interactions-limit" name="total-successful-interactions-limit" type="text" value="120-150">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-interactions-limit">Limite totale d'interactions réussies ou non par session</label>
                            <input class="form-control" id="total-interactions-limit" name="total-interactions-limit" type="text" value="280-300">
                        </div>
                        <!-- ** -->
                        <div class="col-md-6 mb-3">
                            <label for="total-pm-limit">Limite totale de messages privés par session</label>
                            <input class="form-control" id="total-pm-limit" name="total-pm-limit" type="text" value="120-150">
                        </div>
                    </div>
                    
                    <br>
                    <!-- Ending Session Conditions -->
                    <h3 class="h6 my-3">FIN DE SESSION</h3>
                    <ul class="list-group">
                        <!-- Case à cocher pour booléens -->
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <!-- ** -->
                            <div>
                                <h3 class="h6 mb-1">Terminer lorsque la limite de likes est atteinte</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="end-if-likes-limit-reached" name="end-if-likes-limit-reached" checked>
                                <label class="form-check-label" for="end-if-likes-limit-reached"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <!-- ** -->
                            <div>
                                <h3 class="h6 mb-1">Terminer lorsque la limite de suivis est atteinte</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="end-if-follows-limit-reached" name="end-if-follows-limit-reached">
                                <label class="form-check-label" for="end-if-follows-limit-reached"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <!-- ** -->
                            <div>
                                <h3 class="h6 mb-1">Terminer lorsque la limite de visionnages de stories est atteinte</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="end-if-watches-limit-reached" name="end-if-watches-limit-reached">
                                <label class="form-check-label" for="end-if-watches-limit-reached"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <!-- ** -->
                            <div>
                                <h3 class="h6 mb-1">Terminer lorsque la limite de commentaires est atteinte</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="end-if-comments-limit-reached" name="end-if-comments-limit-reached">
                                <label class="form-check-label" for="end-if-comments-limit-reached"></label>
                            </div>
                        </li>
                        <li class="list-group-item d-flex align-items-center justify-content-between px-0 border-bottom">
                            <!-- ** -->
                            <div>
                                <h3 class="h6 mb-1">Terminer lorsque la limite de messages privés est atteinte</h3>
                            </div>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="end-if-pm-limit-reached" name="end-if-pm-limit-reached">
                                <label class="form-check-label" for="end-if-pm-limit-reached"></label>
                            </div>
                        </li>
                    </ul>
                    
                    <br>
                    <!-- Scheduling -->
                    <h3 class="h6 my-3">PLANIFICATION</h3>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="repeat">Répéter la même session après N minutes de pause</label>
                        <input class="form-control" id="repeat" name="repeat" type="text" value="280-320">
                    </div>
                    <div class="mb-3">
                        <label for="working-hours">Heures d'activité</label>
                        <input class="form-control" id="working-hours" name="working-hours" type="text" value="10.15-16.40, 18.15-22.46">
                    </div>
                    <div class="mb-3">
                        <label for="time-delta">Delta de temps</label>
                        <input class="form-control" id="time-delta" name="time-delta" type="text" value="10-15">
                    </div>
                    <!-- ** -->
                    <div class="mb-3">
                        <label for="total-sessions">Nombre total de sessions</label>
                        <input class="form-control" id="total-sessions" name="total-sessions" type="text" value="280-320">
                    </div>
                    <div class="mt-3">
                        <button class="btn btn-primary" type="button" onclick="validate(event)">Valider</button> 
                    </div>
                </form>
            </div>
        </div>
        <div class="col-12 col-xl-4">
            <div class="row">
                <div class="col-12 mb-4">
                    <div class="card shadow border-0 text-center p-0">
                        <div class="profile-cover rounded-top" data-background="{{ config.ASSETS_ROOT }}/img/profile-cover-picture-{{ current_user.username }}.jpg"></div>
                        <div class="card-body pb-5">
                            <img id="profile-avatar-2" src="{{ config.ASSETS_ROOT }}/img/team/profile-picture-{{ current_user.username }}.jpg" class="avatar-xl rounded-circle mx-auto mt-n7 mb-4" alt="Cliaso Portrait">
                            <h5 class="fw-normal">
                                {{ current_user.username }}
                            </h5>
                            <p class="text-gray mb-4">
                                {{ current_user.email }}
                            </p>
                            <button class="btn btn-primary d-inline-flex align-items-center justify-content-center mb-3 w-100" onclick="connectDevice()">
                                <svg fill="#ffffff" height="24px" width="24px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg"
                                    xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.442 27.442" xml:space="preserve">
                                    <g>
                                        <path d="M19.494,0H7.948C6.843,0,5.951,0.896,5.951,1.999v23.446c0,1.102,0.892,1.997,1.997,1.997h11.546
                                            c1.103,0,1.997-0.895,1.997-1.997V1.999C21.491,0.896,20.597,0,19.494,0z M10.872,1.214h5.7c0.144,0,0.261,0.215,0.261,0.481
                                            s-0.117,0.482-0.261,0.482h-5.7c-0.145,0-0.26-0.216-0.26-0.482C10.612,1.429,10.727,1.214,10.872,1.214z M13.722,25.469
                                            c-0.703,0-1.275-0.572-1.275-1.276s0.572-1.274,1.275-1.274c0.701,0,1.273,0.57,1.273,1.274S14.423,25.469,13.722,25.469z
                                                M19.995,21.1H7.448V3.373h12.547V21.1z"/>
                                    </g>
                                </svg>
                                Connecter l'appareil mobile
                            </button>
                        </div>
                      </div>
                </div>
                <div class="col-12">
                    <div class="card card-body border-0 shadow mb-4">
                        <h2 class="h5 mb-4">Photo de profil</h2>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <img id="profile-avatar" class="rounded avatar-xl" src="{{ config.ASSETS_ROOT }}/img/team/profile-picture-{{ current_user.username }}.jpg" alt="Avatar">
                            </div>
                            <div class="file-field">
                                <div class="d-flex justify-content-xl-center ms-xl-3">
                                    <div class="d-flex">
                                        <svg class="icon text-gray-500 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
                                        <input type="file" id="image-upload" accept="image/*" onchange="uploadProfileImage(event)">
                                        <div class="d-md-block text-left ms-3">
                                            <div class="fw-normal text-dark mb-1">Choisir une image</div>
                                            <div class="text-gray small">JPG, GIF ou PNG. Taille max : 800K</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12">
                    <div class="card card-body border-0 shadow">
                        <h2 class="h5 mb-4">Photo de couverture</h2>
                        <div class="d-flex align-items-center">
                            <div class="me-3">
                                <img id="profile-cover-avatar" class="rounded avatar-xl" src="{{ config.ASSETS_ROOT }}/img/profile-cover-picture-{{ current_user.username }}.jpg" alt="Image de couverture">
                            </div>
                            <div class="file-field">
                                <div class="d-flex justify-content-xl-center ms-xl-3">
                                    <div class="d-flex">
                                        <svg class="icon text-gray-500 me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd"></path></svg>
                                        <input type="file" id="image-upload-2" accept="image/*" onchange="uploadCoverImage(event)">
                                        <div class="d-md-block text-left">
                                            <div class="fw-normal text-dark mb-1">Choisir une image</div>
                                            <div class="text-gray small">JPG, GIF or PNG. Taille max : 800K</div>
                                        </div>
                                    </div>
                                </div>
                              </div>                                        
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <script src="{{ config.ASSETS_ROOT }}/js/connectDevice.js"></script>
    <script src="{{ config.ASSETS_ROOT }}/js/validate.js"></script>
    <script>
        async function uploadProfileImage(event) {
            const file = event.target.files[0];
            if (!file) return;
    
            const formData = new FormData();
            formData.append('file', file);
    
            try {
                const response = await fetch('/upload-profile', {
                    method: 'POST',
                    body: formData,
                });
    
                const result = await response.json();
    
                if (result.success) {
                    const avatar = document.getElementById('profile-avatar');
                    const avatar2 = document.getElementById('profile-avatar-2');
                    avatar.src = `${avatar.src}?t=${new Date().getTime()}`; 
                    avatar2.src = `${avatar2.src}?t=${new Date().getTime()}`; 

                    Swal.fire({
                        icon: 'success',
                        title: 'Succès',
                        text: 'Photo de profil mise à jour avec succès.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: result.message || 'Une erreur est survenue.',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Réessayer'
                    });
                }
            } catch (error) {
                console.error('Erreur lors de l\'upload :', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Une erreur réseau est survenue. Veuillez réessayer.',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            }
        }
        
        async function uploadCoverImage(event) {
            const file = event.target.files[0];
            if (!file) return;
    
            const formData = new FormData();
            formData.append('file', file);
    
            try {
                const response = await fetch('/upload-cover', {
                    method: 'POST',
                    body: formData,
                });
    
                const result = await response.json();
    
                if (result.success) {
                    const profileCoverAvatar = document.getElementById('profile-cover-avatar');
                    profileCoverAvatar.src = `${profileCoverAvatar.src}?t=${new Date().getTime()}`; 
                    
                    const profileCover = document.querySelector('.profile-cover');

                    if (profileCover) {
                        const backgroundUrl = profileCover.getAttribute('data-background');
                        const newBackgroundUrl = `${backgroundUrl}?t=${new Date().getTime()}`;
                        
                        profileCover.setAttribute('data-background', newBackgroundUrl);
                        profileCover.style.backgroundImage = `url('${newBackgroundUrl}')`;
                    }
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Succès',
                        text: 'Photo de couverture mise à jour avec succès.',
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: result.message || 'Une erreur est survenue.',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Réessayer'
                    });
                }
            } catch (error) {
                console.error('Erreur lors de l\'upload :', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Une erreur réseau est survenue. Veuillez réessayer.',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            }
        }
        
        async function uploadFile(event, instaUser) {
            const file = event.target.files[0];
            if (!file) return;
        
            const formData = new FormData();
            formData.append('file', file);
            formData.append('username', instaUser); 
        
            try {
                const response = await fetch('/upload_file', {
                    method: 'POST',
                    body: formData,
                });
        
                const result = await response.json();
        
                if (result.success) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Succès',
                        text: `Fichier "${file.name}" importé avec succès pour l'utilisateur ${instaUser}.`,
                        confirmButtonColor: '#3085d6',
                        confirmButtonText: 'OK'
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Erreur',
                        text: result.message || 'Une erreur est survenue.',
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'Réessayer'
                    });
                }
            } catch (error) {
                console.error('Erreur lors de l\'upload :', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Erreur',
                    text: 'Une erreur réseau est survenue. Veuillez réessayer.',
                    confirmButtonColor: '#d33',
                    confirmButtonText: 'OK'
                });
            }
        }
        
        document.querySelector("#file-upload").closest("button").addEventListener("click", async (event) => {
            event.preventDefault(); 
        
            Swal.fire({
                title: "Profil Instagram à associer",
                inputPlaceholder: "Entrer un nom d'utilisateur insta valide",
                input: 'text',
                showCancelButton: true,
                confirmButtonText: 'Confirmer',
                cancelButtonText: 'Annuler',
                inputValidator: (value) => {
                    if (!value) {
                        return 'Vous devez entrer un nom d\'utilisateur Instagram!';
                    }
                },
            }).then((result) => {
                if (result.value) {
                    console.log("Result: " + result.value);
                    const hiddenFileInput = document.querySelector("#hidden-file-upload-input");
                    hiddenFileInput.addEventListener("change", (e) => {
                        uploadFile(e, result.value);
                    });
                    hiddenFileInput.click();
                    
                }
            });
        });
    </script>
    <script>
        document.getElementById('dropdownMenu').addEventListener('click', function(e) {
            e.stopPropagation();  
        });
    
        document.getElementById('apply-button').addEventListener('click', async function(e) {
            e.preventDefault();
    
            const form = e.target.closest('form');
            const formData = new FormData(form);
            const filter_insta_username = formData.get("filter-insta-username");
            const filterData = {
                filter_insta_username: formData.get("filter-insta-username"),
                skip_if_private: formData.get("skip_if_private"),
                skip_if_public: formData.get("skip_if_public"),
                skip_business: formData.get("skip_business"),
                skip_non_business: formData.get("skip_non_business"),
                skip_following: formData.get("skip_following"),
                skip_follower: formData.get("skip_follower"),
                skip_if_link_in_bio: formData.get("skip_if_link_in_bio"),
                follow_private_or_empty: formData.get("follow_private_or_empty")
            };
    
            const instaUsernameInput = document.getElementById("filter-insta-username");
            const errorMessage = document.getElementById("insta-username-error");
    
            instaUsernameInput.classList.remove("is-invalid");
            if (errorMessage) errorMessage.remove();
    
            if (!filter_insta_username || filter_insta_username.trim() === "") {
                instaUsernameInput.classList.add("is-invalid");
    
                const errorDiv = document.createElement("div");
                errorDiv.id = "insta-username-error";
                errorDiv.classList.add("invalid-feedback");
                errorDiv.textContent = "Veuillez renseigner ce champs.";
                instaUsernameInput.after(errorDiv);
    
                return;  
            }
    
            try {
                const response = await fetch('/filter', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(filterData)
                });

                const result = await response.json();

                if (!result.success) {
                    throw new Error(result.message);
                }
                console.log(`${result.message} pour ${filter_insta_username}`);
                
                const dropdownMenu = document.getElementById('dropdownMenu');
                const dropdownButton = document.getElementById('dropdownButton');
                const dropdownInstance = new bootstrap.Dropdown(dropdownButton);
                dropdownInstance.hide();  
            } catch (error) {
                console.error(`Une erreur est survenue : ${error.message}`);
            }
        });
    </script>
{% endblock javascripts %}