#BLOCK("Pager", #Images, 10)

#LOCAL("AltLanguageID", #Session.User.LanguageID)
#LOCAL("AltLanguageName", "")
#IF(#DEFINED(#INPUT.AltLanguageID))#SET("AltLanguageID", #INPUT.AltLanguageID)#ENDIF
#LOOP(#Shop.Languages)#IF(#AltLanguageID EQ #LanguageID)#SET("AltLanguageName", #Native)#ENDIF#ENDLOOP

#WITH_LANGUAGE(#AltLanguageID)
<form action="#Pager.URL" method="post" onsubmit="if(this.ChangeAction.value=='') return false; " class="ep-js" data-js=".uiForm({showSaveWarn:true})">
  <div class="Dialog">
    <input type="hidden" name="URLPager" value="#IF(#INPUT.URLPager)#INPUT.URLPager#ELSE#Pager.URLPage#ENDIF" />
    <input type="hidden" name="ChangeAction" value="SaveList" />
    <input type="hidden" name="ViewObjectID" value="#ID" />
    <input type="hidden" name="Page" value="#Pager.Page" />#IF(#INPUT.PageSize)
    <input type="hidden" name="PageSize"  value="#INPUT.PageSize"  />#ENDIF#IF(#INPUT.OrderBy)
    <input type="hidden" name="OrderBy"   value="#INPUT.OrderBy"   />#ENDIF#IF(#INPUT.OrderDesc)
    <input type="hidden" name="OrderDesc" value="#INPUT.OrderDesc" />#ENDIF

  #IF(#FormError)
    <div class="DialogMessage MessageWarning">
      <h3>{InputError}</h3>
      #IF(#FormErrors.Reason.OBJECT_EXISTS)
        {DoubleObject}
      #ELSIF(#FormErrors.Reason.ANOTHERFILEALREADYEXISTS)
        {AnotherFileAlreadyExists}
      #ELSE
        {PleaseCorrectErrors}
      #ENDIF
    </div>
  #ENDIF

  #IF(#DELETE)
        <input type="hidden" name="ACCEPT" value="1" />
        <div class="DialogMessage MessageConfirmAction">
          <h3>{AcceptAction}</h3>
        </div>
        #LOOP(#DeleteObjects)<input type="hidden" name="ListObjectID" value="#ID" />#ENDLOOP
  #ELSIF(#DELETEALL)
        <div class="DialogMessage MessageConfirmActionLarge">
          <h3>{AcceptDeleteAll}</h3>
          <br />
          <input type="checkbox" id="acceptcheckbox" name="ACCEPT" value="1" class="Checkbox AlignMiddle ep-js"  data-js=".uiInput()" /><label class="AlignMiddle" for="acceptcheckbox">{DeleteAllConfirmation}</label>
        </div>
  #ENDIF

#IF(NOT #DELETE) #IF(NOT #DELETEALL)
  <div class="BorderRadius12Box FloatLeft BottomMargin SmallPadding" >
  #BLOCK("NewLineReplace"," ")
  <input type="file" name="NewFile" class="ep-js" data-js=".presentationUiUploader({
      multiple:true,
      accept:'image/*',
      buttonText  : '{UploadImages[js]}',
      data:{
          ChangeAction:'UploadFiles',
          ObjectID:#ID,
          Directory:'#ImageDirectory'
      },
      callback:'?ViewAction='+ep.config.viewAction+'&ObjectID='+ep.config.objectId
    })
    .parent()
    .addClass('FloatLeft')"/>
  #ENDBLOCK

   <span>{MemoryUsage}<span>
   #LOCAL("MaxValue", (#Shop.FeatureMaxValue.GallerySize*1024))#LOCAL("CurrentValue", (#Shop.FeatureCurrentValue.GallerySize *1024) )
   #LOCAL("Percentage",#CALCULATE(100 * #CurrentValue / #MaxValue))
    <span class="StatusBar LeftMargin" style="width: 70px;" title="{TotalMemory}: #MaxValue[MB] / {UsedMemory}: #CurrentValue[MB]" >
      <span class="InnerStatusBar">
          <span class=#IF(#Percentage > 90)"PercentageCritical"#ELSIF(#Percentage > 60)"PercentageMiddle"#ELSE"PercentageNormal"#ENDIF style="width:#Percentage%"></span>
      </span>
    </span>
    #Percentage[float:0]%
    {FreeMemory}:
     #LOCAL("FreeMemory", #CALCULATE((#MaxValue - #CurrentValue)))
       #IF(#FreeMemory < 0)#SET("FreeMemory", 0)#ENDIF
       #FreeMemory[MB]
     #ENDLOCAL
   #ENDLOCAL#ENDLOCAL#ENDLOCAL
  </div>
