<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        Flask Datta Able - {% block title %}{% endblock %} | AppSeed
    </title>
    <!-- HTML5 Shim and Respond.js IE11 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 11]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <!-- Meta -->
    <!-- sweat alert -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.all.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="description"
          content="Free Datta Able Admin Template come up with latest Bootstrap 4 framework with basic components, form elements and lots of pre-made layout options"/>
    <meta name="keywords"
          content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template, free admin theme, free dashboard template"/>
    <meta name="author" content="CodedThemes"/>

    <!-- Favicon icon -->
    <link rel="icon" href="../static/assets/images/favicon.ico" type="image/x-icon">
    <!-- fontawesome icon -->
    <link rel="stylesheet" href="../static/assets/fonts/fontawesome/css/fontawesome-all.min.css">
    <!-- animation css -->
    <link rel="stylesheet" href="../static/assets/plugins/animation/css/animate.min.css">
    <!-- vendor css -->
    <link rel="stylesheet" href="../static/assets/css/style.css">
    <!-- dark mode css -->
    <link rel="stylesheet" href="../static/assets/css/dark.css">
    <!-- sweatalert -->
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
    <!-- Specific CSS goes HERE -->
    {% block stylesheets %}{% endblock stylesheets %}

</head>
<body onload="stopLoader()">

    <!-- [ Pre-loader ] start -->
    <div class="loader-bg" id="loader">
        <div class="loader-track">
            <div class="loader-fill"></div>
        </div>
    </div> 
    <!-- [ Pre-loader ] End -->

    {% include 'sidebar.html' %}

    {% include 'header.html' %}


    {% block content %}{% endblock content %}

    {% include 'scripts.html' %}

    <!-- Specific Page JS goes HERE  -->
    {% block javascripts %}{% endblock javascripts %}

</body>
<script>
    function stopLoader() {
        const loader = document.getElementById('loader');
        loader.style.display = 'none';
    }
    function toggleEdit(button) {
    const row = button.parentNode.parentNode;
    const editBtn = row.querySelector('.edit-btn');
    const updateBtn = row.querySelector('.update-btn');
    const editableFields = row.querySelectorAll('.editable');

    if (button === editBtn) {
        editableFields.forEach(field => field.contentEditable = "true");
        editBtn.style.display = "none";
        updateBtn.style.display = "inline-block";
    } else if (button === updateBtn) {
        editableFields.forEach(field => field.contentEditable = "false");
        editBtn.style.display = "inline-block";
        updateBtn.style.display = "none";
    }
}

var toastMixin = Swal.mixin({
        toast: true,
        icon: 'success',
        title: 'General Title',
        animation: false,
        position: 'top-right',
        showConfirmButton: false,
        timer: 3000,
        timerProgressBar: true,
        didOpen: (toast) => {
          toast.addEventListener('mouseenter', Swal.stopTimer)
          toast.addEventListener('mouseleave', Swal.resumeTimer)
        }
      });


</script>

</html>
