<script type="text/x-jsharmony-template" class="<%=model.class%>_template_file_listing_tiles">
  <div class="<%=model.class%>_file_listing_header">
    Current Folder: <span class="<%=model.class%>_file_listing_header_path"><#=media_folder_desc#></span>
  </div>
  <div class="<%=model.class%>_file_listing_scroll">
    <div class="<%=model.class%>_file_tile_container <#=(!media_files.length?'empty':'')#>">
      <# _.each(media_files, function(media_file){ #>
        <div class="<%=model.class%>_file_tile" tabindex="0" data-key="<#=media_file.media_key#>" data-value="media_key:<#=media_file.media_key#>">
          
          <# if(media_file.media_width && media_file.media_height){ #><img src="<%=jsh._BASEURL%>_funcs/media/<#=media_file.media_key#>/file_tile?media_file_id=<#=media_file.media_file_id#>" />
          <# } else { #><img src="<%=jsh._BASEURL%>images/icon_file.svg" class="default" /><# } #>
          <span><#=media_file.media_filename#></span>
        </div>
      <# }); #>
      <# if(!media_files.length){ #>
        <div class="<%=model.class%>_file_tile_empty">
          No media files in this folder
        </div>
        <div class="<%=model.class%>_file_tile_empty_desc">
          Please select a different folder<% if(XExt.hasAction(model.actions, 'I')){ %>, or <a href="#" class="<%=model.class%>_add_file">upload new files</a> to this folder<% } %>
        </div>
      <# } #>
    </div>
  </div>
  <div class="<%=model.class%>_drop_overlay"><div class="<%=model.class%>_drop_overlay_body">Drop files here</div></div>
</script>

<script type="text/x-jsharmony-template" class="<%=model.class%>_template_file_listing_details">
  <div class="<%=model.class%>_file_listing_header">
    Current Folder: <span class="<%=model.class%>_file_listing_header_path"><#=media_folder_desc#></span>
  </div>
  <div class="<%=model.class%>_file_listing_scroll">
    <table class="<%=model.class%>_file_listing_tbl" cellspacing="0">
      <thead>
        <tr>
          <th align="left" width="30%" data-sort="filename" class="sortable">Name</th>
          <th align="left" width="50%" data-sort="description" class="sortable">Description</th>
          <th align="right" width="70" data-sort="size" class="sortable">Size</th>
        </tr>
      </thead>
      <tbody>
        <# _.each(media_files, function(media_file){ #>
          <tr class="<%=model.class%>_file_listing_row" data-key="<#=media_file.media_key#>">
            <td valign="top" align="left" class="media_filename"><a href="<%=jsh._BASEURL%>_funcs/media/<#=media_file.media_key#>/file_tile?media_file_id=<#=media_file.media_file_id#>" target="<%=jsh._instance%>_xfileproxy" data-value="media_key:<#=media_file.media_key#>"><img src='/images/icon_file.png' class='' /><#=media_file.media_filename#></a></td>
            <td valign="top" align="left"><#=media_file.media_desc#></td>
            <td valign="top" align="right" style="white-space:nowrap;"><#=jsh.XFormat.bytes(media_file.media_size)#></td>
          </tr>
        <# }); #>
        <# if(!media_files.length){ #>
          <tr>
            <td colspan="5">
              <div class="<%=model.class%>_file_tile_empty">
                No media files in this folder
              </div>
              <div class="<%=model.class%>_file_tile_empty_desc">
                Please select a different folder<% if(XExt.hasAction(model.actions, 'I')){ %>, or <a href="#" class="<%=model.class%>_add_file">upload new files</a> to this folder<% } %>
              </div>
            </td>
          </tr>
        <# } #>
      </tbody>
    </table>
  </div>
  <div class="<%=model.class%>_drop_overlay"><div class="<%=model.class%>_drop_overlay_body">Drop files here</div></div>
</script>