#ENDIF#ENDIF

#IF(NOT#DELETEALL)
  #IF(#AltLanguageID AND #COUNT(#Shop.Languages) > 1)
    <div class="AlignRight">
      <label for="AltLanguageID">{Language}</label>
      <select class="HalfSize#IF(#DELETE) Disabled#ENDIF ep-js" data-js=".uiInput()" id="AltLanguageID" name="AltLanguageID" onchange="window.location='?ObjectID=#ObjectID&amp;ViewAction=#INPUT.ViewAction[js]&amp;AltLanguageID='+this.value+'&amp;DialogArea=ContentArea&amp;Page='+#Pager.Page;" #IF(#DELETE)disabled="disabled"#ENDIF>
      #LOOP(#Shop.Languages)
        <option class="HalfSize" value="#LanguageID" #IF(#AltLanguageID EQ #LanguageID)selected="selected"#ENDIF>#Native</option>
      #ENDLOOP
      </select>
    </div>
  #ENDIF
    <br class="ClearBoth"/>
    #IF(NOT #DELETE) #IF(#Pager.CountOfItems > 0)
      <div>
        <label class="ep-uiInput-wrap ep-uiInput-wrapSelect" for"SortImagesAscending">{InsertImagesDuringUpload}</label>
        <select class="ep-uiInput-base ep-uiInput-field ep-uiInput-select ep-js  ep-uiInput" data-js="" name="SortImagesAscending" id="sortorderinput" type="select">
          <option value="0" #IF(NOT #SortImagesAscending)Selected="selected"#ENDIF>{AtTheBeginOfList}</option>
          <option value="1" #IF(#SortImagesAscending)Selected="selected"#ENDIF>{AtTheEndOfList}</option>
        </select>
      </div>
      <br />
      <script>
        jQuery.ready({
            plugin: [ 'ep.ajax' ],
            DOM:    true
        }, function($){
          jq('#sortorderinput').on('change', function(){
            sortordervalue = $("#sortorderinput").val();
            ep.ajax({
                data: {
                  ObjectID: #ID,
                  ViewAction: 'JSONViewResponse',
                  ChangeAction : 'ChangeSortOrder',
                  SortImagesAscending: sortordervalue
                },
                cache: false,
                type: "post",
                async: true,
                dataType: "json"
            }).fail(function( jqXHR, statusText, errorThrown ){
              jq('#sortorderinput').addClass('DialogError');
            }).done(function( jsonData, statusText, jqXHR ){
              jq('#sortorderinput').removeClass('DialogError');
            });
          });
        });
    </script>
    #ENDIF #ENDIF

    #IF(NOT #DELETE)
        #SNIPPET("INC-BatchActions", "BatchActions", "BatchActions")
    #ENDIF
    #INCLUDE("INC-PagerHeader")
    <table class="ContentList ep-js" data-js=".uiRichtable()">
      <thead>
        <tr>
          <td class="Checkbox"><input class="ep-js" data-js=".uiInput()" type="checkbox" name="selector" value="Checkbox" #IF(#DELETE) disabled="disabled" #ENDIF  /></td>
          <td>{Preview}</td>
          <td>{File}</td>
          <td>{Information}</td>
          <td class="MediumSlimColumn">{Position}</td>
        </tr>
      </thead>
      <tfoot>
        <tr><td colspan="5">
          <div class="Pager">
            #IF(#Pager.CountOfPages > 1)#INCLUDE("Pager")#ENDIF
          </div>
        </td></tr>
      </tfoot>
      <tbody>

    #IF(#DELETE)
      #LOOP(#DeleteObjects)
        <tr #IF(#FormError_ListObjectID)class="DialogError"#ELSIF(#ItemNo % 2) class="alternate"#ENDIF>
          <td class="Checkbox"><input type="checkbox" class="ep-js" data-js=".uiInput()" name="ListObjectID" value="#ID" disabled="disabled" checked="checked" /></td>
          <td class="AlignMiddle AlignCenter"><img src="#ThumbnailImage[webpath]" class="MaxWidth100 MaxHeight50 NoAlphaImage" alt="#NameOrAlias" title="#NameOrAlias" /></td>
          <td class="NormalWhiteSpace">
            #MediaGalleryFile<br />
            <span class="AdditionalInfo">
              #Date[datetime]<br />
              #MetaInformation.Size[KB] (#MetaInformation.Width x #MetaInformation.Height[px])
            </span>
          </td>
          <td>
            <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td>{Keywords}</td>
                <td>#JOIN(",",#Tags)#Tag#ENDJOIN</td>
              </tr>
              <tr>
                <td>{Description}</td>
                <td>#Description</td>
              </tr>
            </table>
          </td>
          <td class="InputField AlignRight">#Position</td>
        </tr>
      #ENDLOOP
    #ELSE
      #LOOP(#Pager.Items)
        #WITH_ERROR(#FormError)
        <tr#IF(#FormError_ListObjectID) class="DialogError"#ELSIF(#ItemNo % 2) class="alternate"#ENDIF>
          <td class="Checkbox">
            <input type="hidden" name="GalleryImageID" value="#ID" />
            <input type="checkbox" class="ep-js" data-js=".uiInput()" name="ListObjectID" value="#ID" />
          </td>
          <td class="LinkImage AlignCenter AlignMiddle NoRowSelector">
              <img src="#ThumbnailImage[webpath]"
                 data-src-l="#OriginalImage[webpath]"
                 class="MaxWidth100 MaxHeight50 NoAlphaImage"
                 alt=""
              />
          </td>
          <td class="NormalWhiteSpace">
            #LOCAL("CurrentFileName", "")
            #IF(#FormError_ImageFileName)
              #SET("CurrentFileName", #ImageFileName[filename])
            #ELSE
              #IF(#MediaGalleryFile[filename] NE "")
                #SET("CurrentFileName", #MediaGalleryFile[filename])
              #ELSE
                #SET("CurrentFileName", #UNIQUEID("file_"))
              #ENDIF
            #ENDIF

            <span class="FloatLeft RightSmallMargin">#MediaGalleryFile[filepath]/</span>
            <div class="Bold FloatLeft ep-newfilename" data-filename="#CurrentFileName">
              #CurrentFileName
            </div>
            <i class="Sprite LeftSmallMargin ico_s_pencil LinkImage" title="{RenameFile}"></i>
            <span>#MediaGalleryFile[fileext]</span>
            #ENDLOCAL

            <span class="AdditionalInfo ui-helper-clearfix">
              #Date[datetime]<br />
              #MetaInformation.Size[KB] (#MetaInformation.Width x #MetaInformation.Height[px])
            </span>
          </td>
          <td>
            <table border="0" cellspacing="0" cellpadding="0" style="width:100%; min-width:300px;">
              <tr>
                <td style="width:100px;">{Keywords}</td>
                <td style="width:auto;" #IF(#FormError_Tags)class="DialogError"#ENDIF>
                  <script type="text/javascript">

                  </script>
                  <input class="ep-ui-smartsearch ep-js" data-js=".uiInput()"
                         value="#IF(#FormError)#GET("INPUT.Tags_".#ID, "html")#ELSE#JOIN(", ", #Tags)#Tag#ENDJOIN#ENDIF"
                         placeholder="{UseCommas}"
                         name="Tags_#ID"
                         style="width:240px;"
                  />
                </td>
              </tr>
              <tr>
                <td>{Description}<label for="Description_#ID" style="display:none">{Description} (#Alias)</label></td>
                <td><textarea name="Description" id="Description_#ID" rows="5" cols="40" style="width:240px;" class="ep-js" data-js=".uiValidate({#IF(#FormError_Description)'valid':false,#ENDIF'maxlength':255})">#Description[html]</textarea></td>
              </tr>
            </table>
          </td>
          <td class="InputField">
            <input type="text" name="ListPosition" value="#Position" size="4"/>
            <input type="hidden" name="PositionObjectID" value="#ID" />
          </td>
        </tr>
        #ENDWITH_ERROR
      #ENDLOOP
      <script type="text/javascript">
        require([
          "jquery",
          "ep/ui/smartsearch",
          "$ready!"
        ], function ($) {
          $('.ep-ui-smartsearch').uiSmartsearch({
            'source': ['#JOIN("','", #RELATEDTAGS(#Shop.Object, "ImageGallery"))#Element#ENDJOIN'],
            'group': 'ImageGallery',
            'multiple': true,
            'minLength': 1
          });
        });
      </script>
        <tr class="NewEntry">
          <td></td>
          <td colspan="4">
          #BLOCK("NewLineReplace"," ")
            <input type="file" name="NewFile" class="ep-js" data-js=".presentationUiUploader({
                big:true,
                multiple:true,
                accept:'image/*',
                buttonText  : '{UploadImages[js]}',
                data:{
                  ChangeAction:'UploadFiles',
                  ObjectID:#ID,
                  Directory:'#ImageDirectory'
                },
                callback:'?ViewAction='+ep.config.viewAction+'&ObjectID='+ep.config.objectId
              })"/>
          #ENDBLOCK
          </td>
        </tr>
    #ENDIF

      </tbody>
    </table>
