<!DOCTYPE html>
<html lang="%lang;">
<head>
  <!-- $Id: carrousel.txt v7.1 04/05/2023 18:19:02 $ -->
  <title>[*add]/[delete::image/images]0 #%index;</title>
  <meta name="robots" content="none">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="shortcut icon" href="%images_prefix;favicon_gwd.png">
  %include;css
</head>
<body%body_prop; id="person">
%include.hed;
<div class="container">
%message_to_wizard;
%include.perso_header;
%( Logic for variables:
  file_name must be defined
  mode="note" then only the note file is updated
  carrousel is “on” if we are dealing with “others” images %)
%random.init;
%define;alert_header()
  %if;("http" in portrait or "http" in portrait_saved)
    WARNING
  %elseif;(evar.mode="others")
    %if;(evar.em="SND_IMAGE_C_OK")[*image received]%if;(evar.notes!="") [with note]%end;
    %elseif;(evar.em="DEL_IMAGE_C_OK")[*image deleted]%sp;
      %if;(evar.delete!="on")[and] [saved]1%end;
    %elseif;(evar.em="RESET_IMAGE_C_OK")[*image/images]0 [restored]1%nn;
    %end;
  %else;
    %if;(evar.em="SND_IMAGE_C_OK")%if;(evar.mode="note")[*note] [update]%else;[*portrait] [uploaded]0%end;%nn;
    %elseif;(evar.em="DEL_IMAGE_C_OK")[*portrait] [deleted]0%if;(evar.delete!="on") [and] [saved]0%end;%nn;
    %elseif;(evar.em="RESET_IMAGE_C_OK")[*portrait] [restored]0%nn;
    %end;%nn;
  %end;
%end;
%define;alert_content()
  %if;("http" in portrait or "http" in portrait_saved)
    Update image field with <a href="%prefix;m=MOD_IND;i=%index;">MOD_IND</a>
  %elseif;(evar.mode="others" or evar.mode="note")
    <samp>%if;(evar.em="RESET_IMAGE_C_OK")images%X;%carrousel;%X;old%X;%evar.file_name; <strong>></strong> %end;images%X;%carrousel;%if;(evar.delete="on")%X;old%end;%X;%nn;
    %if;(evar.notes!="")%evar.file_name_2;.txt%else;%evar.file_name;%end;</samp>
  %else;
    %if;(evar.em="SND_IMAGE_C_OK" or evar.em="RESET_IMAGE_C_OK")
      <samp>%evar.file_name;</samp> %if;(evar.em="RESET_IMAGE_C_OK")<samp>%portraits_store;%X;old%X;%portrait_saved;</samp>
      <strong> <</strong>%end;<strong>> </strong><samp>%portraits_store;%X;%portrait;</samp>%nn;
      %(%if;(evar.em="DEL IMAGE_C_OK" or evar.em="RESET_IMAGE_C_OK")%portrait;%else;%evar.file_name;%end;</samp>%)
    %elseif;(evar.em="DEL_IMAGE_C_OK")
      %if;(evar.delete!="on")<samp>portrait%X;%portrait_saved;</samp> <strong>></strong> <samp>portraits%X;old%X;%portrait_saved;</samp>
      %else;<samp>portraits%X;saved%X;%carrousel;(.gif/jpg/png)</samp>%end;
    %end;
  %end;
%end;
%define;alert_color()
  %if;("http" in portrait or "http" in portrait_saved)danger
  %elseif;(evar.mode="note")primary
  %elseif;(evar.em="SND_IMAGE_C_OK" or evar.em="RESET_IMAGE_C_OK")success
  %elseif;(evar.em="DEL_IMAGE_C_OK" and evar.delete="on")danger
  %else;warning
  %end;
%end;

%let;portraits_store;
  %if;(bvar.reorg="on")%base.name;.gwb%X;documents%X;portraits%nn;
  %else;images%X;%base.name;%nn;
  %end;%nn;
%in;
%let;saved_portraits_store;
  %if;(bvar.reorg="on")%base.name;.gwb%X;documents%X;portraits%nn;
  %else;images%X;%base.name;%X;old%nn;
  %end;%nn;
%in;
%let;images_store;
  %if;(bvar.reorg="on")%base.name;.gwb%X;documents%X;images%nn;
  %else;src%X;%base.name;%X;images%nn;
  %end;%nn;
%in;