<script type="text/x-jsharmony-template" class="<%=model.class%>_template_file_info">
  <div class="<%=model.class%>_file_info_header">Media Information</div>
  <# if(media_file){ #>
    <div class="<%=model.class%>_file_info_body">
      <# if(media_file.media_width && media_file.media_height){ #><img class="<%=model.class%>_file_info_preview" src="<%=jsh._BASEURL%>_funcs/media/<#=media_file.media_key#>/file_preview?media_file_id=<#=media_file.media_file_id#>" />
      <# } else { #><img class="<%=model.class%>_file_info_preview" src="<%=jsh._BASEURL%>images/icon_file.svg" /><# } #>
      <div class="<%=model.class%>_file_info_actions">
        <a class="<%=model.class%>_file_info_download" href="#"><img src="/images/icon_download.png" />Download</a>
        <% if(XExt.hasAction(model.actions, 'U')){ %><a class="<%=model.class%>_file_info_replace" href="#"><img src="/images/icon_new.png" />Replace</a><% } %>
        <% if(XExt.hasAction(model.actions, 'D')){ %><a class="<%=model.class%>_file_info_delete" href="#"><img src="/images/icon_delete.png" />Delete</a><% } %>
      </div>
      <div class="<%=model.class%>_file_info_items">
        <% if(XExt.hasAction(model.actions, 'U')){ %>
          <div class="<%=model.class%>_file_info_item"><label>File Name:</label><span class="media_filename"><#=media_file.media_filename#></span> <a class="<%=model.class%>_file_info_rename" href="#"><img src="/images/icon_edit.png" /></a></div>
          <div class="<%=model.class%>_file_info_item"><label>Path:</label><span class="media_path"><#=media_file.media_path#></span> <a class="<%=model.class%>_file_info_move" href="#"><img src="/images/icon_edit.png" /></a></div>
          <div class="<%=model.class%>_file_info_item" style="display:none;"><a href="#" class="save_changes"><img src="/images/icon_save.png"/> Save Changes</a></div>
          <div class="<%=model.class%>_file_info_item"><label>Title:</label><input class="media_desc" /></div>
          <div class="<%=model.class%>_file_info_item"><label>Type:</label><select class="media_type"></select></div>
          <div class="<%=model.class%>_file_info_item" style="align-items:flex-start;"><label style="padding-top:8px;">Tags:</label><div class="media_tags_editor xtagbox"></div><input type="text" class="media_tags xtagbox_base" value="<#=media_file.media_tags#>" /></div>
        <% } else { %>
          <div class="<%=model.class%>_file_info_item"><label>File Name:</label><span class="media_filename"><#=media_file.media_filename#></span></div>
          <div class="<%=model.class%>_file_info_item"><label>Path:</label><span class="media_path"><#=media_file.media_path#></span></div>
          <div class="<%=model.class%>_file_info_item"><label>Title:</label><span class="media_desc" /></span></div>
          <div class="<%=model.class%>_file_info_item"><label>Type:</label><span class="media_type"></span></div>
          <div class="<%=model.class%>_file_info_item"><label>Tags:</label><span class="media_tags"></span></div>
        <% } %>
        <div class="<%=model.class%>_file_info_item"><label>Size:</label><span class="media_size"><#=jsh.XFormat.bytes(media_file.media_size)#> (<#=jsh.XFormat.comma(media_file.media_size)#> bytes)</span></div>
        <# if(media_file.media_width){ #><div class="<%=model.class%>_file_info_item"><label>Width:</label><span class="media_width"><#=media_file.media_width#> pixels</span></div><# } #>
        <# if(media_file.media_height){ #><div class="<%=model.class%>_file_info_item"><label>Height:</label><span class="media_height"><#=media_file.media_height#> pixels</span></div><# } #>
        <div style="padding-top:10px;"></div>
        <div class="<%=model.class%>_file_info_item"><label>Modified:</label><span class="media_mtstmp"><#=jsh.moment(media_file.media_mtstmp).format('YYYY-MM-DD h:mm a')#></span></div>
        <div class="<%=model.class%>_file_info_item"><label>Modified By:</label><span class="media_muser_fmt"><#=media_file.media_muser_fmt#></span></div>
        <div class="<%=model.class%>_file_info_item"><label>Uploaded:</label><span class="media_uptstmp"><#=jsh.moment(media_file.media_uptstmp).format('YYYY-MM-DD h:mm a')#></span></div>
        <div class="<%=model.class%>_file_info_item"><label>Uploaded By:</label><span class="media_upuser_fmt"><#=media_file.media_upuser_fmt#></span></div>
        <% if(XExt.hasAction(model.actions, 'U')){ %>
          <div style="padding-top:10px;"></div>
          <div class="<%=model.class%>_file_info_item"><a class="<%=model.class%>_file_info_view_revisions" href="#"><img src="/images/icon_refresh.png" />View Revisions</a></div>
        <% } %>
      </div>
    </div>
  <# } #>
</script>

<div style="display:none;">
  <div class="<%=model.class%>_AddMedia xdialogbox xpromptbox" style="min-width:350px;height:200px;">
    <div style="position:relative;width:100%;height:200px;">
      <div class="<%=model.class%>_drop_overlay_body">
        Drop files here<br/>
        <input type="file" class="media_upload default_focus" multiple accept="image/*" onchange="" /><br/>
        <div class="<%=model.class%>_drop_overlay_desc">Uploading to: <span class="<%=model.class%>_drop_overlay_path"></span></div>
      </div>
    </div>
  </div>
  <div class="<%=model.class%>_ReplaceMedia xdialogbox xpromptbox" style="min-width:350px;height:200px;">
    <div style="position:relative;width:100%;height:200px;">
      <div class="<%=model.class%>_drop_overlay_body">
        Drop file here<br/>
        <input type="file" class="media_upload default_focus" accept="image/*" onchange="" />
      </div>
    </div>
  </div>
</div>

<div class="xcontext_menu <%=model.class%>_file_context_menu">
  <a class="select" onclick="<%-js('_this.sendToEditor(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_ok.png" />Select File</a>
  <a onclick="<%-js('_this.viewFileDetails(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_browse.png" />View Details</a>
  <a onclick="<%-js('_this.downloadFile(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_download.png" />Download</a>
  <% if(XExt.hasAction(model.actions, 'U')){ %><a onclick="<%-js('_this.viewRevisions(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_refresh.png" />View Revisions</a><% } %>
  <% if(XExt.hasAction(model.actions, 'U')){ %><a onclick="<%-js('_this.renameFile(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_edit.png" />Rename</a><% } %>
  <% if(XExt.hasAction(model.actions, 'U')){ %><a onclick="<%-js('_this.moveFile(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_export.png" />Move</a><% } %>
  <% if(XExt.hasAction(model.actions, 'D')){ %><a onclick="<%-js('_this.deleteFile(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_delete.png" />Delete</a><% } %>
</div>
<div class="xcontext_menu <%=model.class%>_file_container_context_menu">
  <% if(XExt.hasAction(model.actions, 'I')){ %><a onclick="<%-js('_this.addFile(jsh.xContextMenuItem); return false;')%>"><img src="/images/icon_add.png" />Add File</a><% } %>
</div>