#ENDIF

    <script type="text/javascript">
    require(["de_epages/presentation/inc/filenameinput", "$ready!"], function (filenameinput) {
      filenameinput.createFileInput({
        selector: ".ep-newfilename",
        hiddenInputName : "ImageFileName"
      });
    });
    </script>

    #IF(#DELETE)
      <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
        <button type="submit" class="Button DeleteButton" onclick="this.form.ChangeAction.value='DeleteListedObjects'">{Delete}</button>
        <button type="button" class="Button" onclick="window.location.href='#IF(#INPUT.URLPager)#INPUT.URLPager[js]#ELSE#Pager.URLPage#ENDIF'" name="Cancel">{Cancel}</button>
      </div>
    #ELSIF(NOT #DELETEALL)
      <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
        <input type="hidden" name="MoveTo_ViewAction" value="ViewMoveTo" />
        <button type="submit" class="Button SaveButton">{Save}</button>
      </div>
    #ELSIF(#DELETEALL)
      <div class="DialogButtonbar ep-js" data-js=".holdOnTop('bottom', {inheritDimensions: true})">
        <button type="submit" class="Button SaveButton" onclick="this.form.ChangeAction.value='DeleteAllImages'"  >{Delete}</button>
        <button type="button" class="Button CancelButton" onclick="window.location.href='#IF(#INPUT.URLPager)#INPUT.URLPager[js]#ELSE#Pager.URLPage#ENDIF'" name="Cancel" >{Cancel}</button>
      </div>
    #ENDIF

  </div>

</form>
#ENDWITH_LANGUAGE
#ENDLOCAL
#ENDLOCAL
#ENDBLOCK