%if;(wizard)
  <div class="row mb-1">
    %( *** Col 1 *** %)
    <div class="col-6 border border-bottom-0 border-top-0 border-left-0">
      <h1 class="display-4">
        %(<i class="fa fa-image-portrait fa-fw mr-1"></i>%)
        %if;(has_portrait)[*modify portrait]%else;[*add portrait]%end;</h1>
      <form class="form-row" method="post" action="%action;" enctype="multipart/form-data">
        %if;(cgi)<input type="hidden" name="b" value="%e.b;">%end;
        <input type="hidden" name="m" value="SND_IMAGE_C_OK">
        <input type="hidden" name="i" value="%index;">
        <input type="hidden" name="notes" value="">
        <input type="hidden" name="idigest" value=%idigest;>
        <div class="custom-file col">
          <input type="file" name="file"
            class="custom-file-input custom-portrait"
              id="portrait_file" accept="image/*"%if;(not has_portrait) autofocus%end;>
          <label class="custom-file-label text-truncate" data-browse="[*browse]"
            for="portrait_file">[*select] [image/images]0</label>
        </div>
        <button class="btn btn-primary ml-2 col-2 snd-btn-portrait"
          type="submit" disabled>[*send]</button>
      </form>
      <div class="small mt-2">%nn;
        %if;(has_portrait and has_old_portrait)[*previous portrait]%end;
      </div>
      <h1 class="display-4">
      %(<i class="far fa-file-image fa-fw mr-1"></i>%)[*add image]</h1>
      <form class="form-row" method="post" action="%action;" enctype="multipart/form-data">
        %if;(cgi)<input type="hidden" name="b" value="%e.b;">%end;
        <input type="hidden" name="m" value="SND_IMAGE_C_OK">
        <input type="hidden" name="i" value="%index;">
        <input type="hidden" name="mode" id="mode_2" value="others">
        <input type="hidden" name="idigest" value=%idigest;>
        %( file_name is automatically provided by the type="file" item %)
        %( file_name_2 is used when updating the note file after selection %)
        %( with the radiobutton of the old folder content (right column) %)
        <input type="hidden" name="file_name_2" id="file_name_2" value="">

        <div class="custom-file col">
          <input type="file" name="file" class="custom-file-input custom-others"
            id="others_file" accept="image/*"%if;has_portrait; autofocus%end;%( multiple%)>
          <label class="custom-file-label text-truncate" for="others_file"  data-browse="[*browse]">%nn;
            [*select] [image/images]0%nn;
          </label>
        </div>
        <button class="btn btn-primary ml-2 col-2 snd-btn-others" type="submit" >[*send]</button>
        %(TODO: print only if old img already exists%)
        <div class="small col-12 mt-1">
          [*previous image]
        </div>
        <textarea class="form-control col-10 mr-2" id="image_url"
          type="input" name="image_url" rows="1" placeholder="[*url]">
        </textarea>
        <textarea class="form-control col-10 mr-2" id="image_name"
          type="input" name="image_name" rows="1" placeholder="[*name]">
        </textarea>
        
        <div class="d-flex col">
          <h1 class="display-4">
            %(<i class="far fa-file-image fa-fw mr-1"></i>%)[*source/sources]0</h1>
        </div>
        %( TODO re-activate disable for send, source and note %)
        <textarea class="form-control col-12" id="image_source"
          name="source" rows="1" placeholder="[*source/sources]0">
        </textarea>

        <div class="d-flex col">
          <h1 class="display-4">
            %(<i class="far fa-file-image fa-fw mr-1"></i>%)[*note/notes]0</h1>
          <span class="mb-1 px-0 ml-auto align-self-end col-2">
            %include;toolbar
          </span>
        </div>
        <textarea class="form-control col-12" id="image_note"
          name="note" rows="5" placeholder="[*note/notes]0">
        </textarea>
        <button class="btn btn-primary mt-2 col-12 btn-update-note-source" type="submit" disabled>
          <span id="which_img_show">[*send image with note and source]</span></button>
      </form>
    </div>
    %( *** Col 2 *** image cache disabled with a kch=%random.bits; %)
    <div class="col-6">
      %if;(has_portrait or has_old_portrait)
        <h1 class="display-4">[*portrait]0</h1>
        %if;has_portrait;
          <div class="d-flex mt-1">
            <a role="button" 
              href=%if;has_portrait_url;"%portrait;"%else;"%prefix;kch=%random.bits;&m=IM_C&i=%index;"%end;%sp;
              target="_blank" rel="noopener"%sp;
              data-toggle="tooltip" data-html="true" data-placement="left"
              title='<strong>[*see portrait]</strong><br><span class="small">%portrait;</span>
                   <br><img class="rounded my-1"
              src=%if;has_portrait_url;"%portrait;"%else;"%prefix;kch=%random.bits;&m=IM_C&i=%index;"%end;%sp;
                   width="185px">'>
              <i class="far fa-file-image fa-fw text-primary"></i></a>
          <span class="invisible"><i class="fas fa-retweet fa-rotate-90 fa-fw text-primary"></i></span>
          <strong><samp class="text-truncate">%portraits_store;%X;</samp></strong><samp>%nn;
          %if;has_portrait_url;%carrousel;.url%else;%portrait_name;%end;</samp>
          <a role="button" class="ml-auto col-1"  href="%prefix;m=DEL_IMAGE_C_OK&i=%index;&idigest=%idigest;"
             data-toggle="tooltip" data-html="true" data-placement="left"
             title='<i class="far fa-trash-can text-warning mr-1"></i><strong>[*delete portrait]</strong><br><span class="small">%portrait;</span>
                    <br><img class="rounded my-1" src="%prefix;m=IM_C&i=%index;"
                    width="185px">'>
            <i class="far fa-trash-can text-warning"></i>%nn;</a>
          </div>
        %end;
        %if;has_old_portrait;
          <div class="d-flex mt-1">
            <a role="button" 
              href=%if;has_old_portrait_url;"%portrait;"%else;"%prefix;kch=%random.bits;&m=IM_C_S&i=%index;"%end;
              target="_blank" rel="noopener"%sp;
              data-toggle="tooltip" data-html="true" data-placement="left"
              title='<strong>[*see portrait]</strong><br><span class="small">%portrait_saved</span>
                   <br><img class="rounded my-1"
              src=%if;has_old_portrait_url;"%portrait_saved;"%else;"%prefix;kch=%random.bits;&m=IM_C_S&i=%index;"%end;
                   width="185px">'>
              <i class="far fa-file-image fa-fw text-primary"></i></a>
            <a role="button" href="%prefix;m=RESET_IMAGE_C_OK&i=%index;&mode=portraits&file_name=%portrait;&idigest=%idigest;"
               title="[*restore portrait saved]">
              <i class="fa fa-retweet fa-rotate-90 fa-fw text-success"></i>%nn;</a>
            <strong><samp class="text-truncate">%saved_portraits_store;%X;</samp></strong><samp>
            %if;has_old_portrait_url;%carrousel;.url%else;%portrait_saved_name;%end;</samp>
            <a role="button" class="ml-auto col-1" href="%prefix;m=DEL_IMAGE_C_OK&i=%index;&idigest=%idigest;&delete=on"
              data-toggle="tooltip" data-html="true" data-placement="left"
               title='<i class="far fa-trash-can text-danger mr-1"></i><strong>[*delete portrait saved]0</strong><br><span class="small">%portrait_saved;</span>
                      <br><img class="rounded my-1" src="%prefix;m=IM_C_S&i=%index;"
                      width="185px">'>
              <i class="far fa-trash-can text-danger"></i></a>
          </div>
        %end;
        <table style="line-height:0.8;" class="mt-2"><tr>
        <td style="vertical-align:top"><a class="d_flex mt-1" href="%prefix;&m=REFRESH&i=%index;" title="[*add image]">
          <span class="fa fa-image fa-fw" aria-hidden="true"></span>%nn;
        </a></td><td>&nbsp;</td>
        <td><small>[*warning refresh]</small>%nn;</td>
        </tr></table>
      %end;
      %if;(has_carrousel)
        <h1 class="display-4">[*image/images]1</h1>
        <div class="d-flex align-items-center">
          <i class="fa fa-folder-open fa-lg text-warning mx-2" aria-hidden="true"></i>
          <strong><samp class="text-truncate" title="%images_store;%X;%carrousel;">%images_store;%X;%carrousel;%X;</samp></strong>
          <div class="ml-auto">(%carrousel_img_nbr; %if;(carrousel_img_nbr>1)[image/images]1%else;[image/images]0%end;)</div>
        </div>
        %foreach;img_in_carrousel;
          <div class="d-flex mt-1">
            <a role="button"
              href=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C&i=%index;&s=%carrousel_img;"%end;
              target="_blank" rel="noopener" data-toggle="tooltip" data-html="true" data-placement="left"
              title='<strong><i class="fas fa-images fa-xs mr-1"></i>[*see] [image/images]0</strong>
                     <br><span class="small">%carrousel_img;</span>
                     <br><img class="rounded my-1"
              src=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C&i=%index;&s=%carrousel_img;"%end;
                     width="185px">
                     '>
              <i class="far fa-file-image fa-fw text-primary"></i></a>
            <a role="button" href="#" id="source_%img_cnt;" class="text-%if;(carrousel_img_src="")danger%else;primary%end;"
              onclick='get_source(%img_cnt;, "%carrousel_img;"); return false;' data-source="%carrousel_img_src;"
              data-toggle="tooltip" data-html="true" data-placement="bottom"
              title='<strong><i class="far fa-file fa-fw mr-1"></i>
                     %if;(carrousel_img_src="")[*add source]%else;[*modify source]%end;</strong>
                     <br><span class="small"><br>%carrousel_img_src;</span>'>
              <i class="far fa-file-zipper fa-fw"></i></a>
            <a role="button" href="#" id="note_%img_cnt;" class="text-%if;(carrousel_img_note="")danger%else;primary%end;"
              onclick='get_note(%img_cnt;, "%carrousel_img;"); return false;' data-note="%carrousel_img_note;"
              data-toggle="tooltip" data-html="true" data-placement="bottom"
              title='<strong><i class="far fa-file fa-fw mr-1"></i>
                     %if;(carrousel_img_note="")[*add note]%else;[*modify note]%end;</strong>
                     <br><span class="small"><br>%carrousel_img_note;</span>'>
              <i class="far fa-file-lines fa-fw"></i></a>
            <samp class="text-truncate ml-1" title="%images_store;%X;%carrousel;%X;%carrousel_img;">%carrousel_img;</samp>
            <div class="ml-auto col-1">
              <a role="button"
                href="%prefix;m=DEL_IMAGE_C_OK&i=%index;&file_name=%carrousel_img;&mode=others&idigest=%idigest;"
                data-toggle="tooltip" data-html="true" data-placement="left"
                title='<i class="far fa-trash-can text-warning mr-1"></i><strong>[*delete image]</strong>
                       <br><span class="small">%carrousel_img;</span>
                       <br><img class="rounded my-1"
                src=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C&i=%index;&s=%carrousel_img;"%end;
                width="185px">'>
                <i class="far fa-trash-can text-warning"></i></a>
            </div>
          </div>
        %end;
      %end;
      %if;(carrousel_old_img_nbr>0)
        <h1 class="display-4">[*saved images]1</h1>
        <div class="d-flex align-items-center">
          <i class="fa fa-folder-open fa-lg text-warning mx-2" aria-hidden="true"></i>
          <strong><samp class="text-truncate" title="%images_store;%X;%carrousel;%X;old%X;">%images_store%X;%carrousel;%X;old%X;</samp></strong>
          <div class="ml-auto">(%carrousel_old_img_nbr; %if;(carrousel_old_img_nbr>1)[image/images]1%else;[image/images]0%end;)</div>
        </div>
        %foreach;img_in_carrousel_old;
          <div class="d-flex mt-1">
            <a role="button"
              href=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C_S&i=%index;&s=%carrousel_img;"%end;
              target="_blank" rel="noopener" data-toggle="tooltip" data-html="true" data-placement="left"
              title='<strong><i class="fas fa-images fa-xs mr-1"></i>[*see] [saved images]0</strong>
                     <br><span class="small">%carrousel_img;</span>
                     <br><img class="rounded my-1"
              src=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C_S&i=%index;&s=%carrousel_img;"%end;
              width="185px">'>
              <i class="far fa-file-image fa-fw text-primary"></i></a>
            <a role="button" href="%prefix;m=RESET_IMAGE_C_OK&i=%index;&mode=others&file_name=%carrousel_img;&idigest=%idigest;"
               %if;(url_in_env!="")%else;data-toggle="tooltip" data-html="true" data-placement="top"%end;
               title="[*restore image saved]">
              <i class="fa fa-retweet fa-rotate-90 fa-fw text-success"></i></a>
            <samp class="text-truncate ml-1" title="%images_store;%X;old%X;%carrousel_img;">%carrousel_img;</samp>
            <div class="ml-auto col-1">
              <a role="button"
                href="%prefix;m=DEL_IMAGE_C_OK&i=%index%nn;
                  &idigest=%idigest;&file_name=%carrousel_img;&mode=others%nn;
                  &delete=on"%sp;
                data-toggle="tooltip" data-html="true" data-placement="left"
                title='<i class="far fa-trash-can text-warning mr-1"></i><strong>[*delete image saved]</strong>
                         <br><span class="small">%carrousel_img;</span>
                         <br><img class="rounded my-1"
                src=%if;(url_in_env!="")"%url_in_env;"%else;"%prefix;m=IM_C_S&i=%index;&s=%carrousel_img;"%end;
                width="185px">'>
                <i class="far fa-trash-can text-danger fa-fw text-primary"></i></a>
            </div>
          </div>
        %end;
        <table style="line-height:0.8;" class="mt-2"><tr>
        <td style="vertical-align:top"><a class="d_flex mt-1" href="%prefix;&m=REFRESH&i=%index;" title="[*add image]/[delete image]">
          <span class="fa fa-image fa-fw" aria-hidden="true"></span>%nn;
        </a></td><td>&nbsp;</td>
        <td><small>[*warning refresh]</small>%nn;</td>
        </tr></table>
      %end;
    </div>
  </div>
  %if;(evar.em!="")
    <div role="alert" class="alert alert-dismissible fade show alert-%apply;alert_color() mt-3">
      <strong>%apply;alert_header()[:]</strong> %apply;alert_content()
      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
  %end;
