fixes #2164 batch manager unit mode redesign (#2179)

* Interface Update Update front end according to web design Completed the implementation of album manager * Added image delete mechanism * Update Validation * Added filters according to global mode Page is now fully translated from EN_uk to FR_fr Harmonized global and unit mode by creating a template for the filters TODO : Uncomment updateBlock calls in metaSync and implement tags update Uncomment pluginSave method and test it with an updated plugin --------- Co-authored-by: marsooooo <marso.tison@gmail.com>
2026-06-02 04:15:05 +02:00 · 2024-07-02 11:20:16 +02:00
parent c8ccbd1cd1
commit 10a8db2102
11 changed files with 1832 additions and 412 deletions
@@ -96,6 +96,40 @@ SELECT id, date_creation
  invalidate_user_cache();
 }

+//collection
+$collection = array();
+if (isset($_POST['nb_photos_deleted']))
+{
+  check_input_parameter('nb_photos_deleted', $_POST, false, '/^\d+$/');
+
+  // let's fake a collection (we don't know the image_ids so we use "null", we only
+  // care about the number of items here)
+  $collection = array_fill(0, $_POST['nb_photos_deleted'], null);
+}
+else if (isset($_POST['setSelected']))
+{
+  // Here we don't use check_input_parameter because preg_match has a limit in
+  // the repetitive pattern. Found a limit to 3276 but may depend on memory.
+  //
+  // check_input_parameter('whole_set', $_POST, false, '/^\d+(,\d+)*$/');
+  //
+  // Instead, let's break the input parameter into pieces and check pieces one by one.
+  $collection = explode(',', $_POST['whole_set']);
+
+  foreach ($collection as $id)
+  {
+    if (!preg_match('/^\d+$/', $id))
+    {
+      fatal_error('[Hacking attempt] the input parameter "whole_set" is not valid');
+    }
+  }
+}
+else if (isset($_POST['selection']))
+{
+  $collection = $_POST['selection'];
+}
+
+
 // +-----------------------------------------------------------------------+
 // |                             template init                             |
 // +-----------------------------------------------------------------------+
@@ -105,15 +139,132 @@ $template->set_filenames(

 $base_url = PHPWG_ROOT_PATH.'admin.php';

+
 $template->assign(
  array(
+    
    'U_ELEMENTS_PAGE' => $base_url.get_query_string_diff(array('display','start')),
-    'F_ACTION' => $base_url.get_query_string_diff(array()),
    'level_options' => get_privacy_level_options(),
    'ADMIN_PAGE_TITLE' => l10n('Batch Manager'),
    'PWG_TOKEN' => get_pwg_token(),
    )
  );
+      //prefilter
+      $prefilters = array(
+        array('ID' => 'caddie', 'NAME' => l10n('Caddie')),
+        array('ID' => 'favorites', 'NAME' => l10n('Your favorites')),
+        array('ID' => 'last_import', 'NAME' => l10n('Last import')),
+        array('ID' => 'no_album', 'NAME' => l10n('With no album').' ('.l10n('Orphans').')'),
+        array('ID' => 'no_tag', 'NAME' => l10n('With no tag')),
+        array('ID' => 'duplicates', 'NAME' => l10n('Duplicates')),
+        array('ID' => 'all_photos', 'NAME' => l10n('All'))
+      );
+      
+      if ($conf['enable_synchronization'])
+      {
+        $prefilters[] = array('ID' => 'no_virtual_album', 'NAME' => l10n('With no virtual album'));
+        $prefilters[] = array('ID' => 'no_sync_md5sum', 'NAME' => l10n('With no checksum'));
+      }
+      
+      function UC_name_compare($a, $b)
+      {
+        return strcmp(strtolower($a['NAME']), strtolower($b['NAME']));
+      }
+      
+      $prefilters = trigger_change('get_batch_manager_prefilters', $prefilters);
+      
+      // Sort prefilters by localized name.
+      usort($prefilters, function ($a, $b) {
+        return strcmp(strtolower($a['NAME']), strtolower($b['NAME']));
+      });
+      
+      $template->assign(
+        array(
+          'conf_checksum_compute_blocksize' => $conf['checksum_compute_blocksize'],
+          'prefilters' => $prefilters,
+          'filter' => $_SESSION['bulk_manager_filter'],
+          'selection' => $collection,
+          'all_elements' => $page['cat_elements_id'],
+          'START' => $page['start'],
+          'U_DISPLAY'=>$base_url.get_query_string_diff(array('display')),
+          'F_ACTION'=>$base_url.get_query_string_diff(array('cat','start','tag','filter')),
+         )
+       );
+      
+      if (isset($page['no_md5sum_number']))
+      {
+        $template->assign(
+          array(
+            'NB_NO_MD5SUM' => $page['no_md5sum_number'],
+          )
+        );
+      } else {
+        $template->assign('NB_NO_MD5SUM', '');
+      }
+      
+      
+      // privacy level
+      foreach ($conf['available_permission_levels'] as $level)
+      {
+        $level_options[$level] = l10n(sprintf('Level %d', $level));
+      
+        if (0 == $level)
+        {
+          $level_options[$level] = l10n('Everybody');
+        }
+      }
+      $template->assign(
+        array(
+          'filter_level_options'=> $level_options,
+          'filter_level_options_selected' => isset($_SESSION['bulk_manager_filter']['level'])
+          ? $_SESSION['bulk_manager_filter']['level']
+          : 0,
+          )
+        );
+      
+      // tags
+      $filter_tags = array();
+      
+      if (!empty($_SESSION['bulk_manager_filter']['tags']))
+      {
+        $query = '
+      SELECT
+          id,
+          name
+        FROM '.TAGS_TABLE.'
+        WHERE id IN ('.implode(',', $_SESSION['bulk_manager_filter']['tags']).')
+      ;';
+      
+        $filter_tags = get_taglist($query);
+      }
+      
+      $template->assign('filter_tags', $filter_tags);
+      
+      // in the filter box, which category to select by default
+      $selected_category = array();
+      
+      if (isset($_SESSION['bulk_manager_filter']['category']))
+      {
+        $selected_category = array($_SESSION['bulk_manager_filter']['category']);
+      }
+      else
+      {
+        // we need to know the category in which the last photo was added
+        $query = '
+      SELECT category_id
+        FROM '.IMAGE_CATEGORY_TABLE.'
+        ORDER BY image_id DESC
+        LIMIT 1
+      ;';
+        $result = pwg_query($query);
+        if (pwg_db_num_rows($result) > 0)
+        {
+          $row = pwg_db_fetch_assoc($result);
+          $selected_category[] = $row['category_id'];
+        }
+      }
+      
+      $template->assign('filter_category_selected', $selected_category);

 // +-----------------------------------------------------------------------+
 // |                        global mode thumbnails                         |
@@ -122,6 +273,8 @@ $template->assign(
 // how many items to display on this page
 if (!empty($_GET['display']))
 {
+  // conf_update_param('batch_manager_images_per_page_unit' , intval($_GET['display']));
+  // $page['nb_images'] = $conf['batch_manager_images_per_page_unit'];
  $page['nb_images'] = intval($_GET['display']);
 }
 elseif (in_array($conf['batch_manager_images_per_page_unit'], array(5, 10, 50)))
@@ -132,7 +285,7 @@ else
 {
  $page['nb_images'] = 5;
 }
-
+$template->assign('per_page', $conf['batch_manager_images_per_page_unit']);


 if (count($page['cat_elements_id']) > 0)
@@ -193,6 +346,20 @@ SELECT *
  LIMIT '.$page['nb_images'].' OFFSET '.$page['start'].'
 ;';
  $result = pwg_query($query);
+  
+  $storage_category_id = null;
+  if (!empty($row['storage_category_id']))
+  {
+    $storage_category_id = $row['storage_category_id'];
+  }
+
+  $level_convert = [
+    "0" => "4",
+    "1" => "3",
+    "2" => "2",
+    "4" => "1",
+    "8" => "0",
+];

  while ($row = pwg_db_fetch_assoc($result))
  {
@@ -200,6 +367,10 @@ SELECT *

    $src_image = new SrcImage($row);

+    $image_file = $row['file'];
+
+
+
    $query = '
 SELECT
    id,
@@ -208,6 +379,7 @@ SELECT
    JOIN '.TAGS_TABLE.' AS t ON t.id = it.tag_id
  WHERE image_id = '.$row['id'].'
 ;';
+
    $tag_selection = get_taglist($query);

    $legend = render_element_name($row);
@@ -216,12 +388,95 @@ SELECT
      $legend.= ' ('.$row['file'].')';
    }
    $extTab = explode('.',$row['path']);
+
+  
+
+// represent
+
+    // categories
+
+    $query = '
+    SELECT category_id, uppercats, dir
+      FROM '.IMAGE_CATEGORY_TABLE.' AS ic
+        INNER JOIN '.CATEGORIES_TABLE.' AS c
+          ON c.id = ic.category_id
+      WHERE image_id = '.$row['id'].'
+    ;';
+
+    $sub_result = pwg_query($query);
+    $related_categories = array();
+    $related_category_ids = array();
+    $media['image'] = get_image_infos($row['id'], true);
    
+    while ($item = pwg_db_fetch_assoc($sub_result))
+    {
+      $name =
+        get_cat_display_name_cache(
+          $item['uppercats'],
+          get_root_url().'admin.php?page=album-'
+          );
+    
+      if ($item['category_id'] == $storage_category_id)
+      {
+        $template->assign('STORAGE_CATEGORY', $name);
+      }
+    
+      $related_categories[$item['category_id']] = array('name' => $name, 'unlinkable' => $item['category_id'] != $storage_category_id);
+      $related_category_ids[] = $item['category_id'];
+    }
+
+    // jump to link
+    $image_file = $row['file'];
+
+    $query = '
+    SELECT category_id
+    FROM '.IMAGE_CATEGORY_TABLE.'
+    WHERE image_id = '.$row['id'].'
+    ;';
+    $authorizeds = array_diff(
+      array_from_query($query, 'category_id'),
+      explode(
+        ',',
+        calculate_permissions($user['id'], $user['status'])
+      )
+    );
+
+    if (isset($row['cat_id'])
+    and in_array($row['cat_id'], $authorizeds))
+    {
+      $url_img = make_picture_url(
+        array(
+          'image_id' => $row['id'],
+          'image_file' => $image_file,
+          'category' => $cache['cat_names'][ $row['cat_id'] ],
+          )
+        );
+    }
+    else
+    {
+      foreach ($authorizeds as $category)
+      {
+        $url_img = make_picture_url(
+          array(
+            'image_id' => $row['id'], //utile ?
+            'image_file' => $image_file,
+            'category' => $cache['cat_names'][ $category ],
+            )
+          );
+        break;
+      }
+    }
+    $admin_photo_base_url = get_root_url().'admin.php?page=photo-'.$row['id'];
+    $admin_url_start = $admin_photo_base_url.'-properties';
+    $admin_url_start.= isset($row['cat_id']) ? '&amp;cat_id='.$row['cat_id'] : '';
+    $selected_level = isset($row['level']) ? $row['level'] : $row['level'];
+    
+
    $template->append(
      'elements', array_merge($row,
      array(
        'ID' => $row['id'],
-        'TN_SRC' => DerivativeImage::url(IMG_THUMB, $src_image),
+        'TN_SRC' => DerivativeImage::url(IMG_MEDIUM, $src_image),
        'FILE_SRC' => DerivativeImage::url(IMG_LARGE, $src_image),
        'LEGEND' => $legend,
        'U_EDIT' => get_root_url().'admin.php?page=photo-'.$row['id'],
@@ -232,14 +487,42 @@ SELECT
        'DATE_CREATION' => $row['date_creation'],
        'TAGS' => $tag_selection,
        'is_svg' => (strtoupper(end($extTab)) == 'SVG'),
+        'TITLE' => render_element_name($row),
+        'DIMENSIONS' => @$row['width'].'x'.@$row['height'].' px',
+        'FORMAT' => ($row['width'] >= $row['height'])? 1:0,//0:horizontal, 1:vertical
+        'FILESIZE' => l10n('%.2f MB',$row['filesize']/1024),
+        'REGISTRATION_DATE' => format_date($row['date_available']),
+        'EXT' => l10n('%s file type',end($extTab)),
+        'POST_DATE' => l10n('Posted the %s', format_date($row['date_available'], array('day', 'month', 'year'))),
+        'AGE' => l10n(ucfirst(time_since($row['date_available'], 'year'))),
+        'ADDED_BY' => l10n('Added by %s', $row['added_by']),
+        'STATS' => l10n('Visited %d times', $row['hit']),
+        'FILE' => l10n('%s', $row['file']),
+        'related_categories' => $related_categories,
+        'related_category_ids' => json_encode($related_category_ids,JSON_NUMERIC_CHECK),
+        'U_JUMPTO' => (isset($url_img) and $user['level'] >= $media['image']['level']) ? $url_img : null,
+        'tag_selection' => $tag_selection,
+        'U_DOWNLOAD' => 'action.php?id='.$row['id'].'&amp;part=e&amp;pwg_token='.get_pwg_token().'&amp;download',
+        'U_HISTORY' => get_root_url().'admin.php?page=history&amp;filter_image_id='.$row['id'],
+        'U_DELETE' => $admin_url_start.'&amp;delete=1&amp;pwg_token='.get_pwg_token(),
+        'U_SYNC' => $admin_url_start.'&amp;sync_metadata=1',
+        'PATH'=>$row['path'],
+        'LEVEL_CONVERT' => $level_convert[!empty($row['level'])?$row['level']:'0'],
+        'level_options_selected' => array($selected_level)
+
+
        )
      ));
  }
+  
+  $template->assign('ACTIVE_PLUGINS', array_keys($pwg_loaded_plugins));

  $template->assign(array(
    'ELEMENT_IDS' => implode(',', $element_ids),
    'CACHE_KEYS' => get_admin_client_cache_keys(array('tags')),
+    
    ));
+    
 }

 trigger_notify('loc_end_element_set_unit');
