{layout @admin.html}
{block content}
{import forms.html}
<link rel="stylesheet" href="public/css/file_manager/style.css">
<div class="column-group horizontal-gutters space">
  <div class="xlarge-80 large-80 medium-100 small-100 tiny-100">
    <nav class="ink-navigation large fw-400 half-bottom-space">
      <ul class="breadcrumbs grey">
	<li n:foreach="$breadcrumbs as $title => $url" n:class="$iterator->last ? active"><a href="{$url}">{$title}</a></li>
      </ul>
    </nav>
    <table class="ink-table hover medium">
      <thead>
	<tr>
	  <th class="align-left">{_'file'}</th>
	  <th class="align-left">{_'size'}</th>
	  <th class="align-left">{_'permissions'}</th>
	  <th class="align-left">{_'modified_at'}</th>
	  <th colspan="2"></th>
	</tr>
      </thead>
      <tbody>
	{foreach $files as $file}
	<tr>
	  <td>
	    {if ( 'dir' == $file['type'] )}
	    <img src="{=BASE_URL}public/images/folder_24.png" alt="{_'directory'}"> <a href="{=BASE_URL}file_manager/{$file['encoded_path']}">{$file['name']}</a>
	    {elseif ( 'application/pdf' == $file['mime_type'] )}
	    <img src="{=BASE_URL}public/images/compose_24.png" alt="{_'file'}"> <a href="{=BASE_URL}public/{$decodedPath}/{$file['name']}">{$file['name']}</a>
	    {elseif ( in_array( $file['mime_type'], ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/x-icon'] ) )}
	    <img class="thumbnail" src="{=BASE_URL}public/{$decodedPath}/{$file['name']}" alt="{$file['name']}"> <a href="{=BASE_URL}file_manager/view_file/{$file['encoded_path']}">{$file['name']}</a>
	    {else}
	    <img src="{=BASE_URL}public/images/compose_24.png" alt="{_'file'}"> <a href="{=BASE_URL}file_manager/view_file/{$file['encoded_path']}">{$file['name']}</a>
	    {/if}
	  </td>
	  <td>{$file['size']}</td>
	  <td><a href="#" onclick="document.getElementById('change_permissions').action='{=BASE_URL|noescape}file_manager/change_permissions/{$file['encoded_path']|noescape}';(new Ink.UI.Modal(changePermissionsModal)).open();return false;">{$file['permissions']}</a></td>
	  <td>{$file['modified_at']|formatDate:'medium'}</td>
	  <td><a href="#" onclick="document.getElementById('rename_file').action='{=BASE_URL|noescape}file_manager/rename_file/{$file['encoded_path']|noescape}';(new Ink.UI.Modal(renameFileModal)).open();return false;"><img src="{=BASE_URL}public/images/edit_24.png" alt="{_'rename_file'}" title="{_'rename_file'}"></a></td>
	  {var $confirm = ('confirm_delete_file'|translate:$file['name'])}
	  <td><a href="{=BASE_URL}file_manager/{if ('dir' == $file['type'])}delete_directory{else}delete_file{/if}/{$file['encoded_path']|noescape}" onclick="return confirm('{$confirm|noescape}');"><img src="{=BASE_URL}public/images/delete_24.png" alt="{_'delete_file'}" title="{_'delete_file'}"></a></td>
	</tr>
	{/foreach}
      </tbody>
    </table>
  </div>
  <div class="xlarge-20 large-20 medium-100 small-100 tiny-100">
    <a href="#" id="newFileModalTrigger" class="ink-button green quarter-bottom-space">{_'create_new_file'}</a><br>
    <a href="#" id="newDirectoryModalTrigger" class="ink-button green quarter-bottom-space">{_'create_new_directory'}</a><br>
    <a href="#" id="uploadFileModalTrigger" class="ink-button blue quarter-bottom-space">{_'upload_file'}</a>
  </div>
</div>
<div class="ink-shade fade">
  <div id="newFileModal" class="ink-modal fade" data-trigger="#newFileModalTrigger" data-width="390px" data-height="240px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
    <div class="modal-header">
      <button class="modal-close ink-dismiss"></button>
      <h2 class="modal-title">{_'create_new_file'}</h2>
    </div>
    <div class="modal-body">
      <form action="{=BASE_URL}file_manager/create_file/{$encodedPath}" method="POST" enctype="multipart/form-data" class="ink-form">
	<div class="control-group">
	  <div class="control">
	    {include input, name: 'filename', maxlength: 100, required: true}
	  </div>
	</div>
	{include input, name: 'create' , value: ( 'create'|translate ), type: 'submit', class: 'ink-button green'}
      </form>
    </div>
  </div>
</div>
<div class="ink-shade fade">
  <div id="newDirectoryModal" class="ink-modal fade" data-trigger="#newDirectoryModalTrigger" data-width="390px" data-height="240px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
    <div class="modal-header">
      <button class="modal-close ink-dismiss"></button>
      <h2 class="modal-title">{_'create_new_directory'}</h2>
    </div>
    <div class="modal-body">
      <form action="{=BASE_URL}file_manager/create_directory/{$encodedPath}" method="POST" enctype="multipart/form-data" class="ink-form">
	<div class="control-group">
	  <div class="control">
	    {include input, name: 'directory', maxlength: 100, required: true}
	  </div>
	</div>
	{include input, name: 'create' , value: ( 'create'|translate ), type: 'submit', class: 'ink-button green'}
      </form>
    </div>
  </div>
</div>
<div class="ink-shade fade">
  <div id="uploadFileModal" class="ink-modal fade" data-trigger="#uploadFileModalTrigger" data-width="390px" data-height="240px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
    <div class="modal-header">
      <button class="modal-close ink-dismiss"></button>
      <h2 class="modal-title">{_'upload_file'}</h2>
    </div>
    <div class="modal-body">
      <form action="{=BASE_URL}file_manager/upload_file/{$encodedPath}" method="POST" enctype="multipart/form-data" class="ink-form">
	<div class="control-group">
	  <div class="control">
	    <input type="file" name="uploaded_file">
	  </div>
	</div>
	{include input, name: 'upload' , value: ( 'upload'|translate ), type: 'submit', class: 'ink-button green'}
      </form>
    </div>
  </div>
</div>
<div class="ink-shade fade">
  <div id="renameFileModal" class="ink-modal fade" data-trigger="#renameFileModalTrigger" data-width="390px" data-height="240px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
    <div class="modal-header">
      <button class="modal-close ink-dismiss"></button>
      <h2 class="modal-title">{_'rename_file'}</h2>
    </div>
    <div class="modal-body">
      <form id="rename_file" action="#" method="POST" enctype="multipart/form-data" class="ink-form">
	<div class="control-group">
	  <div class="control">
	    {include input, name: 'new_filename', maxlength: 100, required: true}
	  </div>
	</div>
	{include input, name: 'rename' , value: ( 'rename'|translate ), type: 'submit', class: 'ink-button green'}
      </form>
    </div>
  </div>
</div>
<div class="ink-shade fade">
  <div id="changePermissionsModal" class="ink-modal fade" data-trigger="#changePermissionsModalTrigger" data-width="400px" data-height="240px" role="dialog" aria-hidden="true" aria-labelled-by="modal-title">
    <div class="modal-header">
      <button class="modal-close ink-dismiss"></button>
      <h2 class="modal-title">{_'change_permissions'}</h2>
    </div>
    <div class="modal-body">
      <form id="change_permissions" action="#" method="POST" enctype="multipart/form-data" class="ink-form">
	<div class="control-group">
	  <div class="control">
	    {include input, name: 'permissions', maxlength: 5, required: true}
	  </div>
	</div>
	{include input, name: 'change_permissions' , value: ( 'change_permissions'|translate ), type: 'submit', class: 'ink-button green'}
      </form>
    </div>
  </div>
</div>
{/block}