%end;

%base_trailer;
%include;copyr
</div>
%include;js
%define;input_snd(xxx,yyy)
$('.xxx').change(function() {
   %(replace input label with file name, then enable send button if input is non empty%)
   let fileName = $(this).val().split('\\').pop();
   $(this).next('.custom-file-label').addClass("selected").html(fileName);
   $('.yyy').attr('disabled', false);
   %if;("yyy"="snd-btn-others")
     $('textarea').attr('disabled', false);
     $('textarea').focus();
   %end;
});
%end;
<script>
%apply;input_snd("custom-portrait","snd-btn-portrait")
%apply;input_snd("custom-others","snd-btn-others")
$('#image_note').bind('input propertychange', function() {
  if(this.value.length){
  $('.btn-update-note-source').attr('disabled', false);
  }
});
$('#image_source').bind('input propertychange', function() {
  if(this.value.length){
  $('.btn-update-note-source').attr('disabled', false);
  }
});
$('.fa-file-lines').click(function() {
  $('.custom-others').attr('disabled', true);
  $('#image_note').attr('disabled', false);
  $('#image_note').focus();4
});
$('.fa-file-zipper').click(function() {
  $('.custom-others').attr('disabled', true);
  $('#image_source').attr('disabled', false);
  $('#image_source').focus();1
});
%( Initialize Bootstrap toast, tooltip and popover component, dismiss on next click function,
  TODO: choose one and delete the other %)
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
%($(function () {
  $('[data-toggle="popover"]').popover()
})
$('.popover-dismiss').popover({
  trigger: 'focus'
})
$( document).ready(function () {
 $('.toast').toast('show');
})
$(function () {
  $('.toast').toast()
})%)
function get_note (cnt, name) {
var item = document.getElementById("note_"+cnt);
document.getElementById("image_note").value=item.dataset.note;
document.getElementById("which_img_show").textContent="[*update image note] "+name;
document.getElementById("file_name_2").value=name;
document.getElementById("mode_2").value="note";
%(var ta = document.getElementById("image_note");
autosize.update(ta);%)
}
function get_source (cnt, name) {
var item = document.getElementById("source_"+cnt);
document.getElementById("image_source").value=item.dataset.source;
document.getElementById("which_img_show").textContent="[*update image source] "+name;
document.getElementById("file_name_2").value=name;
document.getElementById("mode_2").value="source";
%(var ta = document.getElementById("image_source");
autosize.update(ta);%)
}
function toggle_url_on () {
console.log("trace");
var state = document.getElementById("image_name").disable;
console.log(state);
document.getElementById("image_name").disable = !state;
document.getElementById("image_name").focus();
}
</script>
%( Possible heavier futur script to manage multiple files inputs
   https://github.com/Johann-S/bs-custom-file-input/blob/master/dist/bs-custom-file-input.min.js
<script src=%etc_prefix;js/bs-custom-file-input.min.js></script>
<script>$(document).ready(function(){bsCustomFileInput.init()})</script> %)

</body>
</html>