@@ -8,15 +8,20 @@ function linked_albums_close() {
  $("#addLinkedAlbum").fadeOut();
 }

-function linked_albums_open() {
+function linked_albums_open(pictureId) {
  $("#addLinkedAlbum").fadeIn();
+  if(null != pictureId)
+    {
+      console.log(pictureId);
+      $("#addLinkedAlbum .linkedAlbumPopInContainer").attr("id",pictureId);
+    }
  $(".search-input").val("");
  $(".search-input").focus();
  $("#searchResult").empty();
  $(".limitReached").html(str_no_search_in_progress);
 }

-function linked_albums_search(searchText) {
+function linked_albums_search(searchText, pictureId) {

  if (api_method == 'pwg.categories.getList') {
    api_params = {
@@ -32,8 +37,6 @@ function linked_albums_search(searchText) {
    }
  }

-  // console.log(api_method);
-
  $(".linkedAlbumPopInContainer .searching").show();
  $.ajax({
    url: "ws.php?format=json&method=" + api_method,
@@ -47,7 +50,11 @@ function linked_albums_search(searchText) {
      $(".linkedAlbumPopInContainer .searching").hide();

      categories = raw_data.result.categories;
-      fill_results(categories);
+      if (typeof pictureId !== 'undefined') {
+        fill_results(categories, pictureId);
+      } else {
+        fill_results(categories);
+      }

      if (raw_data.result.limit_reached) {
        $(".limitReached").html(str_result_limit.replace("%d", categories.length));
@@ -0,0 +1,69 @@
+/* ********** Filters*/
+function filter_enable(filter) {
+	/* show the filter*/
+	$("#"+filter).show();
+
+	/* check the checkbox to declare we use this filter */
+	$("input[type=checkbox][name="+filter+"_use]").prop("checked", true);
+
+	/* forbid to select this filter in the addFilter list */
+  $("#addFilter").find("a[data-value="+filter+"]").addClass("disabled", "disabled");
+  
+  /* hide the no filter message */
+  $('.noFilter').hide();
+  $('.addFilter-button').removeClass('highlight');
+}
+
+function filter_disable(filter) {
+	/* hide the filter line */
+	$("#"+filter).hide();
+
+	/* uncheck the checkbox to declare we do not use this filter */
+	$("input[name="+filter+"_use]").prop("checked", false);
+
+	/* give the possibility to show it again */
+  $("#addFilter").find("a[data-value="+filter+"]").removeClass("disabled");
+  
+  /* show the no filter message if no filter selected */
+  if ($('#filterList li:visible').length == 0) {
+    $('.noFilter').show();
+    $('.addFilter-button').addClass('highlight');
+  }
+  
+}
+$(document).ready(function () {
+
+  $(".removeFilter").addClass("icon-cancel-circled");
+  
+  $(".removeFilter").click(function () {
+    var filter = $(this).parent('li').attr("id");
+    filter_disable(filter);
+  
+    return false;
+  });
+  
+  $("#addFilter a").on('click', function () {
+    var filter = $(this).attr("data-value");
+    filter_enable(filter);
+  });
+  
+  $("#removeFilters").click(function() {
+    $("#filterList li").each(function() {
+      var filter = $(this).attr("id");
+      filter_disable(filter);
+    });
+    return false;
+  });
+  
+  $('[data-slider=widths]').pwgDoubleSlider(sliders.widths);
+  $('[data-slider=heights]').pwgDoubleSlider(sliders.heights);
+  $('[data-slider=ratios]').pwgDoubleSlider(sliders.ratios);
+  $('[data-slider=filesizes]').pwgDoubleSlider(sliders.filesizes);
+  
+  $(document).mouseup(function (e) {
+    e.stopPropagation();
+    if (!$(event.target).hasClass('addFilter-button')) {
+      $('.addFilter-dropdown').slideUp();
+    }
+  });
+})
@@ -1,73 +1,3 @@
-
-/* ********** Filters*/
-function filter_enable(filter) {
-	/* show the filter*/
-	$("#"+filter).show();
-
-	/* check the checkbox to declare we use this filter */
-	$("input[type=checkbox][name="+filter+"_use]").prop("checked", true);
-
-	/* forbid to select this filter in the addFilter list */
-  $("#addFilter").find("a[data-value="+filter+"]").addClass("disabled", "disabled");
-  
-  /* hide the no filter message */
-  $('.noFilter').hide();
-  $('.addFilter-button').removeClass('highlight');
-}
-
-function filter_disable(filter) {
-	/* hide the filter line */
-	$("#"+filter).hide();
-
-	/* uncheck the checkbox to declare we do not use this filter */
-	$("input[name="+filter+"_use]").prop("checked", false);
-
-	/* give the possibility to show it again */
-  $("#addFilter").find("a[data-value="+filter+"]").removeClass("disabled");
-  
-  /* show the no filter message if no filter selected */
-  if ($('#filterList li:visible').length == 0) {
-    $('.noFilter').show();
-    $('.addFilter-button').addClass('highlight');
-  }
-  
-}
-
-$(".removeFilter").addClass("icon-cancel-circled");
-
-$(".removeFilter").click(function () {
-	var filter = $(this).parent('li').attr("id");
-	filter_disable(filter);
-
-	return false;
-});
-
-$("#addFilter a").on('click', function () {
-	var filter = $(this).attr("data-value");
-	filter_enable(filter);
-});
-
-$("#removeFilters").click(function() {
-	$("#filterList li").each(function() {
-		var filter = $(this).attr("id");
-		filter_disable(filter);
-	});
-	return false;
-});
-
-$('[data-slider=widths]').pwgDoubleSlider(sliders.widths);
-$('[data-slider=heights]').pwgDoubleSlider(sliders.heights);
-$('[data-slider=ratios]').pwgDoubleSlider(sliders.ratios);
-$('[data-slider=filesizes]').pwgDoubleSlider(sliders.filesizes);
-
-
-$(document).mouseup(function (e) {
-  e.stopPropagation();
-  if (!$(event.target).hasClass('addFilter-button')) {
-    $('.addFilter-dropdown').slideUp();
-  }
-});
-
 /* ********** Thumbs */

 /* Shift-click: select all photos between the click and the shift+click */
@@ -0,0 +1,556 @@
+$(document).ready(function() {
+  // Detect unsaved changes on any inputs
+  var user_interacted = false;
+
+  $('input, textarea, select').on('focus', function() {
+    user_interacted = true;
+  });
+
+  $('input, textarea').on('input', function() {
+    var pictureId = $(this).parents("fieldset").data("image_id");
+    if (user_interacted == true) {
+      showUnsavedLocalBadge(pictureId);
+    }
+  });
+
+  // Specific handler for datepicker inputs
+  $('input[data-datepicker]').on('change', function() {
+    var pictureId = $(this).parents("fieldset").data("image_id");
+    if (user_interacted == true) {
+      showUnsavedLocalBadge(pictureId);
+    }
+  });
+
+  $('select').on('change', function() {
+    var pictureId = $(this).parents("fieldset").data("image_id");
+    if (user_interacted == true) {
+      showUnsavedLocalBadge(pictureId);
+    }
+  });
+
+  $('.related-categories-container .remove-item, .datepickerDelete').on('click', function() {
+    user_interacted = true;
+    var pictureId = $(this).parents("fieldset").data("image_id");
+    showUnsavedLocalBadge(pictureId);
+  });
+
+  // METADATA SYNC
+  $('.action-sync-metadata').on('click', function(event) {
+    var pictureId = $(this).parents("fieldset").data("image_id");
+    $.confirm({
+      title: str_meta_warning,
+      draggable: false,
+      titleClass: "metadataSyncConfirm",
+      theme: "modern",
+      content: "",
+      animation: "zoom",
+      boxWidth: '30%',
+      useBootstrap: false,
+      type: 'red',
+      animateFromElement: false,
+      backgroundDismiss: true,
+      typeAnimated: false,
+      buttons: {
+        confirm: {
+          text: str_meta_yes,
+          btnClass: 'btn-red',
+          action: function() {
+            disableLocalButton(pictureId);
+            $.ajax({
+              type: 'POST',
+              url: 'ws.php?format=json',
+              data: {
+                method: "pwg.images.syncMetadata",
+                pwg_token: jQuery("input[name=pwg_token]").val(),
+                image_id: pictureId
+              },
+              dataType: 'json',
+              success: function(data) {
+                var isOk = data.stat && data.stat === "ok";
+                if (isOk) {
+                  updateBlock(pictureId);
+                } else {
+                  showErrorLocalBadge(pictureId);
+                  enableLocalButton(pictureId);
+                }
+              },
+              error: function(data) {
+                console.error("Error occurred");
+                enableLocalButton(pictureId);
+              }
+            });
+          }
+        },
+        cancel: {
+          text: str_meta_no
+        }
+      }
+    });
+  });
+  // DELETE
+  $('.action-delete-picture').on('click', function(event) {
+    var $fieldset = $(this).parents("fieldset");
+    var pictureId = $fieldset.data("image_id");
+    $.confirm({
+      title: str_are_you_sure,
+      draggable: false,
+      titleClass: "groupDeleteConfirm",
+      theme: "modern",
+      content: "",
+      animation: "zoom",
+      boxWidth: '30%',
+      useBootstrap: false,
+      type: 'red',
+      animateFromElement: false,
+      backgroundDismiss: true,
+      typeAnimated: false,
+      buttons: {
+        confirm: {
+          text: str_yes,
+          btnClass: 'btn-red',
+          action: function() {
+            var image_ids = [pictureId];
+            (function(ids) {
+              $.ajax({
+                type: 'POST',
+                url: 'ws.php?format=json',
+                data: {
+                  method: "pwg.images.delete",
+                  pwg_token: jQuery("input[name=pwg_token]").val(),
+                  image_id: ids.join(',')
+                },
+                dataType: 'json',
+                success: function(data) {
+                  var isOk = data.stat && data.stat === "ok";
+                  if (isOk) {
+                    $fieldset.remove();
+                    $('.pagination-container').css({
+                      'pointer-events': 'none',
+                      'opacity': '0.5'
+                    });
+                    $('.button-reload').css('display', 'block');
+                    $('div[data-image_id="' + pictureId + '"]').css('display', 'flex');
+                  } else {
+                    showErrorLocalBadge(pictureId);
+                  }
+                },
+                error: function(data) {
+                  console.error("Error occurred");
+                }
+              });
+            })(image_ids);
+            image_ids = [];
+          }
+        },
+        cancel: {
+          text: str_no
+        }
+      }
+    });
+  });
+  // VALIDATION
+  //Unit Save
+  $('.action-save-picture').on('click', function(event) {
+    var $fieldset = $(this).parents("fieldset");
+    var pictureId = $fieldset.data("image_id");
+    saveChanges(pictureId);
+  });
+  //Global Save
+  $('.action-save-global').on('click', function(event) {
+    saveAllChanges();
+  });
+  //Categories 
+  $(".linked-albums.add-item").on("click", function() {
+    var pictureId = $(this).parents("fieldset").data("image_id")
+    linked_albums_open(pictureId);
+    set_up_popin();
+  });
+  $(".limitReached").html(str_no_search_in_progress);
+  $(".search-cancel-linked-album").hide();
+  $(".linkedAlbumPopInContainer .searching").hide();
+  $("#linkedAlbumSearch .search-input").on('input', function() {
+    var pictureId = $("#linkedAlbumSearch .search-input").parents(".linkedAlbumPopInContainer").attr("id");
+    if ($(this).val() != 0) {
+      $("#linkedAlbumSearch .search-cancel-linked-album").show()
+    } else {
+      $("#linkedAlbumSearch .search-cancel-linked-album").hide();
+    }
+    // Search input value length required to start searching
+    if ($(this).val().length > 0) {
+      linked_albums_search($(this).val(), pictureId);
+    } else {
+      $(".limitReached").html(str_no_search_in_progress);
+      $("#searchResult").empty();
+    }
+  })
+  $(".search-cancel-linked-album").on("click", function() {
+    $("#linkedAlbumSearch .search-input").val("");
+    $("#linkedAlbumSearch .search-input").trigger("input");
+  })
+  $(".related-categories-container .breadcrumb-item .remove-item").on("click", function() {
+    var pictureId = $(this).parents("fieldset").data("image_id")
+    remove_related_category($(this).attr("id"), pictureId);
+  })
+  pluginFunctionMapInit(activePlugins);
+})
+
+function fill_results(cats, pictureId) {
+  $("#searchResult").empty();
+  cats.forEach(cat => {
+    $("#searchResult").append(
+      "<div class='search-result-item' id=" + cat.id + ">" +
+      "<span class='search-result-path'>" + cat.fullname + "</span><span id=" + cat.id + " class='icon-plus-circled item-add' onclick='showUnsavedLocalBadge(" + pictureId + ")'></span>" +
+      "</div>"
+    );
+    var this_related_category_ids = window["related_category_ids_" + pictureId];
+    var catId = parseInt(cat.id);
+    if (this_related_category_ids.includes(catId)) {
+      $(".search-result-item#" + catId + " .item-add").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function(event) {
+        event.preventDefault();
+      });
+      $(".search-result-item").addClass("notClickable").attr("title", str_already_in_related_cats).on("click", function(event) {
+        event.preventDefault();
+      });
+    } else {
+      $(".search-result-item#" + catId + " .item-add").on("click", function() {
+        add_related_category(catId, cat.full_name_with_admin_links, pictureId);
+      });
+    }
+  });
+}
+
+function remove_related_category(cat_id, pictureId) {
+  var catId = parseInt(cat_id);
+  var this_related_category_ids = window["related_category_ids_" + pictureId];
+  $("#" + pictureId + " .invisible-related-categories-select option[value=" + catId + "]").remove();
+  $("#" + pictureId + " .invisible-related-categories-select").trigger('change');
+  $("#" + pictureId + " #" + catId).parent().remove();
+  cat_to_remove_index = this_related_category_ids.indexOf(catId);
+  if (cat_to_remove_index > -1) {
+    this_related_category_ids.splice(cat_to_remove_index, 1);
+  }
+  check_related_categories(pictureId);
+}
+
+function add_related_category(cat_id, cat_link_path, pictureId) {
+  var catId = parseInt(cat_id);
+  var this_related_category_ids = window["related_category_ids_" + pictureId];
+  if (!this_related_category_ids.includes(catId)) {
+    $("#" + pictureId + " .related-categories-container").append(
+      "<div class='breadcrumb-item album-listed'>" +
+      "<span class='link-path'>" + cat_link_path + "</span><span id=" + catId + " class='icon-cancel-circled remove-item'></span>" +
+      "</div>"
+    );
+    $(".search-result-item#" + catId).addClass("notClickable");
+    this_related_category_ids.push(catId);
+    $(".invisible-related-categories-select").append("<option selected value=" + catId + "></option>").trigger('change');
+    $("#" + catId).on("click", function() {
+      remove_related_category(catId, pictureId);
+    })
+    linked_albums_close();
+  }
+  check_related_categories(pictureId);
+}
+
+function check_related_categories(pictureId) {
+  var this_related_category_ids = window["related_category_ids_" + pictureId];
+  $("#picture-" + pictureId + " .linked-albums-badge").html(this_related_category_ids.length);
+  if (this_related_category_ids.length == 0) {
+    $("#" + pictureId + " .linked-albums-badge").addClass("badge-red");
+    $("#" + pictureId + " .add-item").addClass("highlight");
+    $("#" + pictureId + " .orphan-photo").html(str_orphan).show();
+  } else {
+    $("#" + pictureId + " .linked-albums-badge.badge-red").removeClass("badge-red");
+    $("#" + pictureId + " .add-item.highlight").removeClass("highlight");
+    $("#" + pictureId + " .orphan-photo").hide();
+  }
+}
+
+function updateUnsavedGlobalBadge() {
+  var visibleLocalUnsavedCount = $(".local-unsaved-badge").filter(function() {
+    return $(this).css('display') === 'block';
+  }).length;
+  if (visibleLocalUnsavedCount > 0) {
+    $(".global-unsaved-badge").css('display', 'block');
+    $("#unsaved-count").text(visibleLocalUnsavedCount);
+  } else {
+    $(".global-unsaved-badge").css('display', 'none');
+    $("#unsaved-count").text('');
+  }
+}
+
+function showUnsavedLocalBadge(pictureId) {
+  hideSuccesLocalBadge(pictureId);
+  hideErrorLocalBadge(pictureId);
+  $("#picture-" + pictureId + " .local-unsaved-badge").css('display', 'block');
+  updateUnsavedGlobalBadge();
+}
+
+function hideUnsavedLocalBadge(pictureId) {
+  $("#picture-" + pictureId + " .local-unsaved-badge").css('display', 'none');
+  updateUnsavedGlobalBadge();
+}
+$(window).on('beforeunload', function() {
+  if (user_interacted) {
+    return "You have unsaved changes, are you sure you want to leave this page?";
+  }
+});
+//Error badge
+function showErrorLocalBadge(pictureId) {
+  $("#picture-" + pictureId + " .local-error-badge").css('display', 'block');
+}
+
+function hideErrorLocalBadge(pictureId) {
+  $("#picture-" + pictureId + " .local-error-badge").css('display', 'none');
+}
+//Succes badge
+function updateSuccessGlobalBadge() {
+  var visibleLocalSuccesCount = $(".local-success-badge").filter(function() {
+    return $(this).css('display') === 'block';
+  }).length;
+  if (visibleLocalSuccesCount > 0) {
+    showSuccesGlobalBadge()
+  } else {
+    hideSuccesGlobalBadge()
+  }
+}
+
+function showSuccessLocalBadge(pictureId) {
+  var badge = $("#picture-" + pictureId + " .local-success-badge");
+  badge.css({
+    'display': 'block',
+    'opacity': 1
+  });
+  setTimeout(() => {
+    badge.fadeOut(1000, function() {
+      badge.css('display', 'none');
+    });
+  }, 3000);
+}
+
+function hideSuccesLocalBadge(pictureId) {
+  $("#picture-" + pictureId + " .local-success-badge").css('display', 'none');
+}
+
+function showSuccesGlobalBadge() {
+  var badge = $(".global-succes-badge");
+  badge.css({
+    'display': 'block',
+    'opacity': 1
+  });
+  setTimeout(() => {
+    badge.fadeOut(1000, function() {
+      badge.css('display', 'none');
+    });
+  }, 3000);
+}
+
+function hideSuccesGlobalBadge() {
+  $("global-succes-badge").css('display', 'none');
+}
+
+function showMetasyncSuccesBadge(pictureId) {
+  var badge = $("#picture-" + pictureId + " .metasync-success");
+  badge.css({
+    'display': 'block',
+    'opacity': 1
+  });
+  setTimeout(() => {
+    badge.fadeOut(1000, function() {
+      badge.css('display', 'none');
+    });
+  }, 3000);
+}
+
+function disableLocalButton(pictureId) {
+  $("#picture-" + pictureId + " .action-save-picture").addClass("disabled");
+  $("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
+  disableGlobalButton();
+}
+
+function enableLocalButton(pictureId) {
+  $("#picture-" + pictureId + " .action-save-picture").removeClass("disabled");
+  $("#picture-" + pictureId + " .action-save-picture i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
+}
+
+function disableGlobalButton() {
+  $(".action-save-global").addClass("disabled");
+  $(".action-save-global i").removeClass("icon-floppy").addClass("icon-spin6 animate-spin");
+}
+
+function enableGlobalButton() {
+  $(".action-save-global").removeClass("disabled");
+  $(".action-save-global i").removeClass("icon-spin6 animate-spin").addClass("icon-floppy");
+}
+
+function saveChanges(pictureId) {
+  if ($("#picture-" + pictureId + " .local-unsaved-badge").css('display') === 'block') {
+    disableLocalButton(pictureId);
+    // Retrieve Infos
+    var name = $("#name-" + pictureId).val();
+    var author = $("#author-" + pictureId).val();
+    var date_creation = $("#date_creation-" + pictureId).val();
+    var comment = $("#description-" + pictureId).val();
+    var level = $("#level-" + pictureId + " option:selected").val();
+    // Get Categories
+    var categories = [];
+    $("#picture-" + pictureId + " .remove-item").each(function() {
+      categories.push($(this).attr("id"));
+    });
+    var categoriesStr = categories.join(';');
+    // Get Tags
+    var tags = [];
+    $("#tags-" + pictureId + " option").each(function() {
+      var tagId = $(this).val().replace(/~~/g, '');
+      tags.push(tagId);
+    });
+    var tagsStr = tags.join(',');
+    $.ajax({
+      url: 'ws.php?format=json',
+      method: 'POST',
+      data: {
+        method: 'pwg.images.setInfo',
+        image_id: pictureId,
+        name: name,
+        author: author,
+        date_creation: date_creation,
+        comment: comment,
+        categories: categoriesStr,
+        tag_ids: tagsStr,
+        level: level,
+        single_value_mode: "replace",
+        multiple_value_mode: "replace",
+        pwg_token: jQuery("input[name=pwg_token]").val()
+      },
+      success: function(response) {
+        enableLocalButton(pictureId);
+        enableGlobalButton();
+        hideUnsavedLocalBadge(pictureId);
+        showSuccessLocalBadge(pictureId);
+        updateSuccessGlobalBadge();
+        // pluginSaveLoop(activePlugins); //call for plugin save
+      },
+      error: function(xhr, status, error) {
+        enableLocalButton(pictureId);
+        enableGlobalButton();
+        hideUnsavedLocalBadge(pictureId);
+        showErrorLocalBadge(pictureId);
+        updateSuccessGlobalBadge();
+        console.error('Error:', error);
+      }
+    });
+  } else {}
+}
+
+function saveAllChanges() {
+  $("fieldset").each(function() {
+    var pictureId = $(this).data("image_id");
+    saveChanges(pictureId);
+  });
+}
+//PLUGINS SAVE METHOD
+var pluginFunctionMap = {};
+
+function pluginFunctionMapInit(activePlugins) {
+  activePlugins.forEach(function(pluginId) {
+    var functionName = pluginId + '_batchManagerSave';
+    if (typeof window[functionName] === 'function') {
+      pluginFunctionMap[pluginId] = window[functionName];
+    } else {
+      console.log('Function not found during initialization: ' + functionName);
+    }
+  });
+}
+
+function pluginSaveLoop(activePlugins) {
+  if (activePlugins.length === 0) {
+    console.log("No plugins to process in pluginSaveLoop.");
+    return;
+  }
+  activePlugins.forEach(function(pluginId) {
+    var saveFunction = pluginFunctionMap[pluginId];
+    if (typeof saveFunction === 'function') {
+      saveFunction();
+      console.log('Executed function for plugin: ' + pluginId);
+    } else {
+      console.log('Function not found for plugin: ' + pluginId);
+    }
+  });
+}
+//UPDATE BLOCKS (Yet to be implemented)
+function updateBlock(pictureId) {
+  $.ajax({
+    url: 'ws.php?format=json',
+    type: 'GET',
+    dataType: 'json',
+    data: {
+      method: 'pwg.images.getInfo',
+      image_id: pictureId,
+      format: 'json'
+    },
+    success: function(response) {
+      if (response.stat === 'ok') {
+        $("#picture-" + pictureId + " #name-" + pictureId).val(response.result.name);
+        $("#picture-" + pictureId + " #author-" + pictureId).val(response.result.author);
+        $("#picture-" + pictureId + " #date_creation-" + pictureId).val(response.result.date_creation);
+        $("#picture-" + pictureId + " #description-" + pictureId).val(response.result.comment);
+        $("#picture-" + pictureId + " #level-" + pictureId).val(response.result.level);
+        $("#picture-" + pictureId + " #filename-" + pictureId).text(response.result.file);
+        $("#picture-" + pictureId + " #filesize-" + pictureId).text(response.result.filesize);
+        $("#picture-" + pictureId + " #dimensions-" + pictureId).text(response.result.width + "x" + response.result.height);
+        // updateTags(response.result.tags, pictureId); //Yet to be implemented
+        showMetasyncSuccesBadge(pictureId);
+        enableLocalButton(pictureId);
+        enableGlobalButton();
+      } else {
+        console.error("Error:", response.message);
+        showErrorLocalBadge(pictureId);
+        enableLocalButton(pictureId);
+        enableGlobalButton();
+      }
+    },
+    error: function(xhr, status, error) {
+      console.error("Error:", status, error);
+      showErrorLocalBadge(pictureId);
+      enableLocalButton(pictureId);
+    }
+  });
+}
+//TAGS UPDATE Yet to be implemented
+// function updateTags(tagsData, pictureId) {
+//   var $tagsUpdate = $('#tags-'+pictureId).selectize({
+//     create: true,
+//     persist: false
+// });
+//   var selectizeTags = $tagsUpdate[0].selectize;    
+//   var transformedData = tagsData.map(function(item) {
+//       return {
+//           value: item.id,
+//           text: item.name
+//       };
+//   })
+//   console.log(transformedData);
+//   selectizeTags.clearOptions();
+//   selectizeTags.addOption(transformedData);
+//   selectizeTags.refreshOptions(true);
+// };
+
+//UNRELEASED LEVEL SLIDER
+//   $(function () {
+//     $('.privacy-filter-slider').each(function() {
+//         var id = $(this).attr('id');
+//         $(this).slider({
+//             range: 'min',
+//             value: $(this).attr('value'),
+//             min: 0,
+//             max: 4,
+//             slide: function (event, ui) {
+//                 updateCertificationFilterLabel(ui.value, id);
+//             }
+//         });
+//     });
+// });
+// function updateCertificationFilterLabel(value, id) {
+//     let label = strs_privacy[value];
+//     $('#' + id + ' .privacy').html(label);
+// }
@@ -6,7 +6,7 @@

 {combine_script id='jquery.ui.slider' require='jquery.ui' load='async' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
 {combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
-{combine_script id='doubleSlider' load='async' require='jquery.ui.slider' path='admin/themes/default/js/doubleSlider.js'}
+{combine_script id='doubleSlider' load='footer' require='jquery.ui.slider' path='admin/themes/default/js/doubleSlider.js'}

 {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}

@@ -311,46 +311,6 @@ $(document).ready(function() {
    jQuery("#sync_md5sum").toggle(jQuery(this).val() == "no_sync_md5sum");
  });
 });
-
-{*<!-- sliders config -->*}
-var sliders = {
-  widths: {
-    values: [{$dimensions.widths}],
-    selected: {
-      min: {$dimensions.selected.min_width},
-      max: {$dimensions.selected.max_width},
-    },
-    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
-  },
-
-  heights: {
-    values: [{$dimensions.heights}],
-    selected: {
-      min: {$dimensions.selected.min_height},
-      max: {$dimensions.selected.max_height},
-    },
-    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
-  },
-
-  ratios: {
-    values: [{$dimensions.ratios}],
-    selected: {
-      min: {$dimensions.selected.min_ratio},
-      max: {$dimensions.selected.max_ratio},
-    },
-    text: '{'between %.2f and %.2f'|translate|escape:'javascript'}'
-  },
-
-  filesizes: {
-    values: [{$filesize.list}],
-    selected: {
-      min: {$filesize.selected.min},
-      max: {$filesize.selected.max},
-    },
-    text: '{'between %s and %s MB'|translate|escape:'javascript'}'
-  }
-};
-
 {/footer_script}

 {combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
@@ -361,207 +321,10 @@ var sliders = {
  <form action="{$F_ACTION}" method="post">
  <input type="hidden" name="start" value="{$START}">
  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-
-  <fieldset>
-    <legend><span class='icon-filter icon-green'></span>{'Filter'|@translate}</legend>
-
-    <div class="filterBlock">
-      <ul id="filterList">
-        <li id="filter_prefilter" {if !isset($filter.prefilter)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_prefilter_use" class="useFilterCheckbox" {if isset($filter.prefilter)}checked="checked"{/if}>
-          <p>{'Predefined filter'|@translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
-          <select name="filter_prefilter">
-            {foreach from=$prefilters item=prefilter}
-              {assign 'optionClass' ''}
-              {if $prefilter.ID eq 'no_album'}{assign 'optionClass' 'icon-heart-broken'}{/if}
-              {if $prefilter.ID eq 'caddie'}{assign 'optionClass' 'icon-flag'}{/if}
-
-            <option value="{$prefilter.ID}"  class="{$optionClass}" {if isset($filter.prefilter) && $filter.prefilter eq $prefilter.ID}selected="selected"{/if}>{$prefilter.NAME}</option>
-            {/foreach}
-          </select>
-          <a id="empty_caddie" href="admin.php?page=batch_manager&amp;action=empty_caddie" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'caddie'}display:none{/if}">{'Empty caddie'|translate}</a>
-  {if $NB_ORPHANS > 0}
-          <a id="delete_orphans" href="#" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'no_album'}display:none{/if}" class="icon-trash">{'Delete %d orphan photos'|translate:$NB_ORPHANS}</a>
-  {/if}
-  {if $NB_NO_MD5SUM > 0}
-  <a id="sync_md5sum" href="#" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'no_sync_md5sum'}display:none{/if}" class="icon-arrows-cw">{'Compute %d missing checksums'|translate:{$NB_NO_MD5SUM}}</a>
-  {/if}
-
-          <span id="add_md5sum" style="display:none">
-            <img class="loading" src="themes/default/images/ajax-loader-small.gif">
-            <span id="md5sum_added">0</span>% -
-            <span id="md5sum_to_add" data-origin="{$NB_NO_MD5SUM}">{$NB_NO_MD5SUM}</span>
-            {'checksums to add'|translate}
-          </span>
-
-          <span id="add_md5sum_error" class="errors" style="display:none"></span>
-
-          <span id="orphans_deletion" style="display:none">
-            <img class="loading" src="themes/default/images/ajax-loader-small.gif">
-            <span id="orphans_deleted">0</span>% -
-            <span id="orphans_to_delete" data-origin="{$NB_ORPHANS}">{$NB_ORPHANS}</span>
-            {'orphans to delete'|translate}
-          </span>
-
-          <span id="orphans_deletion_error" class="errors" style="display:none"></span>
-
-          <span id="duplicates_options" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'duplicates'}display:none{/if}">
-            {'based on'|translate}
-            <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_filename" {if isset($filter.duplicates_filename)}checked="checked"{/if}> {'file name'|translate}</label>
-            <label class="font-checkbox" title="md5sum"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_checksum" {if isset($filter.duplicates_checksum)}checked="checked"{/if}> {'checksum'|translate} <i class="icon-help-circled tiptip" title="translated md5sum definition here !"> </i></label>
-            <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_date" {if isset($filter.duplicates_date) or (isset($filter.prefilter) and $filter.prefilter ne 'duplicates')}checked="checked"{/if}> {'date & time'|translate}</label>
-            <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_dimensions" {if isset($filter.duplicates_dimensions)}checked="checked"{/if}> {'width & height'|translate}</label>
-          </span>
-        </li>
-
-        <li id="filter_category" {if !isset($filter.category)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_category_use" class="useFilterCheckbox" {if isset($filter.category)}checked="checked"{/if}>
-          <p>{'Album'|@translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <select data-selectize="categories" data-value="{$filter_category_selected|@json_encode|escape:html}"
-            data-default="first" name="filter_category"></select>
-          <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_category_recursive" {if isset($filter.category_recursive)}checked="checked"{/if}> {'include child albums'|@translate}</label>
-        </li>
-
-        <li id="filter_tags" {if !isset($filter.tags)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_tags_use" class="useFilterCheckbox" {if isset($filter.tags)}checked="checked"{/if}>
-          <p>{'Tags'|@translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <select data-selectize="tags" data-value="{$filter_tags|@json_encode|escape:html}"
-            placeholder="{'Type in a search term'|translate}"
-            name="filter_tags[]" multiple style="width:600px;"></select>
-          <label class="font-checkbox"><span class="icon-circle-empty"></span><span><input type="radio" name="tag_mode" value="AND" {if !isset($filter.tag_mode) or $filter.tag_mode eq 'AND'}checked="checked"{/if}> {'All tags'|@translate}</span></label>
-          <label class="font-checkbox"><span class="icon-circle-empty"></span><span><input type="radio" name="tag_mode" value="OR" {if isset($filter.tag_mode) and $filter.tag_mode eq 'OR'}checked="checked"{/if}> {'Any tag'|@translate}</span></label>
-        </li>
-
-        <li id="filter_level" {if !isset($filter.level)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_level_use" class="useFilterCheckbox" {if isset($filter.level)}checked="checked"{/if}>
-          <p>{'Privacy level'|@translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <select name="filter_level" size="1">
-            {html_options options=$filter_level_options selected=$filter_level_options_selected}
-          </select>
-          <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_level_include_lower" {if isset($filter.level_include_lower)}checked="checked"{/if}> {'include photos with lower privacy level'|@translate}</label>
-        </li>
-
-        <li id="filter_dimension" {if !isset($filter.dimension)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_dimension_use" class="useFilterCheckbox" {if isset($filter.dimension)}checked="checked"{/if}>
-          <p>{'Dimensions'|translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <blockquote>
-            <div data-slider="widths" class="dimensionSlidersBlocks">
-              <div class="dimensionSlidersTitleButtons">
-                <div>
-                  {'Width'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
-                </div>
-                <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|translate}</a>
-              </div>
-              <div class="slider-slider"></div>
-
-              <input type="hidden" data-input="min" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}">
-              <input type="hidden" data-input="max" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}">
-            </div>
-
-            <div data-slider="heights" class="dimensionSlidersBlocks">
-              <div class="dimensionSlidersTitleButtons">
-                <div>
-                  {'Height'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
-                </div>
-                <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|translate}</a>
-              </div>
-              <div class="slider-slider"></div>
-              
-              <input type="hidden" data-input="min" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}">
-              <input type="hidden" data-input="max" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}">
-            </div>
-
-            <div data-slider="ratios" class="dimensionSlidersBlocks">
-                <div style="margin-bottom: 11px;">
-                  <span>{'Ratio'|translate} ({'Width'|@translate}/{'Height'|@translate})</span>
-                  <span class="slider-info">{'between %.2f and %.2f'|translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
-                </div>
-                <div class="dimensionSlidersRatioButtons">
-                  <div>
-                  {if isset($dimensions.ratio_portrait)} <a class="slider-choice" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|translate}</a>{/if}
-                  {if isset($dimensions.ratio_square)} <a class="slider-choice" data-min="{$dimensions.ratio_square.min}" data-max="
-                  {$dimensions.ratio_square.max}">{'square'|translate}</a>{/if}
-                  {if isset($dimensions.ratio_landscape)} <a class="slider-choice" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|translate}</a>{/if}
-                  {if isset($dimensions.ratio_panorama)} <a class="slider-choice" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|translate}</a>{/if}
-                  </div>
-                  <div>
-                   <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|translate}</a>
-                  </div>
-                </div>
-              <div class="slider-slider"></div>
-
-              <input type="hidden" data-input="min" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}">
-              <input type="hidden" data-input="max" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}">
-            </div>
-          </blockquote>
-        </li>
-
-        <li id="filter_search"{if !isset($filter.search)} style="display:none"{/if}>
-          <input type="checkbox" name="filter_search_use" class="useFilterCheckbox"{if isset($filter.search)} checked="checked"{/if}>
-          <p>{'Search'|@translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <input name="q" size=40 value="{if isset($filter.search)} {$filter.search.q|stripslashes|htmlspecialchars}{/if}">
-          <a href="admin/popuphelp.php?page=quick_search&amp;output=content_only" title="{'Help'|@translate}" class="help-popin-search"><span class="icon-help-circled">{'Search tips'|translate}</span></a>
-          {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
-  {if (isset($no_search_results))}
-  <div>{'No results for'|@translate} :
-    <em><strong>
-    {foreach $no_search_results as $res}
-    {if !$res@first} &mdash; {/if}
-    {$res}
-    {/foreach}
-    </strong></em>
-  </div>
-  {/if}
-        </li>
-
-        <li id="filter_filesize" {if !isset($filter.filesize)}style="display:none"{/if}>
-          <input type="checkbox" name="filter_filesize_use" class="useFilterCheckbox" {if isset($filter.filesize)}checked="checked"{/if}>
-          <p>{'Filesize'|translate}</p>
-          <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
-          <blockquote>
-            <div data-slider="filesizes">
-              <span class="slider-info">{'between %s and %s MB'|translate:$filesize.selected.min:$filesize.selected.max}</span>
-              <a class="slider-choice dimension-cancel" data-min="{$filesize.bounds.min}" data-max="{$filesize.bounds.max}">{'Reset'|translate}</a>
-              <div class="slider-slider"></div>
-
-              <input type="hidden" data-input="min" name="filter_filesize_min" value="{$filesize.selected.min}">
-              <input type="hidden" data-input="max" name="filter_filesize_max" value="{$filesize.selected.max}">
-            </div>
-          </blockquote>
-        </li>
-      </ul>
-
-      <div class='noFilter'>{'No filter, add one'|@translate}</div>
-
-      <div class="filterActions">
-        <div id="addFilter">
-          <div class="addFilter-button icon-plus" onclick="$('.addFilter-dropdown').slideToggle()">{'Add a filter'|@translate}</div>
-          <div class="addFilter-dropdown">
-            <a data-value="filter_prefilter" {if isset($filter.prefilter)}class="disabled"{/if}>{'Predefined filter'|@translate}</a>
-            <a data-value="filter_category" {if isset($filter.category)}class="disabled"{/if}>{'Album'|@translate}</a>
-            <a data-value="filter_tags" {if isset($filter.tags)}class="disabled"{/if}>{'Tags'|@translate}</a>
-            <a data-value="filter_level" {if isset($filter.level)}class="disabled"{/if}>{'Privacy level'|@translate}</a>
-            <a data-value="filter_dimension" {if isset($filter.dimension)}class="disabled"{/if}>{'Dimensions'|@translate}</a>
-            <a data-value="filter_filesize" {if isset($filter.filesize)}class="disabled"{/if}>{'Filesize'|@translate}</a>
-            <a data-value="filter_search"{if isset($filter.search)} class="disabled"{/if}>{'Search'|@translate}</a>
-          </div>
-          <a id="removeFilters" class="icon-cancel" style="display: none;">{'Remove all filters'|@translate}</a>
-        </div>
-
-        <button id="applyFilter" name="submitFilter" type="submit">
-          <i class="icon-arrows-cw"></i> {'Refresh photo set'|@translate}
-        </button>
-      </div>
-    </div>
-
-  </fieldset>
-
+  {include file='include/batch_manager_filter.inc.tpl' 
+  title={'Batch Manager Filter'|@translate}
+  searchPlaceholder={'Filters'|@translate}
+  }
  <fieldset>

    <legend><span class='icon-check icon-blue '></span>{'Selection'|@translate}</legend>
@@ -2,12 +2,27 @@
 {include file='include/datepicker.inc.tpl'}
 {include file='include/colorbox.inc.tpl'}

+{combine_script id='jquery.sort' load='footer' path='themes/default/js/plugins/jquery.sort.js'}
+
 {combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}

-{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+{combine_script id='jquery.selectize' load='header' path='themes/default/js/plugins/selectize.min.js'}
 {combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
+{combine_script id='doubleSlider' load='footer' require='jquery.ui.slider' path='admin/themes/default/js/doubleSlider.js'}
+
+{combine_script id='jquery.ui.slider' require='jquery.ui' load='header' path='themes/default/js/ui/minified/jquery.ui.slider.min.js'}
+{combine_css path="themes/default/js/ui/theme/jquery.ui.slider.css"}
+
+{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
+
+{combine_script id='jquery.confirm' load='footer' require='jquery' path='themes/default/js/plugins/jquery-confirm.min.js'}
+{combine_css path="themes/default/js/plugins/jquery-confirm.min.css"}
+
+{combine_css path="admin/themes/default/fontello/css/animation.css" order=10}

 {footer_script}
+{* <!-- PLUGINS --> *}
+var activePlugins = {$ACTIVE_PLUGINS|json_encode};
 (function(){
 {* <!-- TAGS --> *}
 var tagsCache = new TagsCache({
@@ -32,99 +47,291 @@ jQuery(function(){ {* <!-- onLoad needed to wait localization loads --> *}
 jQuery("a.preview-box").colorbox( {
 	photo: true
 });
+
+str_are_you_sure = '{'Are you sure?'|translate|escape:javascript}';
+str_yes = '{'Yes, delete'|translate|escape:javascript}';
+str_no = '{'No, I have changed my mind'|translate|@escape:'javascript'}';
+str_albums_found = '{"<b>%d</b> albums found"|translate|escape:javascript}';
+str_album_found = '{"<b>1</b> album found"|translate|escape:javascript}';
+str_result_limit = '{"<b>%d+</b> albums found, try to refine the search"|translate|escape:javascript}';
+str_orphan = '{'This photo is an orphan'|@translate|escape:javascript}';
+str_no_search_in_progress = '{'No search in progress'|@translate|escape:javascript}';
+str_already_in_related_cats = '{'This albums is already in related categories list'|translate|escape:javascript}';
+str_meta_warning = '{'Warning ! Unsaved changes will be lost'|translate|escape:javascript}';
+str_meta_yes = '{'I want to continue'|translate|escape:javascript}'
+str_meta_no = '{'No, I have changed my mind'|translate|escape:javascript}'
+
 }());
+const strs_privacy = {
+  "0" : "{$level_options[8]}",
+  "1" : "{$level_options[4]}",
+  "2" : "{$level_options[2]}", 
+  "3" : "{$level_options[1]}",
+  "4" : "{$level_options[0]}",
+};
 {/footer_script}

-<form action="{$F_ACTION}" method="POST">
-  <div style="margin: 30px 0; display: flex; justify-content: space-between;">
-    <div style="margin-left: 22px;">
-      {if !empty($navbar) }{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-    </div>
-    <div style="margin-right: 21px;" class="pagination-per-page">
-      <span style="font-weight: bold;color: unset;">{'photos per page'|@translate} :</span>
-      <a href="{$U_ELEMENTS_PAGE}&amp;display=5">5</a>
-      <a href="{$U_ELEMENTS_PAGE}&amp;display=10">10</a>
-      <a href="{$U_ELEMENTS_PAGE}&amp;display=50">50</a>
-    </div>
-  </div>
-  <div style="clear:both"></div>

-{if !empty($elements) }
-<div><input type="hidden" name="element_ids" value="{$ELEMENT_IDS}"></div>
-{foreach from=$elements item=element}
-<fieldset class="elementEdit">
-  <legend>{$element.LEGEND}</legend>
+{combine_script id='batchManagerUnit' load='footer' require='jquery.ui.effect-blind,jquery.sort' path='admin/themes/default/js/batchManagerUnit.js'}

-  <span class="thumb">
-    <a href="{$element.FILE_SRC}" class="preview-box icon-zoom-in" title="{$element.LEGEND|@htmlspecialchars}"><img src="{$element.TN_SRC}" alt="" {if $element.is_svg}style="{if $current.width < 100}min-width: 100px;{/if}{if $current.height < 100} min-height: 100px; {/if}" {/if}></a>
-    <a href="{$element.U_EDIT}" class="icon-pencil">{'Edit'|@translate}</a>
-  </span>
+<div id="batchManagerGlobal" style="margin-bottom: 80px;">
+	<div style="clear:both"></div>
+	{debug}{if isset($ELEMENT_IDS)}
+	<div>
+		<input type="hidden" name="element_ids" value="{$ELEMENT_IDS}">
+	</div>
+	{/if}
+  {*Filters*}
+	<form method="post" action="{$F_ACTION}" class="filter">
+		{include file='include/batch_manager_filter.inc.tpl'   title={'Batch Manager Filter'|@translate}  searchPlaceholder={'Filters'|@translate}}
+	</form>
+	<legend style="padding: 1em;">
+		<span class='icon-menu icon-blue'></span>
+		Liste
+		<span class="count-badge"> {count($all_elements)}</span>
+	</legend>
+	{if !empty($elements) }
+	<div style="margin: 10px 0; display: flex; justify-content: space-between; padding: 1em;">
+		<div style="margin-right: 21px;" class="pagination-per-page">
+			<span style="font-weight: bold;color: unset;">{'photos per page'|@translate} :</span>
+			<a href="{$U_ELEMENTS_PAGE}&amp;display=5">5</a>
+			<a href="{$U_ELEMENTS_PAGE}&amp;display=10">10</a>
+			<a href="{$U_ELEMENTS_PAGE}&amp;display=50">50</a>
+		</div>
+		<div style="margin-left: 22px;">
+			<div class="pagination-reload">
+				{if !empty($navbar) }
+				<a class="button-reload tiptip" title="{'Pagination has changed and needs to be reloaded !'|@translate}" style="display: none;" href="{$F_ACTION}"><i class="icon-cw"></i></a>
+				{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+			</div>
+		</div>
+	</div>
+	{foreach from=$elements item=element}  
+    {footer_script}  
+      var related_category_ids_{$element.ID} = {$element.related_category_ids};
+      url_delete_{$element.id} = '{$element.U_DELETE}';  
+    {/footer_script}
+	<div class="success deleted-badge" data-image_id="{$element.ID}" style="display: none;">
+		<i class="icon-ok" style="font-size: 20px;"></i>
+		<p>
+			&nbsp;{'Image'|@translate}&nbsp;
+			<p style="font-weight: bold;">
+				#{$element.ID} '{$element.FILE}'
+			</p>
+			&nbsp;{'was succesfully deleted'|@translate}
+		</p>
+	</div>
+	<fieldset class="elementEdit" id="picture-{$element.ID}" data-image_id="{$element.ID}">
+		<div class="metasync-success badge-container" style="display: none;">
+			<div class="badge-succes">
+				<i class="icon-ok">&#xe819;</i>
+				{'Metadata sync complete'|@translate}
+			</div>
+		</div>
+		<div class="pictureIdLabel">
+			#{$element.ID}
+		</div>
+		<div class="media-box">
+			<img src="{$element.TN_SRC}" alt="imagename" class="media-box-embed" style="{if $element.FORMAT}width:100%; max-height:100%;{else}max-width:100%; height:100%;{/if}">
+			<div class="media-hover">
+				<div class='picture-preview-actions'>
+					<a class="preview-box icon-zoom-square tiptip" href="{$element.FILE_SRC}" title="Zoom"></a>
+					<a class="icon-download tiptip" href="{$element.U_DOWNLOAD}" title="Download"></a>
+					<a class="icon-signal tiptip" href="{$element.U_HISTORY}" title="Visit history"></a>
+					<a target="_blank" class="icon-pencil tiptip" href="{$element.U_EDIT}" title="{'Edit photo'|@translate}"></a>
+					{if !url_is_remote($element.PATH)}
+					{* <a class="icon-arrows-cw tiptip action-sync-metadata" title="{'Synchronize metadata'|@translate}"></a> *}
+					<a class="icon-trash tiptip action-delete-picture" title="{'delete photo'|@translate}"></a>
+					{/if}  
+				</div>
+				  {if isset($element.U_JUMPTO)}
+				<a class="see-out" href="{$element.U_JUMPTO}" >
+					<p>
+						<i class="icon-left-open"></i>
+						{'Open in gallery'|@translate}
+					</p>
+					  {else}
+					<a class="see-out disabled" href="#" >
+						<p class="" title="{'You don\'t have access to this photo'|translate}" >
+							<i class="icon-left-open"></i>
+							{'Open in gallery'|translate}
+						</p>
+						  {/if}
+					</a>
+				</div>
+			</div>
+			<div class="main-info-container">
+				<div class="main-info-block">
+					<div class='info-framed-icon' style="margin-right:0px;">
+						<i class='icon-picture'></i>
+					</div>
+					<span class="main-info-title" id="filename-{$element.id}">{$element.FILE}</span>
+					<span class="main-info-desc" id="dimensions-{$element.id}">{$element.DIMENSIONS}</span>
+					<span class="main-info-desc" id="filesize-{$element.id}">{$element.FILESIZE}</span>
+					<span class="main-info-desc">{$element.EXT}</span>
+				</div>
+				<div class="main-info-block">
+					<div class='info-framed-icon' style="margin-right:0px;">
+						<span class='icon-calendar'></span>
+					</div>
+					<span class="main-info-title">{$element.POST_DATE}</span>
+					<span class="main-info-desc">{$element.AGE}</span>
+					<span class="main-info-desc">{$element.ADDED_BY}</span>
+					<span class="main-info-desc">{$element.STATS}</span>
+				</div>
+			</div>
+			<div class="info-container">
+				<div class="half-line-info-box">
+					<strong>{'Title'|@translate}</strong>
+					<input type="text" name="name" id="name-{$element.id}" value="{$element.NAME}">
+				</div>
+				<div class="calendar-box">
+					<strong>{'Creation date'|@translate}</strong>
+					<input type="hidden" id="date_creation-{$element.id}" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
+					<label class="calendar-input">
+						<i class="icon-calendar"></i>
+						<input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
+						<a href="#" class="icon-cancel-circled unset datepickerDelete" id="date_creation_unset-{$element.id}"></a>
+					</label>
+				</div>
+				<div class="half-line-info-box">
+					<strong>{'Author'|@translate}</strong>
+					<input type="text" name="author" id="author-{$element.id}" value="{$element.AUTHOR}">
+				</div>
+				<div class="half-line-info-box">
+					<div class="privacy-label-container">
+						<strong>{'Who can see ?'|@translate}</strong>
+						<i>{'level of confidentiality'|@translate}</i>
+					</div>
+					<select name="level" id="level-{$element.id}" size="1">
+						{html_options options=$level_options selected=$element.level_options_selected}
+					</select>
+					{* 
+					<div class="advanced-filter-item advanced-filter-privacy" >
+						<div class="privacy-label-container">
+							<strong>{'Who can see this photo?'|@translate}</strong>
+							<label class="advanced-filter-item-label" for="privacy-filter" ><span class="privacy">{$level_options[$element.LEVEL]}</span></label>
+						</div>
+						<div class="advanced-filter-item-container">
+							<div id="privacy-filter" class="select-bar"></div>
+							<div class="slider-bar-wrapper">
+								<div class="slider-bar-container privacy-filter-slider" value="{$element.LEVEL_CONVERT}" id="{$element.ID}"></div>
+							</div>
+						</div>
+					</div>
+					 *}
+				</div>
+				<div class="full-line-tag-box">
+					<strong>{'Tags'|@translate}</strong>
+					<select id="tags-{$element.id}" data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"placeholder="{'Type in a search term'|translate}"data-create="true" name="tags" id="tags-{$element.id}[]" multiple></select>
+				</div>
+				<div class="full-line-info-box" id="{$element.ID}">
+					<strong>{'Linked albums'|@translate} <span class="linked-albums-badge {if $element.related_categories|@count < 1 } badge-red {/if}"> {$element.related_categories|@count} </span></strong>
+					{if $element.related_categories|@count 
+					< 1}
+					<span class="orphan-photo">{'This photo is an orphan'|@translate}</span>
+					{else}
+					<span class="orphan-photo"></span>
+					{/if}
+					<div class="related-categories-container">
+						{foreach from=$element.related_categories item=$cat_path key=$key}
+						<div class="breadcrumb-item album-listed">
+							<span class="link-path">{$cat_path['name']}</span>
+							{if $cat_path['unlinkable']}
+							<span id={$key} class="icon-cancel-circled remove-item"></span>
+							{else}
+							<span id={$key} class="icon-help-circled help-item tiptip" title="{'This picture is physically linked to this album, you can\'t dissociate them'|translate}"></span>
+							{/if}
+						</div>
+						{/foreach}
+					</div>
+					<div class="breadcrumb-item linked-albums add-item {if $element.related_categories|@count < 1 } highlight {/if}">
+						<span class="icon-plus-circled"></span>
+						{'Add'|translate}
+					</div>
+				</div>
+				<div class="full-line-description-box">
+					<strong>{'Description'|@translate}</strong>
+					<textarea cols="50" rows="4" name="description" class="description-box" id="description-{$element.id}">{$element.DESCRIPTION}</textarea>
+				</div>
+				<div class="validation-container">
+					<div class="save-button-container">
+						<div class="buttonLike action-save-picture buttonSubmitLocal">
+							<i class="icon-floppy"></i>
+							{'Save'|@translate}
+						</div>
+					</div>
+					<div class="local-unsaved-badge badge-container" style="display: none;">
+						<div class="badge-unsaved">
+							<i class="icon-attention">&#xe829;</i>
+							{'You have unsaved changes'|@translate}
+						</div>
+					</div>
+					<div class="local-success-badge badge-container" style="display: none;">
+						<div class="badge-succes">
+							<i class="icon-ok">&#xe819;</i>
+							{'Changes saved'|@translate}
+						</div>
+					</div>
+					<div class="local-error-badge badge-container" style="display: none;">
+						<div class="badge-error">
+							<i class="icon-cancel">&#xe822;</i>
+							{'An error has occured'|@translate}
+						</div>
+					</div>
+				</div>
+			</div>
+		</fieldset>
+		{/foreach}
+		<div style="margin: 30px 0; display: flex; justify-content: space-between;  padding: 1em;">
+			<div class="pagination-per-page">
+				<span class="thumbnailsActionsShow" style="font-weight: bold;">{'Display'|@translate}</span>
+				<a id="pagination-per-page-5">5</a>
+				<a id="pagination-per-page-10">10</a>
+				<a id="pagination-per-page-50">50</a>
+			</div>
+			<div style="margin-left: 22px;">
+				<div class="pagination-reload">
+					{if !empty($navbar) }
+					<a class="button-reload tiptip" title="Pagination has changed and needs to be reloaded !" style="display: none;" href="{$F_ACTION}"><i class="icon-cw"></i></a>
+					{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
+				</div>
+			</div>
+		</div>
+		{/if}
+		<div class="bottom-save-bar">
+			<input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
+			<div class="badge-container global-unsaved-badge" style="display: none;">
+				<div class="badge-unsaved">
+					<i class="icon-attention">&#xe829;</i>
+					<span id="unsaved-count"></span>
+					 {'image(s) contains unsaved changes'|@translate}
+				</div>
+			</div>
+			<div class="badge-container global-succes-badge" style="display: none;">
+				<div class="badge-succes">
+					<i class="icon-ok">&#xe829;</i>
+					{'Changes saved'|@translate}
+				</div>
+			</div>
+			<div class="badge-container global-error-badge" style="display: none;">
+				<div class="badge-error">
+					<i class="icon-cancel">&#xe829;</i>
+					{'An error has occured'|@translate}
+				</div>
+			</div>
+			<div class="buttonLike action-save-global">
+				<i class="icon-floppy"></i>
+				Save all photos
+			</div>
+		</div>
+	</div>

-  <table>
-
-    <tr>
-      <td><strong>{'Title'|@translate}</strong></td>
-      <td><input type="text" class="large" name="name-{$element.id}" value="{$element.NAME}"></td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Author'|@translate}</strong></td>
-      <td><input type="text" class="large" name="author-{$element.id}" value="{$element.AUTHOR}"></td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Creation date'|@translate}</strong></td>
-      <td>
-        <input type="hidden" name="date_creation-{$element.id}" value="{$element.DATE_CREATION}">
-        <label>
-          <i class="icon-calendar"></i>
-          <input type="text" data-datepicker="date_creation-{$element.id}" data-datepicker-unset="date_creation_unset-{$element.id}" readonly>
-        </label>
-        <a href="#" class="icon-cancel-circled" id="date_creation_unset-{$element.id}">{'unset'|translate}</a>
-      </td>
-    </tr>
-    <tr>
-      <td><strong>{'Who can see this photo?'|@translate}</strong><br>({'Privacy level'|translate})</td>
-      <td>
-        <select name="level-{$element.id}">
-          {html_options options=$level_options selected=$element.LEVEL}
-        </select>
-      </td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Tags'|@translate}</strong></td>
-      <td>
-        <select data-selectize="tags" data-value="{$element.TAGS|@json_encode|escape:html}"
-          placeholder="{'Type in a search term'|translate}"
-          data-create="true" name="tags-{$element.id}[]" multiple style="width:500px;"></select>
-      </td>
-    </tr>
-
-    <tr>
-      <td><strong>{'Description'|@translate}</strong></td>
-      <td><textarea cols="50" rows="5" name="description-{$element.id}" id="description-{$element.id}" class="description">{$element.DESCRIPTION}</textarea></td>
-    </tr>
-
-  </table>
-
-</fieldset>
-{/foreach}
-
-{if !empty($navbar)}{include file='navigation_bar.tpl'|@get_extent:'navbar'}{/if}
-
-<p>
-  <input type="hidden" name="pwg_token" value="{$PWG_TOKEN}">
-  <button class="buttonLike" type="submit" value="{'Submit'|@translate}" name="submit"><i class="icon-floppy"></i>{'Submit'|@translate}</button>
-  <button class="resetButton" type="reset" value="{'Reset'|@translate}" name="reset">{'Reset'|@translate}</button>
-
-  {* <span class="buttonLike" type="submit" name="submit"> {'Submit'|@translate}</span> *}
-  {* <input type="reset" value="{'Reset'|@translate}"> *}
-</p>
-{/if}
-
-</form>

+{include file='include/album_selector.inc.tpl' 
+  title={'Associate to album'|@translate}
+  searchPlaceholder={'Search'|@translate}
+}
 <style>
 .selectize-input  .item,
 .selectize-input .item.active {
@@ -132,6 +339,7 @@ jQuery("a.preview-box").colorbox( {
  background-color: #ffa646 !important;
  border-color: transparent !important;
  color: black !important;
+  

  border-radius: 20px !important;
 }
@@ -151,7 +359,22 @@ jQuery("a.preview-box").colorbox( {
  background-color: #ff7700 !important;
 }

-.thumb {
-  float: right;
+.selectize-input.items.not-full.has-options,
+.selectize-input.items.not-full.has-options.focus.input-active.dropdown-active,
+.selectize-input.items.not-full, 
+.selectize-input.items.full{
+  border: 1px solid #D3D3D3 !important;
 }
-</style>
+
+.breadcrumb-item.add-item.highlight{
+  color: #3C3C3C !important;
+}
+
+.breadcrumb-item{
+  margin: 5px 0 5px 0 !important;
+}
+
+.album-listed{
+  background-color: #FFFFFF !important;
+}
+</style>
@@ -0,0 +1,239 @@
+{footer_script}
+<!-- sliders config -->
+var sliders = {
+  widths: {
+    values: [{$dimensions.widths}],
+    selected: {
+      min: {$dimensions.selected.min_width},
+      max: {$dimensions.selected.max_width},
+    },
+    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
+  },
+
+  heights: {
+    values: [{$dimensions.heights}],
+    selected: {
+      min: {$dimensions.selected.min_height},
+      max: {$dimensions.selected.max_height},
+    },
+    text: '{'between %d and %d pixels'|translate|escape:'javascript'}'
+  },
+
+  ratios: {
+    values: [{$dimensions.ratios}],
+    selected: {
+      min: {$dimensions.selected.min_ratio},
+      max: {$dimensions.selected.max_ratio},
+    },
+    text: '{'between %.2f and %.2f'|translate|escape:'javascript'}'
+  },
+
+  filesizes: {
+    values: [{$filesize.list}],
+    selected: {
+      min: {$filesize.selected.min},
+      max: {$filesize.selected.max},
+    },
+    text: '{'between %s and %s MB'|translate|escape:'javascript'}'
+  }
+};
+{/footer_script}
+
+{combine_script id='batchManagerFilter' load='footer' path='admin/themes/default/js/batchManagerFilter.js'}
+<fieldset>
+<legend><span class='icon-filter icon-green'></span>{'Filter'|@translate}</legend>
+<div class="filterBlock">
+  <ul id="filterList">
+    <li id="filter_prefilter" {if !isset($filter.prefilter)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_prefilter_use" class="useFilterCheckbox" {if isset($filter.prefilter)}checked="checked"{/if}>
+      <p>{'Predefined filter'|@translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|@translate}"><span>[x]</span></a>
+      <select name="filter_prefilter">
+        {foreach from=$prefilters item=prefilter}
+          {assign 'optionClass' ''}
+          {if $prefilter.ID eq 'no_album'}{assign 'optionClass' 'icon-heart-broken'}{/if}
+          {if $prefilter.ID eq 'caddie'}{assign 'optionClass' 'icon-flag'}{/if}
+
+        <option value="{$prefilter.ID}"  class="{$optionClass}" {if isset($filter.prefilter) && $filter.prefilter eq $prefilter.ID}selected="selected"{/if}>{$prefilter.NAME}</option>
+        {/foreach}
+      </select>
+      <a id="empty_caddie" href="admin.php?page=batch_manager&amp;action=empty_caddie" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'caddie'}display:none{/if}">{'Empty caddie'|translate}</a>
+{if $NB_ORPHANS > 0}
+      <a id="delete_orphans" href="#" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'no_album'}display:none{/if}" class="icon-trash">{'Delete %d orphan photos'|translate:$NB_ORPHANS}</a>
+{/if}
+{if $NB_NO_MD5SUM > 0}
+<a id="sync_md5sum" href="#" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'no_sync_md5sum'}display:none{/if}" class="icon-arrows-cw">{'Compute %d missing checksums'|translate:{$NB_NO_MD5SUM}}</a>
+{/if}
+
+      <span id="add_md5sum" style="display:none">
+        <img class="loading" src="themes/default/images/ajax-loader-small.gif">
+        <span id="md5sum_added">0</span>% -
+        <span id="md5sum_to_add" data-origin="{$NB_NO_MD5SUM}">{$NB_NO_MD5SUM}</span>
+        {'checksums to add'|translate}
+      </span>
+
+      <span id="add_md5sum_error" class="errors" style="display:none"></span>
+
+      <span id="orphans_deletion" style="display:none">
+        <img class="loading" src="themes/default/images/ajax-loader-small.gif">
+        <span id="orphans_deleted">0</span>% -
+        <span id="orphans_to_delete" data-origin="{$NB_ORPHANS}">{$NB_ORPHANS}</span>
+        {'orphans to delete'|translate}
+      </span>
+
+      <span id="orphans_deletion_error" class="errors" style="display:none"></span>
+
+      <span id="duplicates_options" style="{if !isset($filter.prefilter) or $filter.prefilter ne 'duplicates'}display:none{/if}">
+        {'based on'|translate}
+        <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_filename" {if isset($filter.duplicates_filename)}checked="checked"{/if}> {'file name'|translate}</label>
+        <label class="font-checkbox" title="md5sum"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_checksum" {if isset($filter.duplicates_checksum)}checked="checked"{/if}> {'checksum'|translate} <i class="icon-help-circled tiptip" title="translated md5sum definition here !"> </i></label>
+        <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_date" {if isset($filter.duplicates_date) or (isset($filter.prefilter) and $filter.prefilter ne 'duplicates')}checked="checked"{/if}> {'date & time'|translate}</label>
+        <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_duplicates_dimensions" {if isset($filter.duplicates_dimensions)}checked="checked"{/if}> {'width & height'|translate}</label>
+      </span>
+    </li>
+
+    <li id="filter_category" {if !isset($filter.category)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_category_use" class="useFilterCheckbox" {if isset($filter.category)}checked="checked"{/if}>
+      <p>{'Album'|@translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <select data-selectize="categories" data-value="{$filter_category_selected|@json_encode|escape:html}"
+        data-default="first" name="filter_category"></select>
+      <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_category_recursive" {if isset($filter.category_recursive)}checked="checked"{/if}> {'include child albums'|@translate}</label>
+    </li>
+
+    <li id="filter_tags" {if !isset($filter.tags)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_tags_use" class="useFilterCheckbox" {if isset($filter.tags)}checked="checked"{/if}>
+      <p>{'Tags'|@translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <select data-selectize="tags" data-value="{$filter_tags|@json_encode|escape:html}"
+        placeholder="{'Type in a search term'|translate}"
+        name="filter_tags[]" multiple style="width:600px;"></select>
+      <label class="font-checkbox"><span class="icon-circle-empty"></span><span><input type="radio" name="tag_mode" value="AND" {if !isset($filter.tag_mode) or $filter.tag_mode eq 'AND'}checked="checked"{/if}> {'All tags'|@translate}</span></label>
+      <label class="font-checkbox"><span class="icon-circle-empty"></span><span><input type="radio" name="tag_mode" value="OR" {if isset($filter.tag_mode) and $filter.tag_mode eq 'OR'}checked="checked"{/if}> {'Any tag'|@translate}</span></label>
+    </li>
+
+    <li id="filter_level" {if !isset($filter.level)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_level_use" class="useFilterCheckbox" {if isset($filter.level)}checked="checked"{/if}>
+      <p>{'Privacy level'|@translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <select name="filter_level" size="1">
+        {html_options options=$filter_level_options selected=$filter_level_options_selected}
+      </select>
+      <label class="font-checkbox"><span class="icon-check"></span><input type="checkbox" name="filter_level_include_lower" {if isset($filter.level_include_lower)}checked="checked"{/if}> {'include photos with lower privacy level'|@translate}</label>
+    </li>
+
+    <li id="filter_dimension" {if !isset($filter.dimension)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_dimension_use" class="useFilterCheckbox" {if isset($filter.dimension)}checked="checked"{/if}>
+      <p>{'Dimensions'|translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <blockquote>
+        <div data-slider="widths" class="dimensionSlidersBlocks">
+          <div class="dimensionSlidersTitleButtons">
+            <div>
+              {'Width'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_width:$dimensions.selected.max_width}</span>
+            </div>
+            <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_width}" data-max="{$dimensions.bounds.max_width}">{'Reset'|translate}</a>
+          </div>
+          <div class="slider-slider"></div>
+
+          <input type="hidden" data-input="min" name="filter_dimension_min_width" value="{$dimensions.selected.min_width}">
+          <input type="hidden" data-input="max" name="filter_dimension_max_width" value="{$dimensions.selected.max_width}">
+        </div>
+
+        <div data-slider="heights" class="dimensionSlidersBlocks">
+          <div class="dimensionSlidersTitleButtons">
+            <div>
+              {'Height'|translate} <span class="slider-info">{'between %d and %d pixels'|translate:$dimensions.selected.min_height:$dimensions.selected.max_height}</span>
+            </div>
+            <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_height}" data-max="{$dimensions.bounds.max_height}">{'Reset'|translate}</a>
+          </div>
+          <div class="slider-slider"></div>
+          
+          <input type="hidden" data-input="min" name="filter_dimension_min_height" value="{$dimensions.selected.min_height}">
+          <input type="hidden" data-input="max" name="filter_dimension_max_height" value="{$dimensions.selected.max_height}">
+        </div>
+
+        <div data-slider="ratios" class="dimensionSlidersBlocks">
+            <div style="margin-bottom: 11px;">
+              <span>{'Ratio'|translate} ({'Width'|@translate}/{'Height'|@translate})</span>
+              <span class="slider-info">{'between %.2f and %.2f'|translate:$dimensions.selected.min_ratio:$dimensions.selected.max_ratio}</span>
+            </div>
+            <div class="dimensionSlidersRatioButtons">
+              <div>
+              {if isset($dimensions.ratio_portrait)} <a class="slider-choice" data-min="{$dimensions.ratio_portrait.min}" data-max="{$dimensions.ratio_portrait.max}">{'Portrait'|translate}</a>{/if}
+              {if isset($dimensions.ratio_square)} <a class="slider-choice" data-min="{$dimensions.ratio_square.min}" data-max="
+              {$dimensions.ratio_square.max}">{'square'|translate}</a>{/if}
+              {if isset($dimensions.ratio_landscape)} <a class="slider-choice" data-min="{$dimensions.ratio_landscape.min}" data-max="{$dimensions.ratio_landscape.max}">{'Landscape'|translate}</a>{/if}
+              {if isset($dimensions.ratio_panorama)} <a class="slider-choice" data-min="{$dimensions.ratio_panorama.min}" data-max="{$dimensions.ratio_panorama.max}">{'Panorama'|translate}</a>{/if}
+              </div>
+              <div>
+               <a class="slider-choice dimension-cancel" data-min="{$dimensions.bounds.min_ratio}" data-max="{$dimensions.bounds.max_ratio}">{'Reset'|translate}</a>
+              </div>
+            </div>
+          <div class="slider-slider"></div>
+
+          <input type="hidden" data-input="min" name="filter_dimension_min_ratio" value="{$dimensions.selected.min_ratio}">
+          <input type="hidden" data-input="max" name="filter_dimension_max_ratio" value="{$dimensions.selected.max_ratio}">
+        </div>
+      </blockquote>
+    </li>
+
+    <li id="filter_search"{if !isset($filter.search)} style="display:none"{/if}>
+      <input type="checkbox" name="filter_search_use" class="useFilterCheckbox"{if isset($filter.search)} checked="checked"{/if}>
+      <p>{'Search'|@translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <input name="q" size=40 value="{if isset($filter.search)} {$filter.search.q|stripslashes|htmlspecialchars}{/if}">
+      <a href="admin/popuphelp.php?page=quick_search&amp;output=content_only" title="{'Help'|@translate}" class="help-popin-search"><span class="icon-help-circled">{'Search tips'|translate}</span></a>
+      {combine_script id='core.scripts' load='async' path='themes/default/js/scripts.js'}
+{if (isset($no_search_results))}
+<div>{'No results for'|@translate} :
+<em><strong>
+{foreach $no_search_results as $res}
+{if !$res@first} &mdash; {/if}
+{$res}
+{/foreach}
+</strong></em>
+</div>
+{/if}
+    </li>
+
+    <li id="filter_filesize" {if !isset($filter.filesize)}style="display:none"{/if}>
+      <input type="checkbox" name="filter_filesize_use" class="useFilterCheckbox" {if isset($filter.filesize)}checked="checked"{/if}>
+      <p>{'Filesize'|translate}</p>
+      <a href="#" class="removeFilter" title="{'remove this filter'|translate}"><span>[x]</span></a>
+      <blockquote>
+        <div data-slider="filesizes">
+          <span class="slider-info">{'between %s and %s MB'|translate:$filesize.selected.min:$filesize.selected.max}</span>
+          <a class="slider-choice dimension-cancel" data-min="{$filesize.bounds.min}" data-max="{$filesize.bounds.max}">{'Reset'|translate}</a>
+          <div class="slider-slider"></div>
+
+          <input type="hidden" data-input="min" name="filter_filesize_min" value="{$filesize.selected.min}">
+          <input type="hidden" data-input="max" name="filter_filesize_max" value="{$filesize.selected.max}">
+        </div>
+      </blockquote>
+    </li>
+  </ul>
+
+  <div class='noFilter'>{'No filter, add one'|@translate}</div>
+
+  <div class="filterActions">
+    <div id="addFilter">
+      <div class="addFilter-button icon-plus" onclick="$('.addFilter-dropdown').slideToggle()">{'Add a filter'|@translate}</div>
+      <div class="addFilter-dropdown">
+        <a data-value="filter_prefilter" {if isset($filter.prefilter)}class="disabled"{/if}>{'Predefined filter'|@translate}</a>
+        <a data-value="filter_category" {if isset($filter.category)}class="disabled"{/if}>{'Album'|@translate}</a>
+        <a data-value="filter_tags" {if isset($filter.tags)}class="disabled"{/if}>{'Tags'|@translate}</a>
+        <a data-value="filter_level" {if isset($filter.level)}class="disabled"{/if}>{'Privacy level'|@translate}</a>
+        <a data-value="filter_dimension" {if isset($filter.dimension)}class="disabled"{/if}>{'Dimensions'|@translate}</a>
+        <a data-value="filter_filesize" {if isset($filter.filesize)}class="disabled"{/if}>{'Filesize'|@translate}</a>
+        <a data-value="filter_search"{if isset($filter.search)} class="disabled"{/if}>{'Search'|@translate}</a>
+      </div>
+      <a id="removeFilters" class="icon-cancel" style="display: none;">{'Remove all filters'|@translate}</a>
+    </div>
+
+    <button id="applyFilter" name="submitFilter" type="submit">
+      <i class="icon-arrows-cw"></i> {'Refresh photo set'|@translate}
+    </button>
+  </div>
+</div>
+</fieldset>
@@ -2281,6 +2281,19 @@ h2:lang(en) { text-transform:capitalize; }
  border-left:4px solid #00529b;
 }

+.success {
+  color: #6DCE5E;
+  background-color:#D6FFCF;
+  border-left:4px solid #6DCE5E;
+}
+
+.metasync-success {
+  position: absolute;
+  top: -15px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
 .badge {
  background-color:#0a0;
  color:white;
@@ -2291,6 +2304,10 @@ h2:lang(en) { text-transform:capitalize; }
  margin-left:5px;
 }

+.buttonSubmitLocal {
+  margin-left: 9px !important;
+}
+
 .infos li, .errors li, .warnings li, .messages li { list-style-type:none; }
 .infos .submit {margin-left:30px;}

@@ -3379,6 +3396,317 @@ LEGEND SPAN {
  margin-right: 6px;
  font-size: 16px;
 }
+/* Batch Manager, unit mode */
+.elementEdit{
+  position: relative;
+  display:flex;
+  flex-direction:row;
+  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
+  background-color:#FAFAFA;
+  padding:0px;
+  margin: 1.5em !important;
+  border-radius: 4px;
+}
+
+.pictureIdLabel{
+  position: absolute;
+  bottom: 20px;
+  right: 0px;
+  align-items: right;
+  color:#7a7a7a89;
+  font-size: 14px;
+  padding: 14px 20px 14px 0px;
+}
+
+
+.media-box{
+  display: flex;
+  background-color: #3C3C3C;
+  width:33%;
+  justify-content: center;
+  position: relative;
+  border-radius: 4px 0 0 4px;
+}
+
+.media-box-embed{
+  height: 100%;
+  object-fit: contain;
+  position: absolute; 
+}
+
+.media-hover{
+  opacity:0%;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.media-hover:hover{
+  opacity: 100%;
+  transition: ease-in-out 0.3s;
+}
+
+.main-info-container{
+  display:flex;
+  flex-direction:column;
+  text-align:center;
+  padding:20px;
+  row-gap:15px;
+  width:200px;
+}
+
+.main-info-block{
+  display:flex;
+  flex-direction:column;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+  border-radius: 2px;
+  flex:1;
+  align-items: center;
+  justify-content: center;
+}
+
+.main-info-icon{
+  width:40px;
+  height:40px;
+  margin-bottom:5px;
+  fill: #3C3C3C;
+}
+
+.main-info-title{
+  color: #000;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: normal;
+  width:100px;
+  overflow-wrap: break-word;
+}
+
+.main-info-desc{
+  color: #777;
+  text-align: center;
+  font-family: "Open Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  width:100px;
+}
+
+.info-container{
+  flex:1;
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  align-content: flex-start;
+  padding: 20px 10px 20px 0px;
+  gap: 10px 0px;
+  color:#7A7A7A;
+  text-align: left;
+}
+
+.half-line-info-box{
+  flex: 0 0 calc(50% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+  text-align:left;
+  height: 50px;
+}
+
+.full-line-info-box{
+  flex: 0 0 calc(100% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.full-line-tag-box{
+  flex: 0 0 calc(100% - 20px);
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.calendar-box{
+  flex: 0 0 calc(50% - 20px);
+  height: 50px;
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.full-line-info-box input,
+.half-line-info-box input,
+.half-line-info-box select{
+  display: flex;
+  border-radius: 2px;
+  padding: 0 7px;
+  border: 1px solid #D3D3D3;
+  background-color: #FFFFFF !important;
+  flex: 1;
+}
+
+.full-line-tag-box select{
+  display: flex;
+  border-radius: 2px;
+  padding: 0 7px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+}
+
+.calendar-input{
+  display: flex;
+  border-radius: 2px;
+  padding-left: 7px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+}
+
+.calendar-box input{
+  border:none;
+  outline: none;
+  height: 90%;
+  width: 90%;
+}
+
+.full-line-description-box{
+  flex: 0 0 calc(100% - 20px);
+  min-height: 50px;
+  margin: 0px 10px;
+  display:flex;
+  flex-direction:column;
+}
+
+.description-box{
+  resize: none;
+  border-radius: 2px;
+  border: 1px solid #D3D3D3;
+  background: #FFF;
+}
+.full-line-info-box input,
+.half-line-info-box input,
+.description-box{
+  outline: none !important;
+}
+
+
+
+.privacy-label-container{
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+.privacy-label-container span{
+  color: #ffa646;
+  font-weight: bold;
+}
+.bottom-save-bar{
+  display:flex;
+  flex-direction: row;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  width: calc(100% - 205px);
+  background-color: #ffffff;
+  justify-content: flex-end;
+  align-items: center;
+  z-index: 101;
+  border-top: 1px solid #CCCCCC;
+}
+
+.action-save-global{
+  margin: 10px 0;
+  margin-right: 2%;
+}
+
+.badge-container {
+  text-align: right;
+  margin-right: 2%;
+}
+.badge-unsaved{
+  padding: 5px 10px;
+  border-radius: 100px;
+  font-weight: bold;
+  background-color: #FADDA2;
+  color: #E18C32;
+}
+
+.badge-succes{
+  padding: 5px 10px;
+  border-radius: 100px;
+  font-weight: bold;
+  background-color: #D6FFCF;
+  color: #6DCE5E;
+}
+
+.badge-error{
+  padding: 5px 10px;
+  border-radius: 100px;
+  font-weight: bold;
+  background-color: #F8D7DC;
+  color: #EB3D33;
+}
+
+.badge-count{
+  padding: 10px 10px;
+  border-radius: 100px;
+  background-color: #3C3C3C;
+  color: #FFFFFF;
+}
+
+.pagination-reload{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.deleted-badge{
+  display:flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  padding:0px;
+  margin: 1.5em !important;
+  border-radius: 4px;
+}
+
+.validation-container{
+  margin: 20px 0 0 2px;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;  
+  flex: 1;
+  gap: 10px;
+}
+
+.save-button-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.count-badge {
+  display: inline-block;
+  text-align: center;
+  border-radius: 100px !important;
+  padding: 3px 9px !important;
+  background-color: #686868 !important;
+  color: #FFFFFF !important;
+  margin-left: 5px;
+}

 /* Batch Manager, global mode */
 #batchManagerGlobal #action p {text-align:left;}
@@ -3423,7 +3751,7 @@ LEGEND SPAN {
 #batchManagerGlobal #selectedMessage {padding:5px; border-radius:5px; float: right;}
 #batchManagerGlobal #applyOnDetails {text-align: center; margin-top: 8px; color: #FFA646; font-weight: bold;}
 #batchManagerGlobal .actionButtons {text-align:left; display: flex; flex-direction: column;}
-#batchManagerGlobal #filterList {padding-left:0px; display: flex; flex-wrap: wrap; align-items: start; margin-top: 0px;}
+#batchManagerGlobal #filterList {padding-left:0px; display: flex; flex-wrap: wrap; align-items: start; margin-top: 0px; margin-bottom: 10px !important;}
 #batchManagerGlobal #filterList li {
  list-style-type:none;
  background-color: #fafafa;
@@ -6844,7 +7172,7 @@ color:#FF7B00;

 .linkedAlbumPopIn {
  position: fixed;
-  z-index: 100;
+  z-index: 102;
  left: 0;
  top: 0;
  width: 100%;